本文深入探讨CSS盒子模型，包括网页布局的本质、盒子模型的组成、边框、内边距、外边距以及它们对盒子大小的影响。通过具体案例分析了如何设置和使用边框、内边距和外边距，特别是外边距合并的现象及其解决方案。同时，介绍了CSS3中的圆角边框和盒子阴影，帮助提升网页设计的美观度。
1.盒子模型
1.1看透网页布局的本质
网页布局过程:
1.先准备好相关的网页元索,网页元索基本都是盒子Box.
2.利用CSS设置好盒子样式,然后摆放到相应位置。
3.往盒子里面装内容.
网页布局的核心本质:就是利用CSS摆盒子。
1.2盒子模型( Box Model )组成
所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子 ,也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容
1.3边框( border )
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)边框样式边框颜色
语法:
border : border- width | | border-style || border -color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框</title>
<style>
div {
width: 300px;
height: 200px;
/* border-width 边框的粗细，一般情况下都用px */
border-width: 5px;
/* border-style 边框的样式，solid实线边框，dashed虚线边框，dotted点线边框 */
border-style: solid;
/* border-style: dashed; */
/* border-style: dotted; */
/* border-color 边框的颜色 */
border-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS边框属性允许你指定一个元素边框的样式和颜色。
边框简写:
border: 1px solid red; 没有顺序
边框分开写法:
border-top: 1px solid red; /* 只设定上边框，其余同理*/
边框的层叠性遵循就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框的复合写法</title>
<style>
div {
width: 300px;
height: 200px;
/* border-width: 5px;
border-style: solid;
border-color: pink; */
border: 10px solid blue;
border-top: 10px solid red;
/* border-bottom: 10px dashed red; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.4表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法:
border- collapse :collapse;
●collapse 单词是合并的意思
●border-collapse: collapse;表示相邻边框合并在一起
1.5边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
1.测量盒子大小的时候，不量边框.
2.如果测量的时候包含了边框，则需要width/height减去边框宽度
1.6内边距( padding )
padding属性用于设置内边距,即边框与内容之间的距离。
padding属性(简写属性)可以有一到四个值。
当我们给盒子指定padding值之后，发生了2件事情:
- 内容和边框有了距离,添加了内边距。
- padding影响了盒子实际大小。
也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
解决方案:
如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可。
新浪导航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新浪导航栏</title>
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
/* a属于行内元素，此时必须要转换为行内块元素 */
text-decoration: none;
color: #4c4c4c;
font-size: 12px;
height: 40px;
display: inline-block;
padding: 0 20px;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">三个字</a>
</div>
</body>
</html>
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小
1.7外边距( margin )
margin属性用于设置外边距,即控制盒子和盒子之间的距离。
margin简写方式代表的意义跟padding完全一致。
外边距可以让块级盒子水平居中,但是必须满足两个条件:
①盒子必须指定 了宽度( width)。
②盒子左右的外边距都设置为auto。
. header{ width: 960px; margin:0 auto;}
常见的写法,以下三种都可以:
●margin-left: auto; margin- right auto;
●margin: auto;
●margin: 0 auto;
注意:以上方法是让块级元素水平居中,行内元素或者行内块元索水平居中给其父元素添加text-align:center即可。
1.8外边距合并
使用margin定义块元索的垂直外边距时,可能会出现外边距的合并。
1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top ,则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元索垂直外边距的合并。
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:
①可以为父元索定义上边框。
②可以为父元素定义上内边距。
③可以为父元素添加overflow:hidden。
还有其他方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题,后面咱们再总结。
1.9清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不-致。因此我们在布局前,首先要清除下网页元素的内外边距。
padding:0; /* 清除内边距*/
margin:0; /* 清除外边距*/
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 这句话也是我们CSS的第一行代码 */
*{
margin: 0;
padding: 0;
}
span {
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
123
<ul>
<li>abcd</li>
</ul>
<span>行内元素尽量只设置左右的内外边距</span>
</body>
</html>
2.案例
综合案例1：产品模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品模块</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
a {
color: #333;
text-decoration: none;
}
.box {
width: 298px;
height: 415px;
background-color: #fff;
/* 让块级盒子水平居中对齐 */
margin: 100px auto;
}
.box img {
width: 100%;
}
.review {
height: 70px;
font-size: 14px;
padding: 0 28px;
margin-top: 30px;
}
.appraise {
font-size: 12px;
color: #b0b0b0;
padding: 0 28px;
margin-top: 20px;
}
.info {
margin-top: 15px;
font-size: 14px;
padding: 0 28px;
}
.info h4 {
display: inline;
font-weight: 400;
}
.info span {
color: #ff6700;
}
.info em {
font-style: normal;
color: #ebe4e0;
margin: 0 7px 0 20px;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/img.png" alt="">
<p class="review">快递牛,整体不错蓝牙可以说秒连。红米给力</p>
<div class="appraise">来自于117979425的评价</div>
<div class="info">
<h4><a href="#">Redmin Airpods真无线蓝..</a></h4>
<em>|</em>
<span>99元</span>
</div>
</div>
</body>
</html>
总结
1.布局为啥用不同盒子我只想用div ?
标签都是有语义的,合理的地方用合理的标签。比如产品标题就用h,大量文字段落就用p
2.为啥用辣么多类名?
类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易,后期维护也方便。
3.到底用margin还是padding ?
大部分情况两个可以混用,两者各有优缺点,但是根据实际情况,总是有更简单的方法实现。
4.自己做没有思路?
布局有很多种实现方式,同学们可以开始先模仿老师的写法,然后再做出自己的风格。
最后一定多运用辅助工具比如屏幕画笔,ps等等
综合案例2：品优购快报
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品优购快报</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 248px;
height: 163px;
border: 1px solid #cccccc;
margin: 100px auto;
}
.box h3 {
height: 32px;
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 32px;
padding-left: 15px;
}
li {
list-style: none;
}
.box ul {
margin-top: 7px;
}
.box ul li a:hover {
text-decoration: underline;
}
.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
}
.box ul li {
height: 23px;
line-height: 23px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="box">
<h3>品优购快报</h3>
<ul>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】母亲节，健康好礼低至5折!</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】9.9元洗100张照片!</a></li>
<li><a href="#">【特惠】长虹智能空调立省1000</a></li>
</ul>
</div>
</body>
</html>
3.圆角边框（重点）
在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。
语法:
border- radius : length;
radius半径(圆的半径)原理: (椭)圆与边框的交集形成圆角效果
●参数值可以为数值或百分比的形式
●如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%
●如果是个矩形，设置为高度的一半就可以做
●该属性是一 个简写属性,可以跟四个值,分别代表左上角右上角、右下角、左下角
●分开写: border-top-lett-radius. border-top-right-radius. border-bottom-right-radius 和 border-bottom-left-radius
4.盒子阴影（重点）
CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影。
语法:
box- - shadow: h-shadow v- shadow blur spread color inset;
注意:
1.默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
2.盒子阴影不占用空间,不会影响其他盒子排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
