前端学习（十三）：CSS盒子模型

蜂鸟样的人生 發表於 2019-9-19 00:00:00

<center><h3>进击のpython</h3></center>
*****
<h1 id="前端学习css盒子模型">前端学习——CSS盒子模型</h1>
<hr>
在前面的时候也说过，包括分析网页结构的时候，提到了，网页就其实就是一个一个盒子叠起来的
那现在就是有装饰的盒子，难度就变得深刻
所以说为了能够让你更好地理解，在说盒子模型之前，我要先向你介绍一下标签
对！就是html里面的那些标签
<hr>
<h2 id="标签分类">标签分类</h2>
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(也叫行内元素)和内联块元素
html标签甚至有好几百个，我们之前学习大约有30个标签，你所看到的很多大型网站我们都能通过这些标签来搭建我们网站结构
那么这么多标签，显然是比较没有规律的，那么我们就来对这些常用的标签进行分类，了解了每类标签的特点之后，我们才能更好的对网站进行布局
<h3 id="块状元素">块状元素</h3>
<code><div>、、<h1>~<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<table>、<form></code>
<h3 id="内联元素">内联元素</h3>
<code><a>、、、、、<label></code>
<h3 id="内联块元素">内联块元素</h3>
<code><input>、<img></code>
那么把网页中常用的标签进行分类之后，那么这三类标签分别有什么特点呢？
<table>
<thead>
<tr>
<th>标签类别</th>
<th>特点</th>
</tr>
</thead>
<tbody>
<tr>
<td>块状元素</td>
<td>1.独自占据整一行 2.可以设置宽高</td>
</tr>
<tr>
<td>内联元素</td>
<td>1.所有的内联元素在一行内显示 2.不可以设置宽高</td>
</tr>
<tr>
<td>行内块元素</td>
<td>1.在一行内显示 2.可以设置宽高</td>
</tr>
</tbody>
</table>
注意：标签分类的特点是对现有的HTML常用标签进行分类，那么这些特点在后面的学习过程中我们还可以通过display属性进行强制修改规则。
可能你现在还没办法理解这三种都能干什么，这就涉及到了接下来的盒子模型了
<hr>
<h2 id="盒子模型">盒子模型</h2>
所谓盒子模型，在CSS中，”CSS model“这一术语是用来设计和布局时使用
那么所有的HTML元素可以看作盒子！CSS的盒模型本质上是一个盒子，来表示周围的HTML元素
它包括：边距、边框、填充和实际内容
放慢速度，慢慢看，注意理解！很！重！要！
中秋节要到了，这里有个月饼礼盒但是先别吃我们先分析一下
<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912121246226-1468741408.png" alt="" loading="lazy">
那么如果我们把这里礼盒看作网页中的一个元素，比如div
我们会观察如下特点：
<ol>
<li>五仁就可以看作这个div的内容，这个内容可以看作是文本、图片或者是另一个标签元素，它应该有宽度和高度</li>
<li>把月饼盒到月饼之间距离称为盒子模型的内填充，在样式表中叫做padding</li>
<li>再继续看下图</li>
</ol>
<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912121851131-770380186.png" alt="" loading="lazy">
一个盒子到另一个盒子的距离我们称为盒子模型的外边距，在样式表中叫做margin
4.再继续看
<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912122023728-1687687931.png" alt="" loading="lazy">
红色区域将盒子包括起来的，我们在盒子模型中称为边框，在样式表中叫border
那么在CSS中盒模型又是怎样的呢？
<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912122122047-787196194.jpg" alt="" loading="lazy">
<hr>
<h2 id="盒子属性">盒子属性</h2>
那么我们知道在盒子模型中有四个属性：内容的宽高、内边距、外边距、边框。
<h3 id="内容的宽高">内容的宽高</h3>
需要注意的是，盒模型的宽度和高度和我们平常所说的物体的宽度和高度是不一样的
CSS定义的宽(width)和高(height),指的是盒子内部物体所占据的宽高，在CSS中指的是填充以里的内容范围
举例说明：我想有一个400px*400px范围的div盒子，背景颜色是红色的
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容的宽高</title>
<style type="text/css">
 .box{
 width: 200px;
 height: 200px;
 background-color: red;
 }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
