html盒⼦优先级设置,CSS基础（盒模型、选择器、权重、优先
级）
层叠样式表(Cascading Style Sheets)
盒模型
盒模型包含四部分：margin、border、padding、content。如果不使⽤doctype声明，浏览器默认使⽤⾃⼰的模式解析。如IE使⽤IE盒模型，firefo则使⽤标准盒⼦模型等。
标准盒⼦模型
IE盒⼦模型的区别是，content区域包含border和padding
选择器
选择器分类：
元素选择器
通配符选择器 *
类选择器
属性选择器
[attribute] 匹配带指定属性的元素
[attribute=value] 匹配带指定属性和值的元素
[attribute^=value] 匹配属性值以指定值开头的每个元素，如：h1[class^=bar] 匹配class以bar开头的h1元素
[attribute$=value] 匹配属性值以指定值结尾的每个元素
[attribute*=value] 匹配属性值中包含指定值的每个元素
[attribute~=value] 匹配属性值中包含指定值的元素， 必须匹配整个的单词
[attribute|=value] 匹配属性值以指定值开头的元素，必须匹配整个单词，或者是-前的整个单词
后代选择器
匹配后代元素 如：h1 span，匹配h1后的所有span标签
匹配⼦元素 如：h1 > span，匹配h1后的所有span⼦标签
匹配相邻兄弟元素 如：h1 + .bother
匹配同⽗级的后⾯的兄弟节点 如：h1 ~ .bother
伪类选择器(针对元素的状态)
使⽤顺序可以是：:link、:visited、:focus、:hover、:active，因为如果 :link和:visited放在最后，那所有的元素都会是已访问或者未访问的状态，设置好的:focus :hover :active失效，所以 :link和:visited最好放置在前⾯。
链接伪类 :link :visited
动态伪类 :focus :hover :active
元素伪类 :first-child等
伪元素选择器(必须放在出现该伪元素的选择器的后⾯)
:first-letter 块级元素的⾸字母样式
:first-line ⾸⾏样式
:after 元素之后
:before 元素之前
伪类与伪元素区分
伪类：⽤于向某些选择器添加特殊的效果，如：:link :active，(在原有的元素上添加类别)伪类的效果可以通过添加⼀个实际的类来达到
伪元素：⽤于将特殊的效果添加到某些选择器，如：:after :before，(添加新元素后加以标识)伪元素的效果需要通过添加⼀个实际的元素才能达到
权重与优先级
权重等级
內联样式 1000
ID选择器 0100
类选择器、属性选择器、伪类选择器 0010
元素选择器、伪元素选择器 0001
通配符选择器 0000
优先级计算
!important > 內联样式 > ⾼权重 > 低权重
!important > id > class > tag
同权重：內联样式 > 嵌⼊样式表 > 外部样式表
继承 inherit
继承均是沿着dom树向下继承，只有⼀个特殊情况，即body的背景内容会向上传播到html。
不可继承的属性(与盒模型、position�相关�的)：
margin，padding等
border，border-radius、box-shadow等
float，width，height等
可继承属性(与基本样式设计有关的)：
字体相关，字体颜⾊、字体⼤⼩等
⾏⾼
背景颜⾊等
4、居中
普通元素⽔平居中(已知宽)：
margin： 0 auto；
绝对定位absolute元素居中：
1、(已知宽⾼)借助 left/top 和 margin-left/margin-top
2、使⽤ top:50%, left:50%, transform: translate(-50%, -50%) translate百分⽐是相对于⾃⾝宽度⾼度
3、flex布局
4、display:table与display:table-cell
table-cell：让标签元素以表格单元格的形式呈现，类似于td标签
.toast-container {
position: fixed;
width: 100%;
height: 100%;
display: table;
}
.toast-box {
display: table-cell;
vertical-align: middle;
}
.box {
margin: auto;
width: 100px;
height: 100px;
background: #dd0000;
}
复制代码
5、position各个值的定位原点
absolute：绝对定位，相对第⼀个值不是static的元素定位
relative：相对定位，相对其正常位置定位
fiexd：固定定位，相对浏览器窗⼝
static：默认值，⽆定位
inherit：继承⽗级position值
复制代码
6、display值介绍
block：块类型，可设置宽⾼，换⾏展⽰css 属性选择器
inline：⾏内类型，不可设置宽⾼，同⾏展⽰
inline-block：默认宽度为元素宽度，可设置宽⾼，同⾏展⽰
none：像⾏内元素类型⼀样显⽰
table：块级表格
list-item：像块类型元素⼀样显⽰，并添加样式列表标记
inherit：继承⽗级
复制代码
7、动画的最⼩时间间隔最好是多少
多数显⽰器默认频率是60Hz，即1秒刷新60次，所以理论上最⼩间隔为1/60＊1000ms ＝ 16.7ms 复制代码
8、关于line-height
1)normal 默认值，跟随⽤户浏览器，与元素字体关联
2) 如line-height:1.5，假设⽂字⼤⼩20像素，实际⾏⾼为 20*1.5
3) 如line-height:15px;line-height:1.5em [px/pt/em/rem]
4)如line-height:150，假设⽂字⼤⼩20像素，实际⾏⾼为 20*150%
5)继承 inherit[IE8+]
注意：
line-height:1.5，⼦元素可以继承，根据⾃⼰的字体⼤⼩进⾏计算；
⽽line-height:150或者line-height:1.5rem，⼦元素继承，但是不会根据⾃⾝字体⼤⼩进⾏计算。
复制代码
9、元素被设置为float后，display属性的值会⾃动变成block。
10、:after和:before
之后添加⽤after；之前⽤before；
复制代码
11、BFC 块级格式化上下⽂［block formatting context］
1、BFC是什么
块级格式化上下⽂
样式上：与普通容器⽆异；
功能上：可以看作是隔离了的独⽴容器，容器⾥⾯的元素不会在布局上影响到外⾯的元素
2、触发BFC的条件(以下任意⼀个即可)
浮动元素，float 除none以外的值；
绝对定位元素，position(absolute，fixed)；
display为inline-blocks，table-cells，table-captions，table-caption(css3)；
overflow为hidden，auto，scroll；
3、BFC的特性
1)可包含浮动元素
内部有浮动元素，⽗容器设置overflow为hidden，auto，scroll即可清除浮动，只有ie7+⽀持
清除浮动[兼容IE6]：
{
.clearfix｛zoom：1；｝
.clearfix:after{content: ‘’ ; display:table; clear: both;}
}
只是局部可使⽤.clearfix｛_zoom：1；overflow: hidden;｝ 注意副作⽤
2)可阻⽌元素被浮动元素覆盖等
复制代码
12、浮动元素导致⾼度塌陷的解决⽅法
⽗级设置 overflow：hidden／scroll／auto
⽗级元素为 BFC
⽗级元素设置height
复制代码
13、外边距合并
即垂直⽅向上设置margin会合并，如果margin值不⼀样则选⾼度⼤的那⼀个。
复制代码
14、浏览器兼容性问题
1、各个浏览器的默认设置不同，可选择初始化CSS样式，重现设置；
2、background-position-x/background-position-x在版本稍低的firefox中不⽀持，可选择使⽤background-position

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。