一、块级元素和行内元素
块级元素特性
- 独占一行,默认高度是根据内容自适应;
- 可以设置
width
和height
(宽度和高度); - 其它元素可以通过
display: block;
转换为块级元素; - 常见块级元素有:
div
、p
、h1-h6
。
行内元素特性
- 默认高度和宽度是根据内容自适应,也就是在同一行排列;
- 不可以设置
width
和height
(宽度和高度); - 其它元素可以通过
display: inline;
转换为行内元素; - 常见行内元素有:
span
、a
、b
。
特殊元素
- 有些元素既拥有块级元素可以设置高度和宽度的特性,又拥有行内元素在一行排列的特征;
- 这些元素有:
input
、button
、img
。
二、css 选择器
- class 选择器;
- id 选择器;
- 标签选择器;
- 父子选择器:div > a,只给 div 的子级 a 标签设置样式;
- 后代选择器:div a,给 div下面所有 a 标签设置样式;
- 组合选择器:html, body,同时给 html 和 body 标签设置样式;
- 全局选择器:*,给整个 html 文件设置样式。
三、遇到的 css 属性总结
属性名 | 属性值 | 说明 |
---|---|---|
font-size | 16px | 设置字体大小 |
color | white | 设置字体颜色 |
background-color | yellow | 设置背景颜色 |
border | none | 取消边框 |
height | 100px | 给块级元素设置高度 |
width | 100px | 给块级元素设置宽度 |
text-align | center | 设置块级元素内文本排列方法(居中、居右对齐) |
margin | 1px | 外边框 |
padding | 1px | 设置内边距 |
box-sizing | border-box | 设置边框、内边框和内容的宽度和高度 |
line-height | 1px | 设置行高 |
position | absolute | 设置绝对定位 |