Summary of CSS basic knowledge points

1. Introduction to CSS

1.1. What is CSS?

• CSS refers to Cascading Style Sheets
• CSS describes how to display HTML elements on screen, paper, or other media
• CSS saves a lot of work. It can control multiple web page layouts at the same time.

1.2, CSS import method

Import method	writing position	Scope of action	scenes to be used
Embedded	CSS is written in the style tag. The style tag is usually placed in the head	The current page	small case
outreach	CSS is written in a separate CSS file and imported through the link tag	multiple pages	project
Inline	CSS is written in the style attribute of the tag	current tab	Use with js

2. CSS selector

2.1, CSS basic selector

2.1.1 ID Selector

• Structure : #id attribute value { css attribute name: attribute value; }
• Function : Through the id attribute value, find the label with this id attribute value in the page, and set the style

important point:

1. id attribute on all tags
2. The id attribute value is similar to an ID number, which is unique and non-repeatable in a page
3. There can only be one id attribute value on a tag
4. An id selector can only select one tag

2.1.2 Class selectors

• Structure : .class { css attribute name: attribute value; }
• Function : Through the class name, find all the tags with this class name in the page and set the style

important point:

1. There is a class attribute on all tags, and the attribute value of the class attribute becomes the class name
2. Class names can consist of numbers, letters, underscores, and dashes, but cannot start with numbers or dashes
3. A label can have multiple class names at the same time, and the class names are separated by spaces
4. Class names can be repeated, and a class selector can select multiple tags at the same time

2.1.3 Wildcard selectors

• Structure : *{ css attribute name: attribute value; }
• Function : find all the tags in the page and set the style

Note: By default, the browser's own attributes margin and padding are removed

2.1.4 Label selector

• Structure : tag name { css attribute name: attribute value; }
• Function : through the tag name, find all such tags in the page and set the style

important point:

1. The label selector selects a type of label, not a single one
2. The label selector can find the corresponding label no matter how deep the nesting relationship is

2.1.5 Attribute selectors

Attributes	illustrate
[attribute]	Select multiple attributeelements with the attribute
[attribute=value]	attribute=valueAll elements selected
[attribute~=value]	Selects all elements whose attributeattribute contains the word value
[attribute^=value]	Selects all elements whose attribute attribute value valuebegins with
[attribute$=value]	valueSelects all elements whose attribute attribute value ends with
[attribute*=value]	Selects every element whose attribute attribute contains valuea substring

• Structure : tag name { css attribute name: attribute value; }
• Function : through the tag name, find all such tags in the page and set the style

important point:

1. The label selector selects a type of label, not a single one
2. The label selector can find the corresponding label no matter how deep the nesting relationship is

2.2. Combined selector

Selector	effect	Format	example
descendant selector	find offspring	Selectors are separated by spaces	.father .son { css }
child selector	looking for son	Selectors are >separated by	.father > .son { css }
union selector	find multi-category elements	Selectors are ,separated by	div,p,span { css }
intersection selector	Find elements that satisfy multiple selectors at the same time	next to the selector	p.red { css }
sibling selector	Matches all span elements after the p tag	Selectors are ~separated by	p ~ span
adjacent selector	Matches the first span element of the p tag	Selectors are +separated by	p + span

2.3. Pseudo class selector

Pseudo-class : Add special effects to specific selectors without generating new elements

Selector	Functional description
E:first-child	Element E that is the first child of the parent element
E:last-child	Element E that is the last child of the parent element
E:nth-child(n)	As the nth child element E of the parent element
E:nth-last-child(n)	Select the last nth child element of the parent element
E:first-of-type	Selects the first E element of the specified type within the parent element
E:last-of-type	Selects the last element of the specified type within a parent element
E:nth-of-type(n)	Selects the nth E element of the specified type within the parent element
E:nth-last-of-type	Selects the last nth E element of the specified type within the parent element
E:root	Select the root element of the document where the matching element E is located, that is, html
E:only-child	Select the parent element contains only one child element, and the child element matches the E element
E:only-of-type	Select the parent element to contain only one child element of the same type, and the child element matches the E element
E:empty	Selects an element that has no children and that also does not contain any text nodes
E:link	Select all unvisited links
E:active	Select the a link element in the active state
E:visited	Select already visited elements
E:hover	Select an element on mouseover state
E:checked	selected <input type="checkbox" checked>element

2.4. Pseudo-element selector

