这是我参与[第五届青训营]伴学笔记创作活动的第二天

Day2 CSS

本堂课重点内容：

css选择器（面试常考）
CSS中可继承与不可继承属性
盒模型
文本常见显示与隐藏属性
行级元素和块级元素
常规流布局

css选择器

!important>ID选择器>类选择器，伪类选择器，属性选择器>标签选择器，伪元素选择器>相邻元素，子元素，后代选择器，通配符选择器
对于选择器的优先级

标签选择器、伪元素选择器 1
类选择器、伪类选择器、属性选择器 10
id选择器 100
内联样式 1000

CSS可继承不可继承属性

⼀、⽆继承性的属性

display：规定元素应该⽣成的框的类型
⽂本属性：

● vertical-align：垂直⽂本对⻬

● text-decoration：规定添加到⽂本的装饰

● text-shadow：⽂本阴影效果

● white-space：空⽩符的处理

● unicode-bidi：设置⽂本的⽅向
盒⼦模型的属性：width、height、margin、border、padding
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
⽣成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
⻚⾯样式属性：size、page-break-before、page-break-after
声⾳样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue

⼆、有继承性的属性

字体系列属性
⽂本系列属性
元素可⻅性
列表布局属性
光标属性

盒模型

CSS3中的盒模型有以下两种：标准盒⼦模型、IE盒⼦模型

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

标准盒模型的width和height属性的范围只包含了content，
IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

box-sizing: content-box 表示标准盒模型（默认值）

box-sizing: border-box 表示IE盒模型（怪异盒模型）

文本常见显示与隐藏属性

overflow：hideen 多余元素进行隐藏。
overflow：view 不管盒子大小全部显示。
overflow：scroll 盒子内显示滚动条显示多余的文本。

行级元素和块级元素

display的block、inline和inline-block的区别 1）block：会独占⼀⾏，多个元素会另起⼀⾏，可以设置width、height、margin和padding属性； 2）inline：元素不会独占⼀⾏，设置width、height属性⽆效。但可以设置⽔平⽅向的margin和padding属性，不能设置垂直⽅向的padding和margin； 3）inline-block：将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同⼀⾏内。对于⾏内元素和块级元素，其特点如下：

（1）⾏内元素

设置宽⾼⽆效；

可以设置⽔平⽅向的margin和padding属性，不能设置垂直⽅向的padding和margin；

不会⾃动换⾏；

（2）块级元素

可以设置宽⾼；

设置margin和padding都有效；

可以⾃动换⾏；

多个块状，默认排列从上到下。

常规流布局

参考这篇文章 blog.csdn.net/Run_youngma…

Day2 第五届青训营打卡