盒模型
一、盒模型概念
- 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
- 狭义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
- 盒模型组成：margin + border + padding + content
注意点:content = width x height
二、盒模型成员介绍
1、content
- 通过设置width与height来规定content
- 块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
- 内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定
2、border
- border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
- border成员：border-left、border-right、border-top、border-bottom
- border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
- border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
- border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style
|
风格 |
解释 |
|
solid |
实线 |
|
dashed |
虚线 |
|
dotted |
点状线 |
|
double |
双实线 |
|
groove |
槽状线 |
|
ridge |
脊线 |
|
inset |
内嵌效果线 |
|
outset |
外凸效果线 |
border满足整体设置语法，eg：border: 1px solid red;
3、padding
- padding成员：padding-left、padding-right、padding-top、padding-bottom
- padding整体设置
|
值得个数 |
方位 |
|
1 |
上下左右 |
|
2 |
上下 | 左右 |
|
3 |
上 | 左右 | 下 |
|
4 |
上 | 右 | 下 | 左 |
4、margin
- margin成员：margin-left、margin-right、margin-top、margin-bottom
- margin整体设置
|
赋值个数 |
方位 |
|
1 |
上下左右 |
|
2 |
上下 | 左右 |
|
3 |
上 | 左右 | 下 |
|
4 |
上 | 右 | 下 | 左 |
三、边界圆角
border-radius
- border-radius成员
|
成员 |
解释 |
|
border-top-left-radius |
左上 方位 |
|
border-top-right-radius |
右上 方位 |
|
border-bottom-left-radius |
左下 方位 |
|
border-bottom-right-radius |
右下 方位 |
- 单方位设置
|
赋值个数(值类型：长度 | 百分比) |
解释 |
|
1 |
横纵 |
|
2 |
横 | 纵 |
- 按角整体设置
|
赋值个数(值类型：长度 | 百分比) |
解释 |
|
1 |
左上 右上 左下 右下 |
|
2 |
左上 右下 | 右上 左下 |
|
3 |
左上 | 右上 左下 | 右下 |
|
4 |
左上 | 右上 | 右下 | 左下 |
- 分向整体设置
|
格式 |
解释 |
|
1 / 1 |
横向 | 纵向 |
四、其他相关属性
- max|min-width|height
- overflow
|
值 |
描述 |
|
visible |
默认值。内容不会被修剪，会呈现在元素框之外。 |
|
hidden |
内容会被修剪，并且其余内容是不可见的。 |
|
scroll |
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
|
auto |
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
|
inherit |
规定应该从父元素继承 overflow 属性的值。 |
- display
|
值 |
描述 |
|
inline |
内联 |
|
block |
块级 |
|
inline-block |
内联块 |
伪类选择器
1、a标签四大伪类
- :link：未访问状态
- :hover：悬浮状态
- :active：活跃状态
- :visited：已访问状态
- :before：内容之前
- :after：内容之后
- :nth-child(n)：位置优先，再匹配类型
- :nth-of-type(n)：类型优先，再匹配位置
- :not(selector)：对selector进行取反
2、内容伪类
:before, :after {
content: "ctn";
}
3、索引伪类
值可以为位置数，也可以为2n、3n...，代表2的倍数，3的倍数，且位置数从1开始
4、取反伪类
not(selector)：对selector进行取反