标签：需要 css盒子模型 char 鼠标 src play hidden 颜色 alt+
文字相关的样式可以被继承
例 : color line-height font-style font-size font-weight
布局相关的样式不能被继承 （默认行为）
通过设置inherit值，可以改变默认的继承方式。
相同样式优先级
当设置相同样式时，后写的优先级较高，但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，后引入的优先级高。
单一样式优先级
style行间> id> class> tag> *> 继承（inherit）
1000 100 10 1
！important 权重 > 10000（建议不要乱用，非规范写法）
场景 ： 紧急情况下使用。
标签+类的权重 > 单类
群组和单一样式？
群组选择器与单一选择器的权重相同，靠后写的优先级高。
层次选择器
权重 ：把对应的数值加起来
约分 ： 把相同的选择器约掉
建议 ： 层次选择器最好不要超过三层
content < padding < border < margin
内容 内填充 边框 外填充
padding ： 内填充（内边距）
写了一个值 ： 20px （上右下左）
写了两个值 ： 20px 30px （上下 左右）
写了三个值 ： 20px 30px 20px（上 左右 下）
写了四个值 ： 20px 20px 20px 20px(上 右 下 左)
margin ： 外填充 （外边距）
写了一个值 ： 20px （上右下左）
写了两个值 ： 20px 30px （上下 左右）
写了三个值 ： 20px 30px 20px（上 左右 下）
写了四个值 ： 20px 20px 20px 20px(上 右 下 左)
注 :1. 背景颜色会填充到margin以内的区域。
背景图 ： 默认背景图会平铺border padding content区域。
只有一张背景图时，从padding区域开始添加（默认行为）
2，文字只会在content区域
3，padding属性不可以出现负值，margin属性可以出现负值。
box-sizing属性
content-box（默认值）： 整个盒子的宽 = content（width）+ padding + border
border-box ： 整个盒子的宽 = content（width-padding-border）+ padding +border
应用场景 ：
1，可以省略一些计算的环节。
2，可以针对100%的换算。
1，margin叠加的问题
只会出现在上下margin中，左右是不存在margin叠加问题的。
特点 ： 会取叠加中较大的值。
解决方法：
1.BFC规范（以后介绍）
2.想办法只给一个元素添加间距
2，margin传递的问题
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递的问题的
特点 ： margin-top会导致父容器与子容器一起向下移动。
解决方法 ：
1.BFC规范（比较推荐）
2.给父容器加边框（不太推荐）
3.margin换成padding（将子容器的margin属性改为父容器的padding属性）
1，margin ： 0 auto（实现容器的左右居中，上下不行）
上下居中方法 ： 1.position 2.transition 3.flex（以后学习）
文字居中方法 ： 左右居中（text-align ： center） 上下居中 （line-height ： height）
2，当一个盒子不写宽度的时候？
盒子的宽度默认与父容器的宽度相同，
并且当设置padding，border，margin的时候，盒子的content会从新计算。
1，对图像进行放大缩小 ： alt+鼠标滑轮
2，工具栏中的第二个 ：矩形选框工具（测量尺寸大小）
3，通过信息面板，可以查看到测量的尺寸大小（在窗口菜单可以找到，需要把单位改为像素）
给盒子一个固定大小后，当盒子里的内容比较多的情况下，就可能产生溢出的现象。
溢出隐藏 ：
hidden ： 溢出部分隐藏
scroll ： 容器出现下拉页面
auto ： 自动化（未超出时为hidden，超出后变为scroll）
overflow-x ：hidden；
overflow-y ： scroll；（可以对容器的x，y分别设置溢出属性）
盒子嵌套实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 /* #box1{width: 350px ;height: 350px;border: 1px black dashed;padding: 30px;} 9 #box2{ 10 border: 5px blue solid; 11 padding: 20px; 12 background: #f6f6f6; 13 } 14 #box3{ 15 background: #ffa0df; 16 padding: 40px; 17 } 18 #box4{ 19 border: 1px white dashed; 20 padding: 3px; 21 } 22 #box5{ 23 border: 1px white dashed; 24 padding: 49px; 25 } 26 #box6{ 27 border: 5px #fcff00 solid; 28 height: 100px; 29 background: #96ff38; 30 } */ 31 #box1{ 32 width: 400px;height: 400px; 33 border: 1px black dashed; 34 } 35 #box2{ 36 border: 5px #d7effe solid; 37 margin: 30px; 38 background: #f6f6f6; 39 } 40 #box3{ 41 background: #ffa0df; 42 margin: 20px; 43 border: 1px #ffa0df dashed; 44 } 45 #box4{ 46 margin: 40px; 47 border: 1px white dashed; 48 } 49 #box5{ 50 border: 1px white dashed; 51 margin: 3px; 52 } 53 #box6{ 54 height: 100px; 55 margin:49px; 56 border: 5px #fcff00 solid; 57 background: #96ff38; 58 } 59 </style> 60 </head> 61 <body> 62 <div id="box1"> 63 <div id="box2"> 64 <div id="box3"> 65 <div id="box4"> 66 <div id="box5"> 67 <div id="box6"> 68 69 </div> 70 </div> 71 </div> 72 </div> 73 </div> 74 </div> 75 </body> 76 </html>
标签：需要 css盒子模型 char 鼠标 src play hidden 颜色 alt+
原文地址：https://www.cnblogs.com/lykpy/p/12318529.html