Pseudo-elements : Insert additional elements or styles before and after the content element. These elements are not generated in the html document and are only visible externally.

Selector	Functional description
::before	Create a pseudo-element to place in front of the selected element
::after	Create a pseudo-element to place after the selected element
::first-letter	Select the first letter of the first row of various elements
::first-line	the first line of the selected element
::selection	Select the highlighted part by clicking and dragging the mouse

2.5、伪类和伪元素区别

1. 伪元素只能在选择器中出现一次，而且只在末尾出现
2. 伪类只设置样式，不会创建新元素。而伪元素会创建新元素
3. 伪类的效果可以通过添加实际的类来实现；伪元素也可以通过添加元素来实现

3、字体和文本样式

3.1、字体样式

属性名	样式	属性值
font-size	字体大小	数字+px
font-weight	字体粗细	正常：normal或数字400; 加粗：bold或数字700
font-style	是否倾斜	正常（默认值）：normal; 倾斜：italic
font-family	字体系列	sans-serif（无衬线字体）; serif（衬线字体）; monospace（等宽字体）
font	字体连写	style weight size family

3.2、文本样式

属性名	样式	属性值
text-indent	文本缩进	数字+px; 数字+em（推荐：1em = 当前标签的font-size的大小）
text-align	对齐方式	left: 左对齐; center: 居中对齐; right: 右对齐
text-decoration	文本修饰	underline: 下划线; line-through: 删除线; overline: 上划线; none: 无装饰线
line-height	文本行高	数字+px; 倍数（当前标签font-size的倍数）

4、背景相关属性

4.1、背景颜色

属性名：background-color

属性值：

颜色取值	示例
关键字	red、green、yellow等
rgb表示法	rgb(255,255,255)
rgba表示法	rgba(255,255,255,1)
十六进制	#ffffff;

注意点：

• 背景颜色默认值是透明的：rgba(0,0,0,0)或transparent
• 背景颜色不会影响盒子大小，一般在布局中使用，方便看清盒子大小和位置

4.2、背景图片

属性名：background-image

属性值：background-image: url(‘图片的路径’)

注意点：

• 背景图片默认实在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景不能撑开盒子

4.3、背景平铺

属性名：background-repeat

属性值：

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿水平方向（x轴）平铺
repeat-y	沿垂直方向（y轴）平铺

4.4、背景位置

属性名：background-position

属性值：background-position: 水平方向位置 垂直方向位置

4.5、img标签和背景图片的区别

• img标签是一个标签，不设置宽高默认会以原来尺寸显示
• 背景图片只是装饰的CSS样式，不能撑开元素的宽高

5、元素的显示模式

5.1、块级元素

属性：display: block
特点：

1. 独占一行（一行只能显示一个）
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高

代表标签：

• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer等

5.2、行内元素

属性：display: inline
特点：

1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高

代表标签：

• a、span、b、u、i、s、strong、ins、em、del等

5.3、行内块元素

属性：display: inline-block
特点：

1. 一行可以显示多个
2. 可以设置宽高

代表标签：

• input、textarea、button、select等
• 特殊情况：img标签有行内块元素特点，但在谷歌浏览器中显示的是inline

6、CSS三大特性

6.1、继承性

特点：子元素有默认继承父元素样式的特点（子承父业）

继承属性：

1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height

应用场景：

1. 可以直接给ul设置list-style:none属性，从而去除列表默认的小圆点样式
2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

继承失效情况：被浏览器默认样式给覆盖了

6.2、层叠性

特性：

1. 给同一个标签设置不同的样式 -> 此时样式会层叠叠加 -> 会共同作用在标签上
2. 给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效
3. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断

6.3、优先级

选择器	示例	权重值
!important	background-color: #fff !important;	正无穷
内联选择器	<span style='color: #333;'>样式作用元素</span>	1000
ID选择器	#id	100
类选择器、属性选择器、伪类选择器	.class	10
标签选择器、伪元素选择器	div、p	1
通配符选择器	*	0
继承属性	<div style='color:#333;'><span>样式作用元素</span></div>	-1

说明

1. 权重值是256进制的
2. 同一行的选择器权重值相加，权重值高的样式生效，如果权重值相同，后面写的覆盖前面
3. 不是同一行的直接找按权重值相加计算，权重值高的样式生效

7、盒子模型

7.1、盒子模型介绍

盒子的概念：

1. 页面中的每一个标签都可以看做是一个盒子；通过盒子的视角，可以更方便的进行布局
2. 浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域，我们也形象称之为盒子

