css:盒子模型

盒子模型

边框（border）

内边距（padding）

外边距（margin）

盒子模型，浮动，定位

把一只大象塞进冰箱里需要三步：打开冰箱门，把大象塞进去，关上冰箱门

给一个网页布局需要三步：准备好我们的网页相关元素（盒子），用css设计样式摆好位置，往盒子里塞东西

最麻烦的就是摆盒子步骤

盒子模型

盒子模型也就是box model，就是把html页面中的布局元素看作一个矩形的盒子，一个盛装内容的容器

css盒子模型就是封装周围的html元素，包括：边框（border）、外边距（margin）、内边距（padding）和实际内容（content）

内边距（padding）控制内容和边框的距离

外边距(margin)控制边框和边框的距离

边框（border）

边框可以设置的样式有：边框粗细（border-width），边框样式（border-width）,边框颜色（

border-color）还有边框的各个边

  div {width: 300px;height: 200px;border-width: 5px;border-style: solid;}

dashed是虚线边框：

dotted是点线：

border-style:

dotted- 定义点线边框

dashed - 定义虚线边框

solid - 定义实线边框

double - 定义双边框

groove - 定义 3D 坡口边框。效果取决于 border-color 值

ridge - 定义 3D 脊线边框。效果取决于 border-color 值

inset - 定义 3D inset 边框。效果取决于 border-color 值

outset - 定义 3D outset 边框。效果取决于 border-color 值

none - 定义无边框

hidden - 定义隐藏边框

这几个3d的都不怎么用，兼容性太差了

加上颜色：

div {width: 300px;height: 200px;border-width: 5px;border-style: double;border-color: mediumvioletred;}

边框的复合写法,没有顺序要求：

p{border:1px solid red;//没有顺序，一般都按边框粗细，样式，颜色的顺序
}

边框分上下左右，我们可以分开来声明他们

 div {width: 300px;height: 200px;border-top: 5px double cornflowerblue;border-bottom: 10px dotted crimson;border-left: 10px dotted crimson;border-right: 10px dotted crimson;}

但是这样写很麻烦

如果我们让四条边都是红点点，再拿蓝色双线覆盖，就可以达成一样的效果

  div {width: 300px;height: 200px;border: 10px dotted crimson;border-top: 5px double cornflowerblue;}

一定要把 border-top: 5px double cornflowerblue;这句写在下面，因为根据层叠性，离结构近的部分覆盖离结构远的部分

我们之前不会美化表格，现在我们学了css，可以用css的border对表格的边框进行样式修改：

    <style>table {width: 500px;height: 250px;border-collapse: collapse;}table,td {/* width: 500px;height: 250px; */border: 1px solid pink;}</style>

表格中的单元格都有自己的边框，如果两个边框离太近就会加粗边框，使用border-collapse：collapse就可以合并离得太近的单元格的边框

不合并的话长这样

加上th，给表头也配上相应的样式

 <style>table {width: 500px;height: 250px;border-collapse: collapse;}table,td,th {/* width: 500px;height: 250px; */border: 1px solid pink;}</style>

另外，我们在设定盒子大小的时候，如果加上边框，那么盒子就会看起来比你设置的大小大；在网页设计中，如果我们要测量网页的盒子大小，最好是测不带边框的部分，是真实的盒子大小（width和height），或者测出带边框的盒子长宽后减去边框的宽度

在声明样式的时候根据自己的需要+或者-盒子的大小（带边框或不带）

内边距（padding）

当内容和边框离太近的时候就需要设置内边距

  div {width: 300px;height: 200px;border: 10px dotted crimson;border-top: 5px double cornflowerblue;padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px;}

内边距的复合（简写）写法：

padding：5px；	四个边都是5px的内边距
padding：5px 10px；	上下5px，左右10px
padding:5px 10px 20px	上10px下20px左右10px
padding:5px 10px 20px 30px	上5px右10px下20px左30px，顺时针

