一、继承-层叠-元素类型
1.1.CSS继承属性
1.2.1.继承
继承:如果我们设置了某一个CSS属性，而该属性具有继承性，那么该元素的所有子元素会默认继承该属性。
1.2.CSS属性层叠
1.2.1.一个CSS属性可以多次设置:
-
判断一：权重，优先级；
-
判断二：先后顺序；
1.2.2.常见的选择器:
-
！important -> 10000
-
内联 —> 1000
-
id —> 100
-
类/伪类/属性 —> 10
-
元素 —> 1
-
统配 —> 0
1.3.元素的类型
-
div —> 块级元素
-
span —> 行内级
-
有本质的区别 —> display：block
-
span —>块级
-
div —> 行内级
-
display:
- block 独占一行（父元素）
- 可以设州宽度和高度
- 默认高度是内容的高度
-
inline-block:
- 和其他行内级元素在同一行显示
- 可以设置宽度和高度
- 默认宽高内容决定
-
inline
-
和其他行内级元素在同一行显示
-
不能设置宽度和高度
-
宽高由内容级决定
-
1.4.元素的隐藏方法
display：none
visibility：hidden
rgba —> alph
opacity —>设置透明度
所有的子元素都会跟着一起设置
1.5.overflow
visible
hidden
scroll
auto
1.6.HTML嵌套的规范
块级/行内块级可以嵌套其他元素
p元素不能嵌套div元素
行内级元素不能嵌套块级元素
二、盒子模型
2.1.认识盒子模型
照片墙
HTML元素都是盒子
盒子模型的组成属性
content
padding
border
margin
2.2.content
width/height
width:auto
min-width/max-width
2.3.padding
内边距
四个方法
padding
4/3/2/1(值)
2.4.border
边框
width
style
color
div {
border：10px solid red;
}
2.5.border-radius
圆角：
具体的值，比如6px
百分比 —>border box
