Web前端开发笔记20——盒子模型与阴影

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属性将阴影运用于文本中。