寒假提升｜ Day5 CSS 第三部分

务必下载！！

今日的代码和讲义以及思维导图：【点击此链接下载 Day05.zip】

大纲

2.1. CSS属性继承

CSS的某些属性具有继承性( Inherited ):
- 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
- 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
如何知道一个属性是否具有继承性呢?
- 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;
  - 一般和文本/字体相关的很多属性都具备继承;
- 这些不用刻意去记, 用的多自然就记住了;
- xmind、多查文档
另外要多学会查阅文档,文档中每个属性都有标明其继承性的

1 2	可以强制继承 - `item : inherit`

常见的继承属性有哪些呢?(不用记)

2.2. CSS属性层叠

一个CSS属性可以多次设置:

* 判断一: 权重, 优先级;
* 判断二: 先后顺序;

常见的选择器:

* !important -> 10000
* 内联 -> 1000
* id -> 100
* 类/伪类/属性 -> 10
* 元素 -> 1
* 统配 -> 0

CSS的翻译是层叠样式表,什么是层叠呢?
- 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
- 那么属性会被一层层覆盖上去;
- 但是最终只有一个会生效;
那么多个样式属性覆盖上去,哪一个会生效呢?
- 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
- 判断二: 先后顺序, 权重相同时, 后面设置的生效;
那么如何知道元素的权重呢?

选择器的权重

按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值(权重)
- !important:10000
- 内联样式:1000
- id选择器:100
- 类选择器、属性选择器、伪类:10
- 元素选择器、伪元素:1
- 通配符:0

2.3. 元素的类型

* div -> 块级元素
* span -> 行内级
* 有本质的区别 -> display: block
* span -> 块级
* div -> 行内级

display:

* block
  * 独占一行(父元素)
  * 可以设置宽度和高度
  * 默认高度是内容的高度
* inline-block
  * 和其他行内级元素在同一行显示
  * 可以设置宽度和高度
  * 默认宽高由内容决定
* inline
  * 和其他行内级元素在同一行显示
  * 不能设置宽度和高度
  * 宽高由内容决定

在前面我们会经常提到div是 块级元素 会独占一行**, **span 是 行内级元素会在同一行显示.
- 到底什么是块级元素, 什么是行内级元素呢?
HTML定义元素类型的思路:
- HTML元素有很多, 比如 h元素/p元素/div元素/span元素/img元素/a元素等等;
- 当我们把这个元素放到页面上时, 这个元素到底占据页面中一行多大的空间呢?
  - ✓ 为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的;
- 比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起;
- 比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起;
- 而类似于 img/span/a 元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行;
所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类:
块级元素( block-level elements ): 独占父元素的一行
行内级元素( inline-level elements ):多个行内级元素可以在父元素的同一行中显示

通过CSS修改元素类型

前面我们说过,事实上元素没有本质的区别:
- div是块级元素, span是行内级元素;
- div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已;

那么我们是否可以通过 display 来改变元素的特性呢?
- 当然可以!

2.4. 元素的隐藏方法

* display: none
* visibility: hidden
* rgba -> alpha
* opacity -> 设置透明度
  * 所有的子元素都会跟着一起设置

CSS中有个 display 属性，能修改元素的显示类型，有 4 个常用值
- block:让元素显示为块级元素
- inline:让元素显示为行内级元素
- inline-block:让元素同时具备行内级、块级元素的特征
- none:隐藏元素
事实上 display 还有其他的值, 比如 flex , 后续会专门学习;

display值的特性(非常重要)

block元素:
- 独占父元素的一行
- 可以随意设置宽高
- 高度默认由内容决定
inline-block元素:
- 跟其他行内级元素在同一行显示
- 可以随意设置宽高
- 可以这样理解
  - ✓ 对外来说，它是一个行内级元素
  - ✓ 对内来说，它是一个块级元素
inline:
- 跟其他行内级元素在同一行显示;
- 不可以随意设置宽高;
- 宽高都由内容决定;

行内替换元素（`inline-replaced`)(补充)

和其他的行内级元素在同一行显示
可以设置宽度和高度
img 是 行内替换元素 不是 行内块级元素

编写HTML时的注意事项

块级元素、inline-block元素
- 一般情况下，可以包含其他任何元素(比如块级元素、行内级元素、inline-block元素)
- 特殊情况，p元素不能包含其他块级元素
行内级元素(比如a、span、strong等)
- 一般情况下，只能包含行内级元素

