三、CSS属性的继承和层叠及display，overflow属性的学习，盒子模型及阴影属性的补充
# 1、CSS的属性的继承
# 1.1.CSS的某些属性具有继承性(Inherited):
如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
# 1.2.如何知道一个属性是否具有继承性呢?
常见的font-size/font-family/font-weight/line-height/color/text-align/cursor等都具有继承性;
这些不用刻意去记, 用的多自然就记住了; 忘记了可以直接官网去查：以background-color为例：概览里面有一个是否是继承属性：否 (opens new window)
注意(了解):继承过来的是计算值, 而不是设置值
# 2、CSS属性的层叠及选择器的权重
# 2.1.CSS属性的层叠
CSS的翻译是层叠样式表, 什么是层叠呢?
- 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
- 那么属性会被一层层覆盖上去;
- 但是最终只有一个会生效;
那么多个样式属性覆盖上去, 哪一个会生效呢?
- 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
- 判断二: 先后顺序, 权重相同时, 后面设置的生效;
# 2.2.选择器的权重
- 按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）
- !important：10000
- 内联样式：1000
- id选择器：100
- 类选择器，属性选择器，伪类：10
- 元素选择器，伪元素：1
- 通配选择器*：0
- 选择器权重的累加(补充)：例子如下
- h1：优先级为1
- h1 + p::first-letter：优先级为3
- li > a[href="en-US"] > .warning：优先级为22
# 3、display属性的学习及编写HTML注意事项
# 3.1.HTML元素的类型
块级元素（block-level elements）: 独占父元素的一行（浏览器默认给它们加上了display:block;属性）
- 块级元素如：div，p，h1~h6等
行内级元素（inline-level elements）:多个行内级元素可以在父元素的同一行中显示（浏览器默认没有加任何属性，相当为display:inline;）
- 行内可替换元素：img，input，audio等
- 行内非替换元素：span，a，i，strong等
结论：我们可以通过display来改变元素的特性（类型）；
如将span的css属性display改成：display:block;这样span就变成了一个块级元素
# 3.2.CSS属性 - display的学习
block元素:
- 独占父元素的一行
- 可以随意设置宽高；设置后依然独占一行，剩余会分给margin
- 高度默认由内容决定
inline-block元素:
- 跟其他行内级元素在同一行显示
- 可以随意设置宽高；
- 可以这样理解
- 对外来说，它是一个行内级元素
- 对内来说，它是一个块级元素
inline元素:
- 跟其他行内级元素在同一行显示;
- 不可以随意设置宽高;
- 宽高都由内容决定;
# 3.3.编写HTML时的注意事项
块级元素、inline-block元素
一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素）
特殊情况，p元素不能包含其他块级元素;
如：p元素包含div元素 浏览器解析HTML结构时，解析会有问题；
行内级元素（比如a、span、strong等）
- 一般情况下，只能包含行内级元素
# 4、元素隐藏方法及学习overflow属性
# 4.1.元素隐藏方法
方法一: display设置为none**(元素不显示出来,元素不占据任何位置空间)**
- 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
方法二: visibility设置为hidden**(元素不可见,元素占据应该占据的空间)**
- 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
- 默认为visible, 元素是可见的;
方法三: rgba设置颜色, 将a的值设置为0 (元素不可见,只是设置透明度:元素占据应该占据的空间)
- rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
方法四: opacity设置透明度, 设置为0 (元素不可见,只是设置透明度:元素占据应该占据的空间)
- 设置整个元素的透明度, 会影响所有的子元素;
# 4.2.CSS属性 - overflow
- overflow用于控制内容溢出时的行为
- visible(默认值)：溢出的内容照样可见
- hidden：溢出的内容直接裁剪
- scroll：溢出的内容被裁剪，但可以通过滚动机制查看
- 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
- auto：自动根据内容是否溢出来决定是否提供滚动机制
# 4.3.开发中的CSS样式不生效技巧
为何有时候编写的CSS属性不好使，有可能是因为
- 选择器的优先级太低
- 选择器没选中对应的元素
- CSS属性的使用形式不对
- 元素不支持此CSS属性，比如span默认是不支持width和height的
- 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
- 被同类型的CSS属性覆盖，比如font覆盖font-size
建议：充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错
# 5、CSS盒子模型
# 5.1.盒子模型
HTML中的每一个元素都可以看做是一个盒子，如下图所示，可以具备这4个属性
内容（content）
- 元素的内容width/height
内边距（padding）
- 元素和内容之间的间距
边框（border）
- 元素自己的边框
外边距（margin）
- 元素和其他元素之间的间距
因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边:
# 5.2.内容 – 宽度和高度
设置内容是通过宽度和高度设置的:
- 宽度设置: width
- 高度设置: height
注意: 对于行内级非替换元素来说, 设置宽高是无效的!
另外我们还可以设置如下属性:
- min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
- max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
- 移动端适配时, 可以设置最大宽度和最小宽度;
下面两个属性不常用:
- min-height：最小高度，无论内容多少，高度都大于或等于min-height
- max-height：最大高度，无论内容多少，高度都小于或等于max-height
# 5.3.内边距 - padding
padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;
padding包括四个方向, 所以有如下的取值:
- padding-top：上内边距
- padding-right：右内边距
- padding-bottom：下内边距
- padding-left：左内边距
padding单独编写是一个缩写属性：
- padding-top、padding-right、padding-bottom、padding-left的简写属性
- padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
padding并非必须是四个值, 也可以有其他值（1~4个值）;
- 4个值：上 右 下 左；如:padding:10px 20px 30px 40px ;
- 3个值：上 右左 下；如:padding:10px 20px 30px ;
- 2个值：上下 右左；如:padding:10px 20px;
- 1个值：上下右左都用1个值；如:padding:10px;
# 5.4.圆角 – border-radius
border这里咱们就不说啦，可以看该网址学习：border的学习 (opens new window)
border-radius用于设置盒子的圆角
border-radius常见的值:
- 数值: 通常用来设置小的圆角, 比如6px;
- 百分比: 通常用来设置一定的弧度或者圆形;
border-radius事实上是一个缩写属性:
- 将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。
- 开发中比较少见一个个圆角设置;
如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆.
# 5.5.外边距 - margin
margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;
margin包括四个方向, 所以有如下的取值:
- margin-top：上内边距
- margin-right：右内边距
- margin-bottom：下内边距
- margin-left：左内边距
margin单独编写是一个缩写属性：
- margin-top、margin-right、margin-bottom、margin-left的简写属性
- margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
margin也并非必须是四个值, 也可以有其他值（1~4个值）;(跟上面5.3讲的padding一样)
# 5.6.上下margin的传递（块级元素之间才会有传递）
margin-top传递
- 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递
- 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
如何防止出现传递问题？
- 给父元素设置padding-top\padding-bottom
- 给父元素设置border
- 触发BFC: 给父元素设置overflow为auto
建议
- margin一般是用来设置兄弟元素之间的间距
- padding一般是用来设置父子元素之间的间距
# 5.7.上下margin的折叠（块级元素之间才会有折叠）
两个块级元素垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）
水平方向上的margin（margin-left、margin-right）永远不会collapse
折叠后最终值的计算规则
- 两个值进行比较，取较大的值
如何防止margin collapse？
- 只设置其中一个元素的margin
上下margin折叠的情况
- 两个兄弟块级元素之间上下margin的折叠
- 父子块级元素之间margin的折叠
# 5.8.外轮廓 - outline
outline表示元素的外轮廓
- 不占用空间
- 默认显示在border的外面
outline相关属性有
- outline-width: 外轮廓的宽度
- outline-style：取值跟border的样式一样，比如solid、dotted等
- outline-color: 外轮廓的颜色
- outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似
应用实例
- 去除a元素、input元素的focus轮廓效果：设置outline:none;即可
# 6、盒子阴影box-shadow和文字阴影text-shadow和box-sizing
# 6.1.盒子阴影 – box-shadow
box-shadow属性可以设置一个或者多个阴影
- 每个阴影用< shadow >表示
- 多个阴影之间用逗号,隔开，从前到后叠加
< shadow >的常见格式如下
语法：none | <shadow># //值为none或者为<shadow> <shadow> = inset? && <length>{2,4} && <color>? //例如：box-shadow:1px 2px 3px 4px rgba(0,0,0,.6) inset //inset跟color可设置可不设置；且可以跟 <length>{2,4}随便排列；但是必须设置2~4个<length>1
2
3
4
5- 第1个< length >：offset-x, 水平方向的偏移，正数往右偏移
- 第2个< length >：offset-y, 垂直方向的偏移，正数往下偏移
- 第3个< length >：blur-radius, 模糊半径
- 第4个< length >：spread-radius, 延伸半径
- < color >：阴影的颜色，如果没有设置，就跟随color属性的颜色
- inset：外框阴影变成内框阴影
- 我们可以通过一个网站测试盒子的阴影: 在线测试阴影并提取 (opens new window)
# 6.2.文字阴影 - text-shadow
text-shadow用法类似于box-shadow，用于给文字添加阴影效果
< shadow >的常见格式如下
none | <shadow-t>#where <shadow-t> = [ <length>{2,3} && <color>? ]1
2- 相当于box-shadow, 它没有spread-radius的值（及第四个值：延伸半径）; 也没有inset外框阴影变成内框阴影这个值
- 我们可以通过一个网站测试文字的阴影: 在线测试阴影并提取 (opens new window)
# 6.3.行内非替换元素的注意事项
a,span,i,strong等元素为行内级非替换元素
以下属性对行内级非替换元素不起作用
- width、height、margin-top、margin-bottom
以下属性对行内级非替换元素的效果比较特殊
- padding-top、padding-bottom、border-top，border-bottom（给行内级非替换元素设置这些属性，也不起作用； 但是呢当你给 行内级非替换元素设置了背景颜色时，他们会显示颜色，但是不会占据空间）
margin-left，margin-right，padding-left，padding-right，border-left，border-right这些属性对行内级非替换元素起作用
# 6.4.CSS属性 - box-sizing
- box-sizing用来设置盒子模型中宽高的行为
- content-box（默认值）：padding、border都布置在width、height外边
- border-box： padding、border都布置在width、height里边（在一定的设置值内:具体看盒子的大小； 设置padding跟border不会影响盒子整理的大小）
- 注意：W3C标准盒子模型默认不会跟盒子设置box-sizing:border-box;而IE盒子模型（IE8以下浏览器）会默认给盒子都设置box-sizing:border-box;
# 6.5.元素的水平居中方案
在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）
行内级元素(包括inline-block元素)
- 水平居中：在父元素中设置text-align: center;
块级元素
- 水平居中：给自己设置margin: 0 auto;