</code></pre>
<div style="width: 400px; height: 400px; background-color: rgba(255, 0, 0, 1)"></div>
那么如何能查看该盒模型的大小呢？很简单，在页面上右击审查元素，或者快捷键F12,打开控制台,查看效果：
<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912123717388-1578450226.gif" alt="" loading="lazy">
看，最后的时候显示了400*400的尺寸，以及颜色#ff0000
<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912123934701-316874841.png" alt="" loading="lazy">
而你往下翻，就会发现一个很熟悉的东西：<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912124145233-2064939157.png" alt="" loading="lazy">
可爱的盒子模型
<h3 id="内边距">内边距</h3>
内边距表示的是盒子的边框到内容之间的距离，也就是草绿色的部分
<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912124840261-1690436356.gif" alt="" loading="lazy">
我们可以直接在审查元素上面进行修改，可以看到左侧代码又有了变化
而当我添加了padding属性为20px的时候，很明显红色方块抖动了一下（变大了）
也就是说设置了padding之后，padding的区域是有背景颜色的，并且背景颜色和内容的颜色一样
而当我划过盒子模型中的padding属性的时候，变色的部分就是padding
<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912125134031-978307903.png" alt="" loading="lazy">
可以看出来，padding = 20px 是在上下左右都加了20像素
那我想让特定的位置多，怎么办呢？比如只想让上面多20px
padding的设置
padding有四个方向，分别描述四个方向的padding
<pre><code>/*上右下左四个方向*/
padding: 20px 30px 40px 50px ;
/*上左右下*/
padding: 20px 30px 40px;
/* 上下左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;
</code></pre>
<h3 id="边框">边框</h3>
盒子模型的边框，在样式表中称为border，我们知道呢，我们用的手机，都会有手机壳
手机壳的样式、颜色、薄厚程度等都是这个壳的形态，同样呢，盒模型的边框也有三要素：粗细线性样式颜色
按照border三要素写：
<pre><code>border-width:3px;
border-style:solid;
border-color:red;
/*上面三句代码相当于一句代码：border:3px solid red;*/

/*同样,也可以分别设置边框四个方向的粗细线性样式颜色,跟padding的四个方向一样。*/

/*上下5px左右10px*/
border-width:5px 10px;

/*上：实现右：点状下：双线左：虚线*/
border-style: solid dotted double dashed;

/*上：红色左右：绿色下：黄色*/
border-color: red green yellow;
</code></pre>
<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912141341770-86322529.gif" alt="" loading="lazy">
能够很明显的看到效果吧~
清除默认边框
清除某些标签默认的边框，我们使用<code>border:none;或者border:0;</code>
比如，input输入框它有默认的边框，如果我们想制作好看的输入框的话，首先先得把默认的清除掉
然后我们再按照需求来更改，并且我们会发现焦点选中输入框的时候有一条蓝色的外线
那么我们也需要将它清除 ,使用属性<code>outline:none;</code>
<h3 id="外边距">外边距</h3>
在盒子模型中称为外边距，样式表中叫margin
表示盒子到另一个盒子的距离。既然是两者之间的距离，那么就会产生水平之间的距离和垂直之间的距离
同样情况下，外边距也有四个方向，跟padding类似
水平方向：margin-left & margin-right
<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912142716108-320715612.gif" alt="" loading="lazy">
可以看到，当我改变margin的时候，两个盒子的距离就有变化了
垂直方向：
盒子模型的外边距水平方向上不会出现问题，在垂直方向上会出现“外边距合并”的现象
<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912143735810-1112688438.png" alt="" loading="lazy">
现在有两个盒子，其中给红盒子的下外边距设置成30px
现在我们将绿盒子的上边距设置成20px,两个盒子之间就应该是50px
<img src="https://img2018.cnblogs.com/blog/1433227/201909/1433227-20190912144359126-1210597590.gif" alt="" loading="lazy">
可是你发现，在调节绿色的上外边距并没有对两个框的距离造成影响
什么时候影响了？？？当上边距超过30px的时候有影响了
这个现象，就叫外边距合并现象，也叫塌陷现象
只有在垂直方向上，当两个同级的盒子，在垂直方向上设置了margin之后，那么以较大者为准
那怎么处理呢？？？很简单！我们如果想让上下的两个盒子中间有间距，只需要设置一个盒子的一个方向即可
没必要去碰触外边距塌陷的问题，还得找解决问题的方法，得不偿失
<hr>
<center>*****</center>
<center>*****</center> 
来源：https://www.cnblogs.com/jevious/p/11511276.html

頁: [1]

琼殿技术论坛's Archiver

前端学习（十三）：CSS盒子模型