目录
1 盒子模型
页面布局要学习三大核心，盒子模型、浮动和定位，学习好盒子模型能非常好的帮我们布局页面。
1.1 看透页面布局本质
页面布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子box。
- 利用css设置好盒子样式，然后摆到相应位置。
- 往盒子里面装内容。
网页布局的核心内容，就是利用CSS摆盒子。
1.2 盒子模型（box model）组成
所谓盒子模型：就是把HTML页面中的元素看作是一个矩形盒子，也就是一个盛放内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。
1.3 边框（border）
边框由三部分组成：粗细（px） 样式 颜色
1.3.1 width
语法：
border: border-width || border-style || border-color
1.3.2 border-style
语法：
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
参数：
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
说明：
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
1.3.3 边框简写
border：1px solid red;
/*无先后顺序*/边框分开写法：
border-top：1px solid red;
border-bottom：1px solid green;
border-left：1px solid yellow;
border-right：1px solid blue;
课堂要求：请给一个200*200的盒子，设置上边框为红色，其余边框为蓝色（提示：一定要注意边框的层叠性）
1.4 表格的细线边框
border-collapse（合并）属性控制浏览器绘制表格边框的方式，他控制相邻单元格的边框。
注：边框样式不能继承。
border-collapse:collapse
/*表示相邻边框合并*/
问题:非表格盒子border如何合并?
-为盒子添加右下/左上外边距
border: 1px solid #f4f4f4;
/*边框合并*/
margin:0 0 -1px -1px;
1.5 边框会影响盒子实际大小
因此两种解决方案：
1、测盒子大小时不带边框。
2、带边框测则设置样式时去掉边框大小。
3、(css3盒模型)
操作：给盒子设置属性 box-sizing : border-box ; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去
1.6 内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离。
div {
padding-top:20px;
}padding简写属性可以有一到四个值。
| 值的个数 | 表达意思 |
|---|---|
| padding：5px； | 上下左右 |
| padding：5px；10px； | 上下；左右 |
| padding：5px；10px；15px； | 上；左右；下 |
| padding：5px；10px；15px；20px； | 上；右；下；左（顺时针） |
注意：
①padding同样影响着盒子实际大小，也就是说，如果盒子已经有了高度和宽度，此时再指定内边距，会撑大盒子。
②如果盒子本身没有指定宽度，则此时padding不会撑开盒子大小。
案例：新浪导航栏
div {
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
height: 37px;
line-height: 37px;
background: #fcfcfc;
}
a {
display: inline-block;
padding: 0px 30px;
text-decoration: none;
color: #4c4c4c;
}
a:hover {
color: #ff8500;
background-color: gray;
}<body>
<div>
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">博客</a>
<a href="#">关注我</a>
</div>
</body>1.7 外边距（margin）
margin属性用于设置外边距，即控制盒子与盒子之间的距离。
margin简写意义与padding一致。
margin-left：10px；- 外边距可以让块级盒子水平居中，但必须满足两个条件。
- 盒子必须指定了宽度。
- 盒子左右外边距都设置为anto。
- 常见写法：
- margin-left:auto；margin-right:auto;
- margin:anto;
- margin:0 auto;
- 这一方法让块级元素水平居中，而行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。
div {
margin: auto;
width: 400px;
}
img {
width: 700px;
} <div>
<img src="碎冰蓝.jpg" alt="">
</div>1.8 外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况：
1.8.1 相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是二者之和。
取两值中较大者为边距的现象为相邻元素垂直外边距的合并。
1.8.2 嵌套块元素垂直外边距的塌陷
对于两个嵌套（父子）关系的块元素，父子元素同时有上外边距，此时父元素会塌陷较大的外边距值。（儿子把父拽下来了）
解决方案：
- 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2、可以为父元素添加overflow:hidden（推荐，不会撑大盒子）。
3. 转换成行内块元素
4. 浮动、固定，绝对定位的盒子不会有塌陷问题。
1.9 清除内外边距
/* 这句话也是css的第一行代码 */
/* *为通配符 */
* {
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
}注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
1.10 行内元素的margin和padding无效情况
➢ 场景：给行内元素设置margin和padding时
➢ 结果：
1. 水平方向的margin和padding布局中有效！
2. 垂直方向的margin和padding布局中无效！
2 ps基本操作
- 文件→打开：打开测量图片；
- Ctrl+R：打开标尺（或者视图中）；
- 右击标尺，单位改为像素；
- Ctrl+（+/-）可以放大/缩小视图;
- 按住空格键，鼠标可以变成小手，拖动ps视图；
- 用选区拖动，可以测量大小。
3 综合案例:
3.1 产品模块
案例问题总结：
1、布局为何不都用div？
标签都是有语义的，合理的地方用合理的标签，如产品标题就用h标签，大量文字段落就用p标签。
2、为什么用那么多类名？
类名就是给每个盒子起一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也更方便。
3、到底用margin还是padding？
多数情况二者可混用，各有优缺，根据实际需要判断（margin不易撑大盒子）。
3.2 案例模块
案例问题总结：
1、列表圆点怎么去除？
list-style:none；则是表示不使用项目符号的意思，但只能用于有序列表和无序列表。
2、如何实现多行同时编辑？
shift+alt：多行同时编辑.
4 圆角边框
border-radius属性用于设置元素的外边框圆角。
/* border-radius:length; */
border-radius:10px;
边框圆角的常见应用
➢ 画一个正圆：
1. 盒子必须是正方形
2. 设置边框圆角为盒子宽高的一半 → border-radius:50%
➢画一个椭圆:
1. 盒子要求是长方形
2. 设置 → border-radius：盒子高度的一半(%)
➢ 胶囊按钮：
1. 盒子要求是长方形
2. 设置 → border-radius：盒子高度的一半(px)
注意:
1、参数值可以为数值或百分比的形式。
百分比可以解决边长无法整除的缺陷。
2、简写时
- 写两个值，代表左上+右下和右上+左下（对角）。
- 写三个值，代表左上、右上+左下、右下。
- 写四个值，代表左上角、右上角、右下角、左下角（顺时针）。
3、还可以分开写：border-top-right-radius等。
注意：
length值越大曲度越大。
5 盒子阴影（重点）
box-shadow属性可以为盒子添加阴影。
box-shadow：h-shadow v-shadow blur spread color inset| 值 | 描述 |
|---|---|
| h-shadow | 必须。水平阴影的位置，允许负值 |
| v-shadow | 必须。垂直阴影的距离，允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色。参考css颜色值 |
| inset | 可选。将外部阴影（outset）改为内部阴影 |
6 文字阴影
text-shadow可将阴影运用于文字（属性值同盒子阴影）。
text-shadow：h-shadow v-shadow blur color；
扫一扫
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
