页面布局（layout）
1、box model
css将页面中的所有元素都设置为一个矩形盒子，布局就是将盒子摆在不同的位置。
- content （内容）：由weight和height控制内容区的大小。
- border （边框）：需要设置三个样式，border-width（有默认值）、border-color、border-style。
- padding（内边距）
- margin （外边距）
盒子大小是指content+border+padding
2、水平布局
元素在其父元素水平方向的位置由以下几个元素共同决定：
- margin-left ：默认为0，可以设置为auto
- border-left ：默认为0
- padding-left ：默认为0
- width ：可以设置为auto
- padding-right ：默认为0
- border-right ：默认为0
- margin-right ：默认为0，可以设置为auto
水平布局必须满足以下等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区宽度
当以上等式不成立时，会自动调整，使得等式成立。
调整情况：
- 以上值都没有auto情况时，会自动调整margin-right的值。
- 如果某个值设置为auto，则自动调整设置auto的值以使等式成立。
- 如果将三个值都设置为auto，则外边距都为0，width为最大值。
- 若外边距都设置为auto，则宽度为固定值，外边距设置为相同的值。
3、盒子尺寸
默认大小为内容区宽度、内边距、边框共同决定的。
box-sizing 用来设置计算盒子尺寸的方式
- content-box：默认值，宽度和高度用来设置内容区的大小。
- border-box：宽度和高度用来设置盒子可见框的大小，width、height指的是内容区+内边距+边框的总大小。
4、阴影与圆角
box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
- 第一个值，水平偏移量，设置阴影的水平位置，正值向右，负值向左
- 第二个值，垂直偏移量，设置阴影的垂直位置，正值向下，负值向上
- 第三个值，阴影的模糊半径
- 第四个值，阴影的颜色
box-radius 用来设置圆角
- 四个值 ：左上 右上 右下 左下
- 三个值 ：左上 右上/左下 右下
- 两个值 ：左上/右下 右上/左下
- 一个值 ：四个角
要设置一个圆时，border-radius：50%；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影的设置</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
/* 用来设置阴影 */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
/* 用来设置圆角 */
border-radius: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
5、浮动（float）
通过float可以设置元素的浮动，使得一个元素向其父元素的左侧或右侧浮动。
float默认为none，left或right。
浮动的特点：
- 浮动元素会完全脱高文档流，不再占据文档流中的位置
- 设置浮动以后元素会向父元素的左侧或右侧移动，
- 浮动元素默认不会从父元素中移出
- 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
- 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素不会超过上边浮动的兄弟元素
解决高度塌陷和外边距重叠：
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
