web第六天，CSS优先级与盒子模型
teresalxm 2020-02-18
一，CSS继承
文字相关的样式可以被继承
例 : color line-height font-style font-size font-weight
布局相关的样式不能被继承 （默认行为）
通过设置inherit值，可以改变默认的继承方式。
二，CSS优先级
相同样式优先级
当设置相同样式时，后写的优先级较高，但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，后引入的优先级高。
单一样式优先级
style行间> id> class> tag> *> 继承（inherit）
1000 100 10 1
！important 权重 > 10000（建议不要乱用，非规范写法）
场景 ： 紧急情况下使用。
标签+类的权重 > 单类
群组和单一样式？
群组选择器与单一选择器的权重相同，靠后写的优先级高。
层次选择器
权重 ：把对应的数值加起来
约分 ： 把相同的选择器约掉
建议 ： 层次选择器最好不要超过三层
三，CSS盒子模型
1，盒子 ：
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属性可以出现负值。
2，box-sizing？
box-sizing属性
content-box（默认值）： 整个盒子的宽 = content（width）+ padding + border
border-box ： 整个盒子的宽 = content（width-padding-border）+ padding +border
应用场景 ：
1，可以省略一些计算的环节。
2，可以针对100%的换算。
3，盒子模型的问题
1，margin叠加的问题
只会出现在上下margin中，左右是不存在margin叠加问题的。
特点 ： 会取叠加中较大的值。
解决方法：
1.BFC规范（以后介绍）
2.想办法只给一个元素添加间距
2，margin传递的问题
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递的问题的
特点 ： margin-top会导致父容器与子容器一起向下移动。
解决方法 ：
1.BFC规范（比较推荐）
2.给父容器加边框（不太推荐）
3.margin换成padding（将子容器的margin属性改为父容器的padding属性）
4，盒子的应用
1，margin ： 0 auto（实现容器的左右居中，上下不行）
上下居中方法 ： 1.position 2.transition 3.flex（以后学习）
文字居中方法 ： 左右居中（text-align ： center） 上下居中 （line-height ： height）
2，当一个盒子不写宽度的时候？
盒子的宽度默认与父容器的宽度相同，
并且当设置padding，border，margin的时候，盒子的content会从新计算。
三，PS的简单学习
1，对图像进行放大缩小 ： alt+鼠标滑轮
2，工具栏中的第二个 ：矩形选框工具（测量尺寸大小）
3，通过信息面板，可以查看到测量的尺寸大小（在窗口菜单可以找到，需要把单位改为像素）
四，overflow（溢出隐藏）
给盒子一个固定大小后，当盒子里的内容比较多的情况下，就可能产生溢出的现象。
溢出隐藏 ：
hidden ： 溢出部分隐藏
scroll ： 容器出现下拉页面
auto ： 自动化（未超出时为hidden，超出后变为scroll）
overflow-x ：hidden；
overflow-y ： scroll；（可以对容器的x，y分别设置溢出属性）
盒子嵌套实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* #box1{width: 350px ;height: 350px;border: 1px black dashed;padding: 30px;}
#box2{
border: 5px blue solid;
padding: 20px;
background: #f6f6f6;
}
#box3{
background: #ffa0df;
padding: 40px;
}
#box4{
border: 1px white dashed;
padding: 3px;
}
#box5{
border: 1px white dashed;
padding: 49px;
}
#box6{
border: 5px #fcff00 solid;
height: 100px;
background: #96ff38;
} */
#box1{
width: 400px;height: 400px;
border: 1px black dashed;
}
#box2{
border: 5px #d7effe solid;
margin: 30px;
background: #f6f6f6;
}
#box3{
background: #ffa0df;
margin: 20px;
border: 1px #ffa0df dashed;
}
#box4{
margin: 40px;
border: 1px white dashed;
}
#box5{
border: 1px white dashed;
margin: 3px;
}
#box6{
height: 100px;
margin:49px;
border: 5px #fcff00 solid;
background: #96ff38;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
<div id="box5">
<div id="box6">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>盒子嵌套实例