盒子模型：CSS中规定盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成

7.1.1 内容的宽度和高度

作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小

属性：width / height

常见取值：数字 + px

7.1.2 边框 (border)

作用：设置边框粗细、边框样式、边框颜色效果

属性：

作用	属性名	属性值
边框粗细	border-width	数字 + px
边框样式	border-style	实线 solid、虚线 dashed、点线 dotted
边框颜色	border-color	颜色取值

边框连写形式：边框粗细 边框样式 边框颜色

例如：border: 1px solid #333;

单方向设置：border-方位名词: 1px solid red;

7.1.3 内边距 (padding)

作用：设置边框与内容区域之间的距离

属性名：padding

常见取值：

取值	示例	含义
一个值	padding: 10px;	上下左右都设置为10px
两个值	padding: 10px 20px;	上下设置为10px、左右设置为20px
三个值	padding: 10px 20px 30px	上设置为10px、左右设置为20px、下设置为30px
四个值	padding: 10px 20px 30px 40px	上设置为10px、右设置为20px、下设置为30px、左设置为40px

单方向设置：padding-方位名词: 10px;

7.1.4 外边距 (margin)

作用：设置边框以外，盒子与盒子之间的距离

属性名：margin

常见取值：

取值	示例	含义
一个值	margin: 10px;	上下左右都设置为10px
两个值	margin: 10px 20px;	上下设置为10px、左右设置为20px
三个值	margin: 10px 20px 30px	上设置为10px、左右设置为20px、下设置为30px
四个值	margin: 10px 20px 30px 40px	上设置为10px、右设置为20px、下设置为30px、左设置为40px

单方向设置：margin-方位名词: 10px;

7.1.5 盒子实际大小计算公式

• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

问题：当盒子被border和padding撑大后，如何解决？

1. 手动内减：手动计算多余大小，在内容中减去
2. 自动内减：给盒子设置属性 box-sizing: border-box;

7.1.6 相邻盒子之间margin计算规则

1. 水平方向的盒子，两者距离为margin之和
2. 垂直方向的盒子，两者距离为margin的最大值

7.1.7 塌陷现象

场景：互相嵌套和块级元素，子元素的magin-top会作用在父元素上

结果：导致父元素一起往下移动，引起父元素塌陷

解决方式：

1. 给父元素设置border-top或者padding-top（分割父子元素的margin-top）
2. 给父元素设置overflow: hidden;
3. 转换成行内块级元素 display: inline-block;
4. 设置浮动 float: left;
5. 添加伪类

常用清除浮动和父元素塌陷伪类：

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

8、 标准流

标准流：又称文档流，是浏览器在渲染元素时默认采用的一套排版规则，规定了该以何种方式排列元素

排版规则：

1. 块级元素：从上到下，垂直布局，独占一行
2. 行内元素 或 行内块元素：从左到右，水平布局，空间不够自动换行

9、 浮动

9.1、浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素会受到上面块级元素边界的影响
5. 浮动元素有特殊的显示效果

• 一行可以显示多个
• 可以设置宽高

注意点：浮动元素不能通过父元素设置text-align:center;或本身设置margin: 0 auto;让浮动元素本身水平居中

9.2、浮动的作用

1. 图文环绕
2. 网页布局，让垂直布局的盒子变成水平布局

9.3、浮动的代码

属性：float

1. 左浮动： float: left;
2. 右浮动： float: right;

9.4、浮动带来的影响

影响：子元素设置浮动，此时子元素脱离标准流无法撑开父元素，会影响页面其他元素的布局

9.5、清除浮动的方法

1. 直接设置父元素高度

• 优点：简单直接，方便
• 缺点：有些元素无固定高度，无法设置高度

2. 在父元素内容的最后添加一个块级元素，并给块级元素添加属性 clear: both;

• 缺点：会在页面中添加额外的标签，会让页面结构变得复杂难以阅读

3. 单伪元素清除法

基本写法：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

