1.网页布局过程:
- 先准备好网页元素,网页元素基本都是盒子box。
- 利用ccss设置好盒子样式,然后摆放到相应位置。
- 往盒子里面装内容。
2.盒子的组成部分:
3.表格的细线边框:border-collapse属性控制浏览器绘制表格边框的方式。控制相邻单元格的边框。
语法:border-collapse:collapse;
- collapse是合并的意思。
边框会影响盒子的大小。
4.padding的复合写法:
内边距会影响盒子大小。
为了保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小。(上面边框线的算法同理)
5.如果盒子本身没有指定width、height属性,则padding不会撑开盒子大小。
6.margin外边距标签:
margin和padding复合写法是一样的。
7.margin的典型用法:
8.外边距合并问题:
- 相邻块元素垂直外边距的合并
- 嵌套块元素垂直外边距的塌陷
解决方式:只设置一个边的边距。
9.清楚内外边距:网页元素很多都带有默认的内外边距。
注意点:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换为块级或行内块级元素就可以了。
10.list-style:none;用于去掉li前面的项目符号(小圆点)。
11.border-radius:length;radius实际上就是一个半径,length就是圆的半径。
同时,也可以使用%来表示半径,其代表是宽度和高度的一半。
圆角矩形设置为高度的一般即可。
12.盒子阴影:
注:
- 默认为外阴影,但是不可以写这个单词,否则阴影无效。
- 盒子阴影不占用空间,不会影响其他盒子排序。
13.盒子阴影:text-shadow属性将阴影运用于文本中。