一. 了解页面架构
二. 了解三种元素
1. 块元素
div,ul,li,dl,dt,dd,p,h1-h6,blockquote
特点:
- 总在新行上开始,占据一整行
- 默认情况下,其宽度自动填满其父元素宽度
- 宽度始终是与浏览器宽度一样,与内容无关
- 它可以容纳内联元素和其他块元素
- display属性为block
- 块级元素的垂直相邻外边距margin会合并。
2. 内联元素
a,b,span,img,input,strong,select,label,em,button,textarea
特点:
- 和其他元素都在一行上
- 高,行高及外边距和内边距部分可改变
- 宽度只与内容有关
- 行内元素只能容纳文本或者其他行内元素
- display属性为inline
- 水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果,但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
- 不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用。
3. 空元素
br,meta,hr,link,input,img
特点:
- 没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。
三. 了解 CSS 构成
CSS 文本属性