这四种都要会写

padding本质上也会影响盒子的大小：

可以看到加了内边距是360*255

但是我们写的是300*200

360和255怎么来的？

360=300+border:10px*2+padding:20px*2

255=200+border:10px+border:5px+padding:20px*2

所以我们在测量别人的盒子大小和计算自己盒子大小的时候，也是用盒子的width和height减去内边距的大小就好了

    div {width: 240px;height: 145.46px;border: 10px dotted crimson;border-top: 5px double cornflowerblue;padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px;}

一个小demo:通过padding控制盒子的大小

<!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>.sb a {text-decoration: none;font-size: 12px;color: #4c4c4c;line-height: 41px;padding: 0 20px;}.sb {height: 41px;border-bottom: 1px solid #edeef0;border-top: 3px solid #ff8500;background-color: #fcfcfc;color: #4c4c4c;text-decoration: none;}.sb a:hover {height: 41px;display: inline-block;//转换为行内块元素color: chocolate;background-color: rgb(198, 202, 202);}</style>
</head>
<section></section><body><div class="sb"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a></div></body></html>

我们之前写的一个小demo是用缩进来调整距离的，现在我们可以用padding：

.css

a {background-color: rgb(150, 144, 187);color: black;width: 170px;height: 40px;display: block;/* text-indent: 2em; 现在我们用行内距调整*/padding-left: 30px;text-decoration: none;line-height: 40px;
}a:hover {color: rgb(255, 255, 255);background-color: khaki;
}

.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo3</title><link rel="stylesheet" href="demo3.css">
</head><body><a href="#">大学英语</a><a href="#">数理方程</a><a href="#">模拟电子技术</a><a href="#">概率论与数理统计</a><a href="#">嵌入式与微机原理</a><a href="#">大学物理</a>
</body></html>

padding也有不会撑开盒子的时候：

我们生成一个设置高度的盒子：

  h1 {background-color: darkgray;height: 300px;}

可以看到宽被铺满了，高为300px

此时我们加入padding不会改变宽，只会改变盒子的高

但是如果我们设置了宽，也就是给了宽一个初始值：

  h1 {background-color: darkgray;height: 300px;padding: 100px;width: 100%;}

可以看见我们的宽被撑开了，横向也有了水平滑动条

还有一种情况:

我们在盒子内部创建了一个盒子，在没有给定孩子盒初始宽和高属性的时候，这个孩子盒的大小是不能超过盒子爹的大小的：

padding了也不能超过盒子爹的宽

但是如果给了孩子盒初始值：

 h1 {background-color: darkgray;width: 100%;//给初始值padding: 30px;}.sss {width: 300px;height: 300px;background-color: darkturquoise;}

外边距（margin）

控制盒子和盒子之间的距离

        .x,.y {background-color: cornflowerblue;width: 300px;height: 200px;}.x {margin-bottom: 5px;//x的下边距，也就是y的上边距}

简写方式和padding一样：

margin：5px；	四个边都是5px的外边距
margin：5px 10px；	上下5px，左右10px
margin:5px 10px 20px	上10px下20px左右10px
margin:5px 10px 20px 30px	上5px右10px下20px左30px，顺时针

外边距的应用：让块级盒子水平居中

需要满足两个条件：盒子指定了宽度、盒子左右的外边距设置为auto

 .x,.y {background-color: cornflowerblue;width: 300px;height: 200px;margin: 0 auto;//margin:auto也行//margin-left：auto;margin-right:auto;也行}

让行内元素水平居中或行内块元素（图片或文字）水平居中的方法更简单啦！给他们的父元素添加：text-align:center就好了

 .x,.y {background-color: cornflowerblue;width: 300px;height: 200px;margin: 0 auto;text-align: center;}

父子盒子的外边距塌陷问题：

<!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>.x,.y {background-color: cornflowerblue;width: 300px;height: 200px;margin: 0 auto;text-align: center;}.x {margin-top: 200px;margin-bottom: 5px;}.x span {margin-top: 100px;background-color: aquamarine;}</style>
</head>
<section></section><body><div class="x"><span>你们好啊我是x的孩子盒</span></div><div class="y"></div>
</body></html>

可以看见我们给第一个盒子的span添加了上外边距，但是并没有改变和盒子爹的距离

这涉及到了嵌套块级元素垂直外边距的塌陷，父元素有上外边距、子元素也有上外边距，此时父元素会塌陷较大的外边距：

这是子的：

这是爹的：

如何修复这个问题：

1、为父元素定义上边框，边框会参与父元素的高度计算，可以让父元素更精确的计算和子元素的相对位置

2、为父元素定义上内边框，子元素就像父元素的content(内容)，修改内边距就是修改子盒子和父盒子的距离

3、为父元素添加overflow：hidden（常用）

清除内外边距

很多网页元素会自带默认的内外边距，不同的浏览器默认内外边距不一样，因此在布局前要清除网页自带的内外边距

 * {margin: 0;padding: 0;}

这也是我们css中的第一行代码

行内元素尽量只设置左右的内外边距（因为是行内元素，设置上下也不起作用啊）

小demo

把我们学到的东西来做一个小demo:

用到了分模块的思想，还有根据需求将行内元素转为行内块，认识父盒子的宽高和子盒子宽高的在有padding时候的继承，使用margin调整布局

.html:

<!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>* {margin: 0;padding: 0;}.box {margin: 100px auto;width: 300px;height: 450px;/* text-align: center; */background-color: #f5f5f5;}.box .review {font-size: 14px;color: rgb(39, 34, 34);padding: 0 20px;margin-top: 10px;}.box img {width: 100%;}.box .appraise {font-size: 10px;color: darkgray;margin: 20px 20px;}.box div h3 {display: inline-block;font-size: 20px;width: 200px;margin: 10px 0px 0px 20px;margin-top: 10px;font-weight: 400;}.box div h3 a {text-decoration: none;color: black;}.box div span {margin-top: 10px;color: #ff6700;margin-right: 20px;}.box div .dre {margin-top: 10px;color: darkgray;font-style: normal;/* margin: 0px 0px 0px 3px; */}</style>
</head><body><div class="box"><img src="微信图片_20241113155824.jpg" alt="菠萝吹雪"><p class="review">这是一只死到临头还在犯贱的菠萝吹雪,也可能是一个补不完deadline的励志轩,也是一个知道周末要考概率论的荷叶饭</p><p class="appraise">来自XUPT的评价</p><div><h3><a href="#">荷叶饭尸块秒杀价...</a></h3><em class="dre">|</em><span>9.9元</span></div></div>
</body></html>

还有一个demo,快报模板:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>* {margin: 0px;padding: 0px;}.box {width: 400px;height: 182px;border: 1px solid #ccc;margin: 100px auto;}.box h3 {height: 32px;border-bottom: 1px dotted #ccc;font-size: 20px;font-weight: 400;line-height: 32px;color: #6e6e6e;padding: 0 15px;}li {list-style: none;/* 去掉li前面的小圆点 */}.box ul li {height: 25x;line-height: 25px;}.box ul li a {text-decoration: none;color: #6e6e6e;margin-left: 15px;}.box ul li a:hover {text-decoration: underline;}.box ul {margin-top: 11px;}</style>
</head><body><div class="box"><h3>喜欢十日终焉的小朋友们你们好啊</h3><ul><li><a href="#">【灵闻】我听见了招灾的回响</a></li><li><a href="#">【灵嗅】我嗅到了治愈的清香</a></li><li><a href="#">【灵视】我看见了生生不息的激荡</a></li><li><a href="#">【灵嗅】我嗅到了替罪的清香</a></li><li><a href="#">【灵闻】我听见了破万法的回响</a></li></ul></div>
</body></html>