规则生效问题
优先级
特异度的值来决定的
选择器的特异度 Sqecificity
id （伪)类 标签
#id .class tag
百 十 个
继承
某些属性会自动继承其父元素的计算值 除非显示的 指定一个值
文字相关的，颜色，字体 不给会继承
一些盒子模型 大小 不会继承
css可以和不可以继承的属性
不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、
overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、
page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、
font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
显示继承 inherit
例如
* {
box-sizing: inherit;
}
上边通过一个通配选择器 让所有的元素都可以继承 box-sizing
后面的元素都可以继承了
初始值
initial
一个元素 一直往上找 没找到继承的值
如果没有继承的值 就用初始值
一个元素 不可继承的 又没有指定值
或者可继承 没有继承到
例如
background-color: transparent;
margin-left: 0;
可以使用 initial 关键字 显示重置为初始值
background-color: initial;
额外拓展
media https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media */
CSS求值过程
布局 Layout
布局相关技术
常规流
normal flow
块级
行级
表格布局
FlexBox
Grid
盒模型
理解成一个一个的盒子
margin
margin跟padding一样，也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。
在实际编程中，我们往往使用的是margin的这种高效简洁写法来编程。
margin-top--margin-right--margin-bottom--margin-left，即“上-右-下-左”。以下简写为
top--right--bottom--left。其中需要注意的是后三种情况，当有像素值缺省时，浏览器会自动对缺省像素按照
“bottom=top”和“left=right”的方法进行赋值。
指定元素四个方向的外边框
取值可以是长度 百分数 auto
auto
->左右都是auto
会取中间值然后水平居中
百分数是相对于容器宽度
margin collapse
margin在垂直方向上有时候会出现边距的折叠融合合并
如：上100px 下100px (margin-bottom: 100px 和 margin-top: 100px)
两个组组件的间距 100px 而不是 200px
**只会取两个边距中较大的，而不是相加**
##################### box-sizing:boder-box; 区别：包括padding 和 border 如 设置100% 实际小于 100% 页面无滚动 推荐 ##########
border
border 简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：border-width border-style
border-color
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
指定边框的样式，粗细和颜色。
三种属性
border-width: 可以设置边框的宽度。
border-style: 可以设置边框的样式。
border-color: 可以设置边框的颜色。
四个方向
border-top
border-right
border-bottom
border-left
可以同时设置多个方向的边框。
padding
padding 简写属性在一个声明中设置所有内边距属性。可以按顺序设置如下属性：padding-top padding-right
指元素四个方向的内边距
百分数相对于容器宽度
10px -> 四个都是10px
10px 20px -> 左右两个是10px，上下两个是20px
10px 20px 10px 20px -> 从上开始 顺时针转一圈
content (width,height)
width -> 指定content box 宽度
取值为 长度 百分数 auto
auto 由浏览器根据其他属性确定
百分数相对于容器的context box宽度
height -> 指定content box 高度
取值为 长度 百分数 auto
auto 由浏览器根据其他属性确定
百分数相对于容器的context box高度
容器有指定高度的时候，百分数才生效。
层层包裹 浮动
float
可以文字 图片的一些效果绝对定位
position
盖在常规流上面 任意的改变位置 对常规流不会有上面影响 定位 position
定位属性：
position: absolute;
position: relative;
position: fixed;
position: sticky;
position: static;
position: initial;
position: inherit;
position: unset;
定位属性的值：
static
relative
absolute
fixed
sticky
initial
inherit
unset
定位属性的作用：
定位元素的位置
定位元素的大小
定位元素的内容
定位元素的父元素
定位元素的兄弟元素
定位元素的子元素
定位元素的祖先元素
定位元素的所有祖先元素
定位元素的所有兄弟元素
定位元素的所有子元素
定位元素的所有祖先元素
定位元素的所有子元素
定位元素的所有祖先元素
定位元素的所有子元素
定位元素的所有祖先元素
定位元素的所有子元素
overflow
overflow这个属性:
visible -> 超出可见 但是会超越设定的范围
hidden -> 超出不可见
scroll -> 超出可见 滚动overflow-wrap:break-world;换行
块级 and 行级
行级由内容决定
Block Level Box Inline Level Box
不和其他盒子并列摆放 和其他行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性 盒模型中的width,height不适用
生成块级盒子 生成行级盒子
内容分散在多个行盒(line box)中
body,article,div span,emstrong,cite,code等
main,section,h1-6,p
ul,li等
display: block; display: inline;
(把任意一个元素转化成块级盒子或者行级盒子）
display 属性
-> display: block; => 块级盒子
-> display: inline; => 行级盒子
-> display: inline-block; =>本身是行级，可以放在行盒中 可以设置宽高 作为一个整体不会被拆散成多行 (只能放在一行)
例如 : 一个图片 可以和文字在一行展示 但是没办法 把图片分成两行展示。
-> display: none; => 排版时完全被忽略
行级的排版上下文
lnline Formatting Context(IFC)
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则
盒子在一行内水平摆放
一行放不下的时候，换行显示
text-align: 决定一行内盒子的水平对齐
text-align: left;
text-align: right;
vertical-align: 决定一行内盒子的垂直对齐
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
避开浮动(float)元素
块级排版上下文
Block Formatting Context(BFC)
某些容器会创建一个BFC
根元素
浮动，绝对定位，inline-block
Flex子项和Grid子项
overflow值不是visible的块盒
display: flow-root;
BFC内的排版规则
盒子从上到下摆放
垂直margin合并 之前的margin边距不是相加而是取最大
BFC内盒子的margin不会与外面的合并 解决margin融合重叠问题 分开 放在不同的DFC中 嵌套div并设置display:flow-root;
BFC不会和浮动元素重叠 清除浮动经常用的一个技巧
Flex Box
一种新的排版上下文
它可以控制子级盒子的：
摆放的流向（上下左右）
摆放的顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行
使用
设置 display: flex;
遵循flex布局 而不是IFC BFC
控制流向
flex-direction: row | column | row-reverse | column-reverse
默认 row 反向 column
控制对齐
传统 水平 垂直
引入
主轴 justify-cnontent
flex-start | flex-end | center | space-between | space-around
不设置
默认 justify-content: flex-start;
基线对齐
align-items: flex-start | flex-end | center | baseline | stretch
侧轴
Flexibility */
Flexibility
可以设置子项的弹性，当容器有剩余空间是，会伸展，容器空间不够时，会收缩
flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度
Flex及FLex的缩写
flex:1 flex-grow: 1; 弹簧，弹力
flex:100px flex-basis: 100px; 基础长度 没有设置 一般读取一些宽度和高度的值 直接写宽度也可以
flex:2 1 flex-grow: 2;flex-shrink: 1;
flex: auto
flex: none
flex: stretch 换行
Grid
区别:二维网格 Flex 一维
display: grid; => 创建一个Grid容器
使用grid-template 相关属性将容器划分为网格
划分网格
grid-template-columns: 100px 100px 200px;
grid-template-rows: 100px 10px
grid-template-columns: 30% 30% auto;
grid-template-rows: 100px auto;
grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr; fr ==份
上竖着 下横着
设置每一个子项栈哪些行列
grid lin 网格线
grid-row-start: 1;
grid-column-start: 1;
grid-column-end: 3;
grid-row-end: 3;
或者
grid-area: 1 / 1 / 3 / 3;
float 浮动
实现文字环绕的一个功能
可以使用float属性
float: left;
float: right;
float: none;
float: inherit;
position 绝对定位
position: static; 默认值，非特定元素
position: relative; 相当于自身位置做一个偏移，不脱离文档流
->
在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top,left,bottom,right设置偏移长度
流内其他元素当他没有偏移一样布局
position: absolute; 绝对定位，相对非static祖先元素定位
->
脱离常规流
相对于最近的非static祖先定位
不好对流内元素布局造成影响
position: fixed; 相对于窗口绝对定位
->
和absolute区别，后者找父类。前者找窗口
-> 导航栏
position: sticky; 粘性定位。
