一、宽高
1.1.属性名
- width
- height
- min-width：宽度缩小到一定大小会出现横向的滚动条
- max-width
- min-height：高度缩小到一定大小会出现纵向的滚动条
- max-height
- over-flow: hidden(隐藏) | scroll(滚动条) | auto(自动)
二、字体
2.1.字体大小
- 浏览器默认的字体大小 16px
- px - pixel
- 浏览器设置字体大小，设置的是高度，宽度是自动缩放的
2.2.字体属性
-
font-size: 12px | 14px | 16px
-
font-weight: 100-900 | lighter | normal | bold | bolder
-
font-style: italic(斜体) | oblique(倾斜)
-
font-family(设置字体): 有空格的字体标识或中文字体标识必须加引号
-
color(字体颜色)
三、颜色
3.1.颜色书写规范
- 英文单词
- 十六进制：rgb(255, 255, 255)
四、边框
4.1.边框书写格式
- border: 1px solid #000;
- border-top
- border-right
- border-bottom
- border-left
- border-width
- 两个值：上下 左右
- 三个值：上 左右 下
- 四个值：上 右 下 左
- border-style
- border-color
五、文本
5.1.文本对齐
- text-align: left | center | right
- 必须在一个有宽高的容器内部才可以设置
- 行内块和行内元素文本对齐 - vertical-align: top|middle|bottom|像素
- 容器内多行文本居中的方法：
- 将容器的display设置成table
- 将容器内的文本display设置成table-cell(表格单元格属性)
- 将容器内文本的vertical-align设置成middle
5.2.文本行高
- line-height: 一行所占据的高度，默认为22px
- 当文本行高等于盒子高度时，文本就会居中
5.3.文本缩进
- text-indent: 10px | 2em;
5.4.文本修饰
- text-decoration: none | underline | line-through | overline;
5.5.单行文本截断和显示省略号三大件
- write-space: nowrap;(不换行)
- overflow-x: hidden;(x轴上的省略号，y轴上的是overflow-y)
- text-overflow: ellipsis;(隐藏部分加省略号)
5.6.display
- inline-block
- block
六、伪类
6.1.:hover
- 鼠标移入的样式改变
6.2.:disabled
- 禁用
6.3.:checked
- 被选中
6.4.:focus
- 聚焦
6.5.选择第几个的伪类
- :first-child
- :last-child
- :nth-child(n)
七、两个隐藏的区别
7.1.区别
- visibility: hidden;
- 保留被隐藏元素所占据的HTML文档空间
- display: none;
- 不保留被隐藏元素所占据的HTML文档空间
