目录
1.盒子模型
页面布局要学习三大核心,盒子模型,浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。
1.1 看透网页布局的本质
网页布局过程:
- 先准备好相关的元素,网页元素基本都是盒子 Box。
- 利用CSS设置好盒子的样式,然后摆放到相应的位置。
- 往盒子里装内容。
网页布局的核心本质:利用CSS摆盒子。
1.2盒子模型(Box Model)组成
所谓 盒子模型 :就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS盒子模型本质上就是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容。
border边框
content内容
padding内边距
margin外边距
1.3边框(border)
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)、边框样式、边框颜色
border : border-width || border-style || border-color
属性 | 作用 |
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
border-style: 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框
实线边框
虚线边框
点线边框
border-color: red;
使边框变为红色
边框的复合写法
边框简写:
border: 1px soild red; 没有顺序
边框分开写法:
border-top: 1px soild red; /* 只设定上边框,其余同理 */
1.4 表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法:
border-collapse:collapse;
border-collapse:collapse;表示响铃边框合并在一起。
1.5 边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
- 测量盒子大小的时候,不量边框。
- 如果测量的时候包含了边框,则需要 width/height 减去边框宽度
1.6 内边距(padding)
padding 属性用于设置内边距,即边框与内容之间的距离。
属性 | 作用 |
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
padding属性可以有1-4个值。
值的个数 | 表达意思 |
padding:5px; | 1个值,代表上下左右都有5像素的内边距; |
padding:5px 10px; | 两个值,代表上下内边距是5像素 左右内边距是10像素; |
padding:5px 10px 20px; | 3个值;代表上内边距5像素 左右内边距10像素 下内边距20像素; |
padding:5px 10px 20px 30px; | 4个值,上是5像素 右10像素 下20像素 左30像素(顺时针); |
当我们给盒子指定padding值之后,发生了两件事情:
- 内容和边框有了距离,添加了内边距。
- padding影响了盒子实际大小。
即如果盒子已经有了宽度和高度,此时在指定内边距,会撑大盒子。
解决方法:
让width/height 减去多出来的内边距大小。
制作新浪导航栏
通过给盒子padding值,使padding撑开盒子。
(1)使用HTML设置文本:
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
</div>
</body>
(2)给盒子div设置高度、背景颜色,边框以及居中对齐。
.nav {
height: 41px;
background-color: #fcfcfc;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
line-height: 41px;
}
(3)使a标签转化为行内块元素,设置高度、颜色、字体大小、内边距、鼠标经过时的颜色并且取消下划线。
.nav a {
display: inline-block;
height: 41px;
padding: 0 20px;
text-decoration: none;
color: #4c4c4c;
font-size: 12px;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
1.7 外边距(margin)
margin 属性用于设置外边距,即控制盒子和盒子间的距离。
属性 | 作用 |
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin 间歇方式代表的意义跟padding一致。
外边距可以让块级元素水平居中,但是必须满足两个条件:
- 盒子必须指定宽度(width)。
- 盒子左右的外边距都设置为auto。
margin: 0 auto;
注意:以上方法是让块级元素水平居中,行内元素或行内块元素水平居中给其父元素添加text-align:center即可。
1.8 外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距1,此时父元素会塌陷较大的外边距值。
解决方法:
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加overflow:hidden。
1.9 清楚内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清楚下网页元素的内外边距。
* {
padding: 0;
margin: 0;
}
这句话也是我们CSS的第一行代码