元素隐藏方法

方法一: display 设置为 none
- 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
方法二: visibility设置为hidden
- 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
- 默认为visible, 元素是可见的;
方法三: rgba 设置颜色,将 a 的值设置为0
- rgba的 a 设置的是 alpha值, 可以设置透明度, 不影响子元素;
方法四: opacity 设置透明度,设置为 0
- 设置整个元素的透明度, 会影响所有的子元素;

CSS样式不生效技巧

为何有时候编写的 CSS 属性不好使，有可能是因为
- 选择器的优先级太低
- 选择器没选中对应的元素
CSS属性的使用形式不对
- ✓ 元素不支持此 CSS 属性，比如 span 默认是不支持 width 和 height 的
- ✓ 浏览器不支持此 CSS 属性，比如旧版本的浏览器不支持一些 css module3 的某些属性
- ✓ 被同类型的 CSS 属性覆盖，比如 font 覆盖 font-size
建议
- 充分利用浏览器的开发者工具进行调试(增加、修改样式)、查错

2.5. overflow

* visible
* hidden
* scroll
* auto

overflow: 用于控制内容溢出时的行为
visible:溢出的内容照样可见
hidden:溢出的内容直接裁剪
scroll:溢出的内容被裁剪，但可以通过滚动机制查看
- 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto:自动根据内容是否溢出来决定是否提供滚动机制

2.6. HTML嵌套的规范

1
2
3

* 块级/行内块级可以嵌套其他元素
* p元素不能嵌套div元素
* 行内级元素不能嵌套块级元素

三. 盒子模型

3.1. 认识盒子模型

* 照片墙
* HTML元素都是盒子
* 盒子模型组成属性:
  * content
  * padding
  * border
  * margin

3.2. content

1
2
3

* width/height
* width: auto
* min-width/max-width

设置内容是通过宽度和高度设置的:
- 宽度设置: width
- 高度设置: height
注意: 对于行内级非替换元素来说, 设置宽高是无效的!
另外我们还可以设置如下属性:
- min-width:最小宽度，无论内容多少，宽度都大于或等于min-width
- max-width:最大宽度，无论内容多少，宽度都小于或等于max-width
- 移动端适配时, 可以设置最大宽度和最小宽度;
下面两个属性不常用:
- min-height:最小高度，无论内容多少，高度都大于或等于min-height
- max-height:最大高度，无论内容多少，高度都小于或等于max-height

3.3. padding

内边距:
* 四个方法
* padding
  * 4/3/2/1

padding属性用于设置盒子的内边距 , 通常用于设置边框和内容之间的间距;
padding包括四个方向,所以有如下的取值:
- padding-top:上内边距
- padding-right:右内边距
- padding-bottom:下内边距
- padding-left:左内边距
padding 单独编写是一个缩写属性:
- padding-top、padding-right、padding-bottom、padding-left的简写属性
- padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
padding 并非必须是四个值,也可以有其他值;

3.4. border

边框

* width
* style
* color

```css
div {
  border: 10px solid red;
}
```

设置边框的方式

边框宽度
- border-top-width、border-right-width、border-bottom-width、border-left-width
- border-width 是上面4个属性的简写属性
边框颜色
- border-top-color、border-right-color、border-bottom-color、border-left-color
- border-color是上面4个属性的简写属性
边框样式
- border-top-style、border-right-style、border-bottom-style、border-left-style
- border-style是上面4个属性的简写属性

边框的样式设置值

边框的样式有很多,我们可以了解如下的几个:
groove:凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
ridge:山脊, 和 grove 相反，边框看上去好象是从画布中凸出来

同时设置的方式

如果我们相对 某一边 同时设置 宽度 样式 颜色,可以进行如下设置:
border-top
border-right
border-bottom
border-left
border : 统一设置 4 个方向的边框

3.5. border-radius

圆角:

* 具体的值, 比如6px
* 百分比 -> border box(了解)
  * 50%

border-radius 用于设置盒子的圆角
border-radius 常见的值 :
- 数值: 通常用来设置 小的圆角, 比如 6px;
- 百分比: 通常用来设置一定的弧度或者圆形;

border-radius补充

border-radius 事实上是一个缩写属性:
- 将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。
- 开发中比较少见一个个圆角设置;
如果一个元素是正方形, 设置 border-radius 大于或等于50% 时，就会变成一个 圆.