3.前端CSS—盒子模型和浮动
一、CSS盒子模型
HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。
盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如图所示：
<style>
div {
background-color: rgb(30, 33, 184);
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
显示效果：红色边框实际是没有的
1.1 content(内容区域)
盒子的内容，显示文本和图像。CSS中的width和height属性直接作用的区域。
width：指的是内容的宽度，而不是整个盒子真实的宽度。
height：指的是内容的高度，而不是整个盒子真实的高度。
1.2 padding(内填充)
padding即内边距，padding的区域是有背景颜色的。且背景颜色和内容区域的颜色一致。
内边距的距离：边框到内容之间的距离。
1.padding有四个方向，所以能够分别描述四个方向的padding。
2.padding描述方法分两种：（1）小属性；（2）综合属性（空格隔开）
小属性设置——控制每个方向的宽度
/* 小属性设置 控制每个方向上的宽度*/
padding-top: 30px;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 30px;
综合属性设置——用空格隔开，顺时针方向设置
/* 综合属性，用空格隔开 顺时针方向 上右下左*/
padding: 20px 30px 40px 50px;
没有设置四个值的时候
/*只设置了三个值：上 左右 下*/
padding: 20px 30px 40px;
/*只设置两个值：上下 左右*/
padding: 35px 45px;
/*只设置一个值：上下左右*/
padding: 20px;
一般搭建网站要清除默认的padding，但是这样写效率低，可参考（css-reset 代码）
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
1.3 border(边框)
border是边框的意思，边框有三要素：粗细、线性、颜色。
值 | 描述
none | 无边框
dotted | 点状虚线边框
dashed | 矩形虚线边框
solid | 实线边框
三要素的特性：
border: 5px solid blue;
- 如果颜色不写（blue），默认是黑色；
- 如果粗细不写（5px），默认是不显示的。
- 如果只写了线性样式（solid），默认上右下左（顺时针）3px的宽度，默认是黑色
/*基础3要素*/
border-width: 5px;
border-style: solid;
border-color: red;
/*3要素进阶*/
border-width: 5px 10px; /* 上下：5px 左右：10px */
border-style: solid dotted dashed double ; /* 顺时针：上:实线边框 右:点状虚线 下:矩状虚线 左:双线 */
border-color: red green red; /*上:红 左右:绿 下:红*/
按照方向设置border样式
/*按照方向去分*/
/*上*/
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
/*右*/
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
/*下*/
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
/*左*/
border-left-width: 10px;
border-left-color: red;
border-left-style: solid;
按照方向设置可以设置
border-left: 10px solid red;
设置border样式为空
/*清除border*/
border: none;
/*设置一边的border没有样式*/
border-right: none;
border-top: 0;
1.4 margin(外边距)
margin： 外边距，指的是元素与元素之间的距离。
margin特性：
-
margin 的4个方向
-
margin会改变实际大小，背景色不会渲染到margin区域 这个区域会以空白显示，但是也属于盒子的一部分
-
margin是添自身的,如果哪个想要改变自己的位置，就给谁添加margin html的部分标签自带margin padding p body ul
margin垂直方向塌陷问题及解决：
两个兄弟盒子设置垂直方向的margin时，以较大的margin值为准，这种现象称为“塌陷”。
<head>
<meta charset="UTF-8">
<title>margin的塌陷</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.box2{
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
}
</style>
</head>
这里的margin-bottom: 20px没有起作用，只有下面的margin-top: 50px起作用了，上面的20只是嵌到了50中所以最终显示效果就是50px。
解决：浮动的盒子垂直方向不会塌陷，可以解决margin塌陷问题.
<head>
<meta charset="UTF-8">
<title>margin的塌陷</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
overflow: hidden;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px;
float: left;
}
.box2{
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
float: left;
}
</style>
</head>
<body>
<div class="father">
<!--
浮动的盒子垂直方向不塌陷
-->
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
水平方向上的margin是不会塌陷的。
盒子的水平居中
/*水平居中盒子*/
margin: 0 auto;
/*水平居中另一种表示*/
margin-left: auto;
margin-right: auto;
二、块级元素、行内元素和行内块级元素的转换关系
在css选择器内，可以通过display属性对块级元素、行内元素、行内块元素进行转换，从而调整显示效果。
display的功能：1.控制HTML元素的显示和隐藏 2.块级元素与行内元素的转换。
2.1 display:inline 转化为行内元素
通过display:inline将div这种块级元素转化为了行内元素，div内的内容在一行内显示。
<style type="text/css">
.box1{
display: inline; /* 通过inline将块级元素转化为行内元素 */
width: 200px;
height: 40px;
border: 1px solid red;
}
<body>
<div class="box1">内容</div>
<div class="box1">内容</div>
</body>
2.2 display:block 转化为块级元素
<span>是行内元素，行内元素的特点就是元素的高度、宽度及边距不可设置，display:block转化为块级元素后，span内的内容分行显示，且高度、宽度设置生效。
<style type="text/css">
span{
background-color: yellow;
width: 100px; /* 给行内元素设置高度宽度是不起作用的 */
height: 40px;
display: block; /* block将行内元素转化为块级元素 */
}
<body>
<span>alex</span>
<span>alex</span>
</body>
2.3 display：inline-block 转化为行内块级元素
把<div>这个块级元素转化为了行内块级元素。box1的元素都在一行上；元素的高度、宽度等都可设置。
<style type="text/css">
.box1{
display: inline-block; /* 通过inline-block将块级元素转化为行内块级元素 */
width: 200px;
height: 40px;
border: 1px solid red;
}
</style>
<body>
<div class="box1">内容</div>
<div class="box1">内容</div>
<div class="box2">内容</div>
</body>
2.4 display:none 隐藏当前的标签
display：none隐藏标签不占位置。在此需要注意和visibility:hidden进行区分。
img{
width: 300px;
height: 300px;
display:none; /* 隐藏当前的标签 不占位置 */
}
img{ /* 行内块级元素，可以设置高度和宽度，也都在一行内展示 */
width: 300px;
height: 300px;
/*display: none; /* 隐藏当前的标签 不占位置 */ */
visibility:hidden; /* 隐藏当前的标签 占位置 */
}
三、浮动
3.1 浮动定义
将元素从普通的布局排版中拿走，其他盒子在定位时会当作该元素不存在进行定位，可以理解为不在一个平面上，
3.2 浮动的作用
使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来。
文档流：元素在排列的时候有默认开始位置以及他们所占的区域。
浮动的目的：为了实现指定的布局，让指定元素定位在指定位置，并且可以设置浮动后的行级元素的宽高，最初的设计就是用来实现文字环绕。
浮动的副作用：会导致父级标签塌陷的问题，
四、清除浮动
4.1 给父盒子设置高度
4.2 内墙法
在浮动元素最后加一个空的块元素，且块元素不浮动，设置其属性为clear：both，以此来清除别人对我的浮动影响。
.clear{
clear: both;
}
4.3 伪元素清除法
<!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>
.c1{
background-color: red;
height: 100px;
width:100px;
float: left;
}
.c2{
background-color:aqua;
height:100px;
width: 100px;
float: right;
}
.c3{
background-color:pink;
height:200px;
}
.cc{
/* height: 100px; */
}
.clearfix:after{
/*以下三句是必须要写的*/
content:'';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="cc clearfix">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
</body>
</html>
4.4 overflow:hidden
box是父级元素的属性。
.box{
width: 400px;
overflow: hidden;
}
4.5 overflow溢出
overflow属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，用户代理会提供一种滚动机制。可能导致元素放得下也会用滚动条。
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: auto; /* 内容变多时出现滚动条 */
}
</style>
| 名称 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
