-
三、CSS\
-
✔盒子模型, 怪异盒子\
-
盒子模型概念：\
- 盒子模型区域：内容区域（width/height）、内间距区域（padding）、边框区域（border）、外边距区域（margin）\
-
设置盒子模型的类型：box-sizing：\
- content-box：border和padding不计算入width之内（默认）\
- padding-box：padding计算入width内\
- border-box：border和padding计算入width之内，其实就是怪异模式了\
-
替换元素：iframe、img、video\
- object-fit:cover等比例占满盒子，裁掉显示不下的部分\
- object-positon:center设置在盒子中的位置\
-
盒子的布局方式\
-
外部显示类型\
- 控制相邻盒子之间的布局，分为块级盒子和行内盒子两种\
-
块级盒子：div、p、h1\
- display:block\
- 盒子的宽度会占满浏览器，后面的盒子会挤到下一行显示\
-
行内盒子：span、a\
- display:inline\
- 宽度是内容的宽度，后面的盒子会跟在后边继续排列\
-
两者区别：\
- 行内盒子无法手动设置宽高\
- 行内盒子垂直方向的padding和margin不挤占空间，会重叠显示\
- 行内盒子里面只能有行内盒子，不能有块级盒子\
-
内部显示类型\
- 控制盒子内部子盒子之间的排列方式\
-
非正常的文档流\
- display:flex流式布局\
- display:grid栅格布局\
- display:inline-block外部类型保持inline行内状态，同时设置宽高（可以把周围盒子空间挤占掉）\
-
-
边距塌陷\
- 给两个盒子同时设置外边距，最终只有一个外边距\
- 都是正数取最大；相同取其一；正负都有，取最大正数与最小负数之和；都是负数取最小\
- 怪异盒模型中的width指的是内容、边框、内边距总的宽度\
-
-
✔BFC（块级格式上下文）\
-
概念：\
- 块级格式上下文\
- BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。\
-
形成条件\
- 1、float的值不是none。\
- 2、position的值不是static或者relative。\
- 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex\
- 4、overflow的值不是visible\
-
作用（隔离保护）\
- 形成独立的渲染区域\
- 内部元素的渲染不会影响外界\
-
形成BFC的常见条件\
- 1.浮动元素：float不是none\
- 2.绝对定位元素：position是absolute或fixed\
- 3.块级元素：overflow不是visible\
- display:flex元素\
- inline-block元素\
-
-
✔BFC清除浮动\
- 解决浮动问题，设置隔离区把内容隔离防止外面元素进入\
- 方法：子元素float:left => 父元素overflow:auto\
- 图片塌陷的时候给图片加一个display:inline-block\
-
✔float, 清除浮动（子元素float:left => 父元素overflow:auto）\
-
overflow是干啥的？\
- 参数是scroll时候，必会出现滚动条。\
- 参数是auto时候，子元素内容大于父元素时出现滚动条。\
- 参数是visible时候，溢出的内容出现在父元素之外。\
- 参数是hidden时候，溢出隐藏。\
-
-
✔解决盒子塌陷\
- 1.给父盒子添加overflow属性（ overflow:auto有可能出现滚动条、overflow:hidden可能会带来内容不可见的问题）\
- 2.父盒子里最下方引入清除浮动块\
- 3.after伪类清除浮动\
- 4.给盒子设置高度\
-
✔去除样式\
- a标签去除样式：text-decoration: none;\
- ul标签去除样式：list-style-type: none;\
-
✔垂直居中的方法\
-
padding\
- 优点：简单，只需设置上下内边距\
- 缺点：父元素不能设置固定高度\
-
line-height\
- 优点：可设置父元素固定高度\
- 缺点：不太适合多行文字\
-
flexbox（弹性布局）\
- 单行导航栏\
- display: flex（内部）\
- justify-content: center\
- 优点：简单易懂\
- 缺点：兼容性（IE9以上）\
-
table\
- 父元素：display:table\
- 子元素：display:table-cell/vertical-align:middle\
- 优点：简单\
- 缺点：副作用（做表格才会用）\
-
grid（栅格布局）\
- 适合多行多列大范围的布局\
- display: grid（内部）\
- grid-template-columns: repeat(6,1fr);\
- 优点：布局很强\
- 缺点：兼容性（IE9以上），上手难度高\
-
absolute（绝对定位）\
- 父元素：position: relative;\
-
子元素：\
- position: absolute;\
- top: 50%;\
- transform: translateY(-50%);\
- 优点：容易上手\
- 缺点：脱离文档流\
-
***伪元素（重点理解）\
-
要居中元素：\
- display: inline-block;\
- vertical-align: middle;\
-
创建伪元素（同级）：\
-
div.main::after\
- content: "";\
- display: inline-block;\
- height: 100%;\
- vertical-align: middle;\
-
- 优点：兼容性好\
- 缺点：不好理解\
-
-
-
✔样式优先级\
- 外部样式（外部CSS文件）<内部样式（style标签里写）<内联样式（写style属性）<!important\
-
权值（权值大的优先）\
- a.内联样式权值1000\
- b.ID选择器权值100\
- c.class类选择器权值10\
- d.标签选择器权值1\
- e.通配符、子选择器、相邻选择器等的权值为0\
-
✔CSS中 link 和@import 的区别是？\
-
- 本质：link 是 HTML的标签，除了加载CSS，还可以定义RSS，定义rel连接属性等，⽽@import 是css提供的⽅法，只能加载CSS\
-
- 兼容：link⽆兼容问题，⽽@import只兼容IE5以上\
-
- 加载：link与页⾯同时加载，@import是页⾯加载完之后再加载\
-
- DOM操作：link⽀持DOM操作改变样式，@import不⽀持DOM\
-
-
✔position 的值的定位区别（定位）\
- 不脱离文档流：static、relative\
- 脱离文档流：absolute、fixed\
- inherit是继承\
- static静态定位（默认值）：设置top、bottom、right、left无作用\
-
absolute（绝对定位）\
- 相对于父元素定位\
- 如果父元素设置了static，会追溯到祖辈元素\
-
relative（相对定位）\
- 根据自身移动\
-
与static相似，增加了两大功能：\
- 1.比static多了控制top、bottom、right、left\
- 2.最重要的功能：relative里面的absolute元素会根据relative的位置去定位\
-
fixed（绝对定位）\
- 对浏览器窗口进行定位\
-
absolute和fixed的区别：\
- 1.fixed会定位到荧幕的固定位置\
- 2.如果fixed元素有设定top、bottom、right、left的属性，即使放在relative里面，fixed也会根据页面，即body去定位（不设置就和absolute一样）\
-
*sticky\
- 当贴到顶部的时候，固定在顶部\
- top设定距离值\
-
✔position的absolute与fixed共同点与不同点\
-
相同点：\
- 1.元素脱离文档流，不占据标准流空间\
- 2.默认覆盖到非定位元素上\
- 3.改变行内元素的呈现方式，display被置为block\
-
不同点：\
- 1.fixed会定位到荧幕的固定位置\
- 2.如果fixed元素有设定top、bottom、right、left的属性，即使放在relative里面，fixed也会根据页面，即body去定位（不设置就和absolute一样）\
-
-
