自行学习盒子模型
CSS盒子模型
盒子模型即box madel，通常在设计和布局时使用，他的本质上是封装周围的HTML元素，包括：边框，边距，填充和实际内容，它允许我们在其他元素和周围元素边框之间的空间放置元素
Margin(外边距) ：清除边框外的区域，外边距是透明的
Border(边框)：围绕在内边距和内容外的边框
Padding(内边距)：清除内容周围的区域，内边距是透明的
Content(内容)：盒子的内容，显示文本和图像
元素的总宽度计算公式：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度计算公式：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
当俩个盒子模型靠在一起的时候，只会有一个外边距，这个外边距是俩个盒子之间最大的外间距，这种现象叫外边距塌陷
边距常用属性(margin)
margin是使盒子之间保持间隙，让网页更加美观，margin也属于CSS属性，margin的取值方法右：auto，像素(px)，比例(%)
在使用margin属性时，可能会遇到外边距合并的问题，即垂直方向与外边距相撞时，取较大值，例如：盒子在上下放的时候，上面盒子的margin为100px，下面盒子的margin为50px，那么俩个盒子之间的margin会取值100px（水平方向不会存在这个问题）
margin属性可以有一到四个值
margin:25px 30px 45px 50px;/*顺序：上 右 下 左
margin:25px 30px 45px;/*顺序：上 （左右） 下
margin:25px 25px;/*顺序：上下 左右
margin:25px;/*顺序：所有方向
填充常用属性(padding)
元素内容距离盒子边框的距离就是内边距，与margin的取值方法类似，用px和%，使用语法和简写方法与margin相同，不做过多解释
尤其注意：padding会撑大容器（盒子）
margin和padding结合使用例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内外边距</title>
<!--
1.浅提盒子模型
组成部分
-->
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
background-color: aquamarine;
/* 1.外边距 */
margin-top:50px;
margin-bottom:50px;
margin-left:50px;
margin-right:50px;
/* 外边距复合写法 一个值：上下左右 俩个值：上下和左右 三个值：上和左右和下 四个值：上右下左 */
margin: 50px 60px 70px 80px;
/* !!!通过外边距可以设置居中 auto */
margin: auto;
/* 2.外边距 */
padding: 50px;
}
/* 去除body外边距，让其紧挨浏览器的上右边界 */
*{
margin: 0px;
}
</style>
</head>
<body>
<div>这是添加的下一个元素内容</div>
</body>
</html>运行结果
边框常用属性(border)
具体例子
<!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;
margin: auto;
/* 1.边框宽度 */
border-width: 10px;
/* 2.边框样式 */
border-style: solid;
/* 3.边框颜色 */
border-color: aqua;
/* 4.复合写法 */
border: 1px solid rebeccapurple;
/* 5.边框弧度 像素 百分比 */
border-radius: 50px;
/* 边框的阴影 */
box-shadow: 10px 10px 10px gray;
/* 微调 */
text-align: center;
line-height: 2;
}
</style>
</head>
<body>
<div>
username:<input type="text"><br>
password:<input type="password">
</div>
</body>
</html>运行结果
怪异盒子模型
怪异盒子模型也叫IE模型，它与标准盒子模型的区别在于：元素内容的width和height的范围不同，怪异盒子模型的width和height包括border和padding的宽度
怪异盒子使用的属性：box-sizing=border-box来创建一个怪异盒子模型，而box-sizing=context-box是标准的盒子模型
怪异盒子模型中的内容元素并不会把容器撑大，他会自动调节内容元素的大小以保持盒子的整体性
弹性盒子模型
弹性盒子模型是CSS3的新特性，是一种新的布局模式，这个特性可以在不同设备上智能的调节div即各种容器的布局的大小
如何开启弹性盒子
弹性盒子模型包括弹性容器和弹性子元素，弹性容器通过设置display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。设置之后，里面的元素会自动布局，**所有元素**都默认横着摆放
弹性容器外以及弹性子元素内是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器的布局
对弹性容器中的子元素进行布局
弹性子元素通常在弹性盒子内一行显示，使用flex-direction属性并取值rtl(right-to-left)，可以修改排列方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
.container {
display: flex;
width: 400px;
height: 250px;
background-color: pink;
}
.item {
background-color: lightblue;
width: 100px;
height: 100px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">flex item 1</div>
<div class="item">flex item 2</div>
<div class="item">flex item 3</div>
</div>
</body>
</html>
运行结果
在定义了direction后代码为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
body{
direction: rtl;
}
.container {
display: flex;
width: 400px;
height: 250px;
background-color: pink;
}
.item{
background-color: lightblue;
width: 100px;
height: 100px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>
</body>
</html>
运行结果为
flex-direction
该属性定义了弹性子元素在父容器中的位置
语法：flex-direction: row | row-reverse | column | column-reverse
各个值的含义：
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
justify-content
该属性是把弹性项沿着弹性容器的主轴线对齐，应用在弹性容器上
语法：justify-content: flex-start | flex-end | center | space-between | space-around
flex-start： 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的外边距边线放置在该行的边线，而后续弹性项依次平齐摆放
flex-end： 弹性项目向行尾紧挨着填充。与start相反，即放在main-end边线
center： 弹性项目居中紧挨着填充（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）
space-between： 弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等
space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等
效果如下：
align-items
该属性定义了弹性盒子元素在侧轴/纵轴方向上的对齐方式
语法：align-items: flex-start | flex-end | center | baseline | stretch
各个值的含义：
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-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>
.container{
display: flex;
align-items: flex-end;
width: 400px;
height: 250px;
background-color: pink;
}
.item {
background-color: cornflowerblue;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>
</body>
</html>
运行结果
flex-wrap
该属性定义了弹性盒子和子元素换行方式
语法：flex-wrap: nowrap|wrap|wrap-reverse
各个值的含义：
nowrap： 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列
例如下图中nowrap属性和wrap属性的运行结果对比：
实例讲解
从图中我们能了解到一下信息：
1.这个网页的盒子模型类型是正常的，并非怪异盒子模型
2.这个盒子的左边外边距为150px，右边外边距为0
3.border和padding的取值均为0
4.内容部分的width为1088，height为4010.87
一个页面通常由很多个盒子模型组成，在制作页面时，要先想好布局
扫一扫
1197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