补充写法：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    /* 在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}

• 优点：直接给标签添加类即可清除浮动

4. 双伪元素清除法

   .clearfix::before,
   .clearfix::after {
   content: “”;
   display: table;
   }
   .clearfix::after {
   clear: both;
   }

• 优点：直接给标签添加类即可清除浮动

5. 给父元素设置overflow: hidden;

• 优点：简单直接，方便

10、 BFC

10.1、BFC介绍

• 块格式化上下文（Block Formatting Context）是web页面的可视CSS渲染的一部分，是块盒子的布局过程中发生的区域，也是浮动元素与其他元素交互的区域。

10.2、创建BFC的方法

1. html标签是BFC盒子
2. 浮动元素是BFC盒子
3. 行内元素是BFC盒子
4. overflow属性值不为visible是BFC盒子
5. position: absolute或fixed

10.2、BFC盒子特点

1. BFC盒子会默认包裹住内部子元素（标准流、浮动流）-> 应用场景：清除浮动
2. BFC盒子本身与子元素之间不存在margin的塌陷现象 -> 应用场景：解决margin的塌陷

11、定位

11.1、定位的应用场景

1. 可以解决盒子与盒子之间的层叠问题

• 定位之后的元素层级最高，可以层叠在其他盒子之上

2. 可以让盒子始终固定在屏幕中的某个位置

11.2、使用定位的步骤

11.2.1 设置定位方式

属性名：position

定位方式：

定位方式	属性值	相对于谁移动	是否占位置
静态定位	static	不能通过方位属性移动	占位置
相对定位	relative	相对于自己原来的位置	占位置
绝对定位	absolute	相对于最近的且有定位的祖先元素移动	不占位置（脱标）
固定定位	fixed	相对于浏览器可视区域	不占位置（脱标）

11.2.2 设置偏移值

• 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
• 选取的原则为就近原则

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

11.3、定位方式

11.3.1 静态定位

介绍：静态定位是默认值，就是标准流，不能通过方位属性进行移动
代码：position: static;

11.3.2 相对定位

介绍：相对于之前的位置进行位移
代码：position: relative;
特点：

1. 需要配合方位属性实现移动
2. 相对于原来的位置进行移动
3. 在页面中占位置,没有脱离标准流

应用场景：

1. 配合绝对定位（子绝父相）
2. 小范围移动

11.3.3 绝对定位

介绍：相对于之前的位置进行位移
代码：position: absolute;
特点：

1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置,脱离标准流
4. 相对于最近的有定位（非static）的祖先元素进行移动

应用场景：

1. 配合相对定位（子绝父相）

    <!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>水平垂直居中</title>
        <style>
            /* 相对于浏览器可视区域进行移动 */
            .father {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 500px;
                height: 500px;
                background-color: pink;
                transform: translate(-50%, -50%);
            }
            /* 相对于最近的有定位（非static）的祖先元素进行移动 */
            .son {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 200px;
                height: 200px;
                background-color: red;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>
    </html>
   

11.3.3 固定定位

介绍：相对于浏览器进行定位
代码：position: fixed;
特点：

1. 需要配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置,脱离标准流
4. 相对于最近的有定位（非static）的祖先元素进行移动

应用场景：

1. 让盒子固定在屏幕中的某个位置

12 元素层级（z-index）

12.1、 元素层级关系

1. 不同布局方式的层级关系

• 标准流 < 浮动 < 定位

2. 不同定位之间的层级关系

• 相对、绝对、固定默认层级相同
• 在HTML中写在下面的元素层级更高，会覆盖上面的元素

12.2、 改变层级的方式

• 给元素添加属性z-index;属性值越大，层级越高

13、 装饰

13.1、 基线

介绍：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

13.2、 文字对齐

属性名：vertical-align
属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

应用场景：

1. 解决文本框和表单按钮无法对齐问题、
2. 解决input和img无法对齐问题
3. 解决div中的文本框无法贴顶问题
4. 解决div不设置高度时，img标签下会存在额外间隙问题
5. 使用line-height让img标签垂直居中问题

13.3、 光标类型

介绍：设置鼠标光标在元素上时显示的样式
属性名：cursor
属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

13.4、边框圆角

介绍：让盒子四角变得圆润，增加页面细节，提高用户体验
属性名：border-radius
取值：数字+px、百分比

13.5、 overflow

介绍：控制溢出部分的显示效果

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

13.6、元素隐藏

介绍：让元素本身在浏览器中不可见

属性：

1. visibility: hidden;
2. display: none;

区别：

1. visibility: hidden;隐藏元素本身，并且在网页中占位置
2. display: none;隐藏元素本身，并且在网页中不占位置

13.6、元素透明度

介绍：让元素整体（包括内容）一起变透明
属性名：opacity
属性值：0 ~ 1之间的数字

• 1：表示完全不透明
• 0：表示完全透明