1. 看透网页布局的本质
首先利用CSS设置好盒子的大小,然后摆放盒子的位置,最后把网页元素比如文字图片等等,放入盒子里面。
2. 盒子模型(Box Model)
- 盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。
- 盒子里面的文字和图片等元素是 内容区域
- 盒子的厚度 我们成为 盒子的边框
- 盒子内容与边框的距离是内边距(类似单元格的 cellpadding)
- 盒子与盒子之间的距离是外边距(类似单元格的 cellspacing)
3. 盒子边框(border)
border : border-width || border-style || border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 none:无边框(默认值) solid:实线 dashed:虚线 dotted:点线 |
border-color | 边框颜色 |
3.1 边框的综合设置
border : border-width || border-style || border-color
3.2 盒子边框写法总结表
- 上:
border-top(-width/-style/-color)
- 下:
border-bottom(-width/-style/-color)
- 左:
border-left(-width/-style/-color)
- 右:
border-right(-width/-style/-color)
3.3 表格边框线的合并
table{
border-collapse:collapse;
}
相邻边框合并在一起,否则会变粗。
4.内边距(padding)
4.1 内边距
边框与内容之间的距离
4.2 设置
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
简写:
值的个数 | 表达意思 |
---|---|
1个值 | 上下左右 |
2个值 | 上下,左右 |
3个值 | 上,左右,下 |
4个值 | 上,右,下,左 |
4.3 内盒尺寸计算(元素实际大小)
-
宽度
Element Height = content height + padding + border (Height为内容高度)
-
高度
Element Width = content width + padding + border (Width为内容宽度)
-
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
4.4 内边距产生的问题
问题:padding会撑大原来的盒子
解决办法:改变width、height使盒子大小不变
4.5 padding不影响盒子大小的情况
如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。
5. 外边距(margin)
5.1 外边距
盒子和盒子之间的距离
5.2 设置
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
5.3 块级盒子居中
左右的外边距都设置为auto
5.4 文字居中和盒子居中的区别
- 盒子内的文字水平居中是
text-align: center;
, 而且还可以让 行内元素和行内块居中对齐 - 块级盒子水平居中
margin:0 auto;
5.5 插入图片和背景图片的区别
- 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
- 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
5.6 清除元素的默认内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
一般作为初始化
- 行内元素为了照顾兼容性, 尽量只设置左右内外边距, 不要设置上下内外边距。
5.7外边距合并
(1)相邻块元素垂直外边距的合并
取两者中的较大者
解决办法:尽量给只给一个盒子添加margin值。
(2) 嵌套块元素垂直外边距的合并(塌陷)
取两者中的较大者
解决方案:
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden。
6. 盒子模型布局稳定性
稳定性: width > padding > margin
@拓展
去掉列表默认样式
li {
list-style: none;
}
圆角边框(CSS3)
border-radius:length;
50%(高度的一半)为圆
盒子阴影(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
值 | 说明 |
---|---|
h-shadow | 必需的。水平阴影的位置,允许负值 |
v-shadow | 必需的。垂直阴影的位置,允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色。在css延伸至寻找颜色值的完整列表 |
inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |