格式：选择器+{属性名：属性值;}
css求值过程
1、先将代码解析为DOM树和样式规则。，
2、filtering：筛选出与各个元素匹配的样式，
3、cascading：按照优先级规则选出优先级最高的属性值（层叠值）。
4、defaulting：层叠值为空时使用默认值或初始值
5、resolving：将相对值或者关键字进行转换得到计算值（浏览器拿到就可以立即计算出的值，浏览器不进行实际布局就能计算出的值）
6、formatting：将计算值进一步转换（使用值，实际布局时使用的值）
7、constraining：小数像素转换为整数
8、渲染实际值。
选择器--选择标签
基础选择器
直接用标签名作为选择器：标签选择器--按找标签名选择(使用较多)
可以快速将所有同类标签选中
.类名：类选择器--选择有相同class的标签(使用非常多)
多类名：一个标签指定多个类名class，之间用空格隔开（class=“name1 name2”)，使其同时调用多个样式
#id：id选择器--选择有相同id的标签(常与js搭配使用)
注意id具有唯一性!!!
*:通配符选择器--选择所有标签(特殊情况使用)
复合选择器
父级 子级：后代选择器（包含选择器）
如ol li{}只会选择ol中的所有li标签（注意父级与子级之间有空格，而且可以套娃，这里可以用任意基础选择器组合）
父级>子级：子选择器
只会选择相邻的下一级的标签
选择器1,选择器2······：并集选择器
选择多组标签，同时为他们定义相同样式
用冒号表示：伪类选择器
链接伪类
a:link--选择所有为=未被访问的链接
a:visited--选择所有已被访问的链接
a:hover--选择鼠标位于其上的链接（常用）
a:active--选择活动链接（鼠标按下未弹起的链接）
注意以上四种顺序不能改变（即l-v-h-a的顺序）
:focus伪类选择器
input:focus--选择获取光标的元素（一般用于表单）
css的引入方式
行内样式表（行内式）：直接在单个标签内改样式，格式为style="属性名：属性值；"
内部样式表（嵌入式）：将css代码放在style标签内
外部样式表（链接式）：样式单独写在css文件中，通过link标签引入html文件
元素的显示模式
块元素：独占一行
常见的有h、p、div、ul、ol、li等。
特点：独占一行，宽高以及内外边距可以控制，默认宽度为父级元素的宽度，里面可以放行内或块元素。
注意文字类元素内不能使用块级元素，如p和h标签内不能放div。
行内元素（内联元素）：一行多个
典型的如span、a。
特点：一行可以有多个，直接设置宽高是无效的，默认宽度为本身内容的宽度，里面只能放文本或其他行内元素。
注意：链接a内不能再放链接，但可以放块级元素
行内块元素：具有行内和块的特点
如img、input、td。
特点：和相邻行内块元素在同一行，但之间会有空隙，默认宽度为本身内容的宽度，同时可以设置宽高以及内外边距。
显示模式的转换
display:block--将元素转换为块级元素
display:inline--将元素转换为行内元素
display:inline-block--将元素转换为行内块元素
CSS三大特性
层叠性：后设置的会覆盖先设置的样式（只会覆盖相同的属性）
继承性:子标签会继承父级标签的某些属性（比如文本的颜色和大小）
注意行高的继承性：
body{
font: 12px/1.5 Microsoft YaHei;
}
**表示行高为字体大小的1.5倍，即121.5。这种方法可以自动调节行高
显示继承：inherit
优先级：
!important（权重无穷大）>行内样式（权重1,0,0,0）>id选择器（权重0,1,0,0）>[伪]类选择器（权重0,0,1,0）>元素选择器（权重0,0,0,1）>继承或*（权重0,0,0,0）
对于复合选择器会有权重叠加问题，叠加时不会进位，从左至右依次比较即可。
盒子模型
border边框
border-width：边框粗细，单位为px
borer-style：边框样式（solid为实线，dashed为虚线，dotted为点线）
border-color：边框颜色
边框简写：border:1px solid red;（没有顺序）
也可以分开写各边
如：border-top:上边框
border-collapse：collapse合并相邻边框
注意盒子实际大小=指定的width+边框粗细
content内容
padding内边距
padding-left：设置左边距
······
padding：apx-->表示四个方向都是a
padding：apx bpx-->表示上下为a，左右为b
padding：apx bpx cpx-->上为a，左右为b，下为c
padding：apx bpx cpx dpx-->上a，右b，下c，左d
注意内边距也会撑大盒子，因此设计宽高时应该考虑padding
不指定宽度就不会撑开
margin外边距
通过外边距让块级盒子水平居中：左右外边距设置为auto
==>让行内或行内块元素水平居中可以通过对父级元素设置text-align:center
解决合并外边距时的塌陷问题
1、为父元素定义上边框
2、为父元素指定内边距
3、为父元素添加overflow:hidden
清除内外边距
** {
padding：0
margin：0
}
网页布局
标准流（普通流/文档流）:按照规定的默认方式排列
flex布局（弹性布局）
操作方便，应用广泛。
原理：给父盒子设置flex属性，来控制子盒子的位置和排列方式。
特性：
任何一个容器都可以指定为flex布局。当父盒子设为flex布局后，子元素的float、clear、vertical-align属性将失效。
常见父项属性：
flex-direction：设置主轴方向
子元素按照主轴排列。
默认主轴方向为x轴，水平向右；
默认侧轴方向为y轴，垂直向下；
属性值：
row：默认值，从左到右；
row-reverse：从右到左；
column：从上到下；
column-reverse：从下到上。
justify-content：设置主轴上的子元素排列方式
注意：使用这个属性之前一定要确定好主轴
属性值：
flex-start：默认值，从头部开始；
flex-end：从尾部开始；
center：在主轴居中对齐；
space-around：平分剩余空间；
space-between：先两边贴边，再平分剩余空间。
space-evenly：flex 元素之间和 flex 元素和容器的空间总是相等的。
flex-wrap：设置子元素是否换行
nowrap：默认不换行，放不下盒子会自动缩小
wrap：换行
align-items：设置侧轴上的子元素排列方式（单行）
默认侧轴为垂直向下时：
flex-start：从上到下；
flex-end：从下到上；
center：挤在一起居中；
stretch：拉伸（默认值），但子盒子给了高度不会生效。
align-content：设置侧轴上的子元素排列方式（多行）
注意单行时没有效果
属性值：
flex-start：默认值，从头部开始；
flex-end：从尾部开始；
center：在侧轴居中显示；
space-around：平分剩余空间；
space-between：先两边贴边，再平分剩余空间。
stretch：设置子项元素高度平分父元素高度。
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
flex-flow:row wrap;
常见子项属性：
flex-grown
flex-grown属性定义子项目分配剩余空间，用flex表示占多少份数。也可以写为百分比（相对于父级盒子）
.item {
flex-grown:<number>;/*default 0*/
}
注意flex属性也是按剩余空间的份数进行分配，但与flex-grown计算方式不同。这篇文章给出了例子以及计算步骤的不同：
flex弹性盒子flex-grow 和flex的区别_flex和flex-grow_lorem233的博客-CSDN博客
align-self
控制子项自己在侧轴上的排列方式。默认为auto，表示继承父元素的align-items属性，若没有父元素，则等同于stretch。
order
定义项目的排列顺序。数值越小，排列越靠前，默认为0。
grid布局
容器属性
给容器指定为grid布局，将其指定为网格容器。
grid-template-columns属性设置列宽，grid-template-rows属性设置行高
fr：表示网格容器中可用空间的一份。
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格的垂直位置（上中下）。
项目属性
grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线
justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items属性的用法完全一致，但只作用于单个项目
align-self 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
浮动
一般用于多个盒子横向排列得情况
float属性用于创建浮动框，将其移动到一边，直到遇到包含块边缘或其他浮动框边缘
语法：选择器 {float：属性值}（none表示不浮动，left表示元素向左浮动，right表示元素向右浮动）
特性：
1、设置浮动后脱离标准流的控制移动到指定位置，浮动的盒子不再保留原先的位置
可以理解为飘浮在标准流的上面（但不会对前面的标准流产生影响），因此可能会两个盒子出现重合。为了避免这个问题，可以将包含块内的元素都浮动
2、浮动的元素会顶端对齐的方式一行显示，并且会自动换行
3、浮动元素具有行内块元素的特性（比如可以设置宽高）
浮动元素通常和标准流父级搭配使用（父级排列上下位置，内部子元素通过浮动设置左右位置）
清除浮动：解决子盒子浮动不占位置导致父盒子高度为0的问题
清除浮动后，父级会根据浮动的子盒子自动检测高度
语法：选择器{clear：属性值}（left表示不允许左侧有浮动元素，right不允许右侧浮动，both表示同时清除两侧浮动的影响）
清除浮动的方法：
1、额外标签法，例如给浮动元素的末尾添加一个块级元素或者其他标签。
2、给父级元素添加overflow属性（设置为hidden、auto、scroll）。
3、给父元素添加伪元素
4、给父元素添加双伪元素
定位
定位=定位模式+边偏移
position：定位模式
static：静态定位，按照标准流特性布局。
relative：相对定位，相对于原来的位置定位，移动后原位置仍然保留。
absolute：绝对定位，相对于最近的有定位的一级祖先元素来定位（没有祖先或者祖先没有定位则相对于浏览器定位），原位置不再保留。
❗❗❗子绝父相：子元素用绝对定位，父元素用相对定位。常用于轮播图。
fixed：固定定位，以浏览器可视窗口为参照，不占有原来的位置。
sticky：粘性定位，可以看作相对定位与固定定位的结合，以可视窗口为参照但占有原先位置，注意必须至少指定一个边偏移距离。
元素的显示与隐藏
display:none：隐藏对象，隐藏后不占有原来的位置
display:block：显示对象（也是转换为块级元素）
visibility:hidden：元素隐藏，隐藏后保留原来的位置
visibility:visible：元素可视
overflow:visible：显示溢出内容
overflow:hidden：隐藏溢出内容
overflow:scroll：显示滚动条
overflow:auto：只有溢出内容时显示滚动条
