本文介绍了CSS中的盒模型，包括内容区、边框、内边距和外边距，并通过实例展示了如何设置和理解这些属性。同时，详细阐述了文档流的概念，解释了块元素、行内元素和行内块元素在文档流中的表现。此外，还探讨了如何利用盒模型和文档流进行页面布局，特别是水平布局中的过度约束问题和浏览器的调整策略。
一、认识盒模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
二、文档流
1. 什么是文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!--
文档流(normal flow)
网页是一个多层结构, css可以给每一层设置样式
最终我们看到的是最上面的一层
文档流是网页最底下的一层
元素分为两种状态: 在文档流中, 脱离文档流
之前将元素分为三类, 块元素, 行内元素, 行内块元素
分别具有一些特点, 这些特点都是元素在文档流中的特点
块元素:
1. 独占一行
2. 宽度是父元素内容区的宽度
3. 高度是被内容撑开的
行内元素:
1. 不会独占一行
2. 宽高都是被内容撑开的, 不可以自定义宽高
行内块元素
1. 兼具块元素与行内元素的特点, 即不会独占一行, 可以设置宽高
注意:
1. 一旦元素脱离文档流, 以上的分类和特点都不复存在
2. 我们创建的元素默认是在文档流
-->
</body>
</html>
三、盒子模型
1. 认识盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*
布局相关样式:
文档流默认的布局方式, 浮动, 定位, 弹性盒子
*/
/* 盒模型, 盒子模型, 框模型(box model) */
/*
网页中也有很多的元素, 将各种元素摆在合适的位置,
盒模型将页面所有元素的形状都统一了,在布局时
只需要考虑到元素的大小即可
*/
/*
盒模型 快递
内容区 content 冰箱
边框 padding 泡沫
内边距 border 快递盒
外边距 margin 快递离你的距离
盒子的大小: 内容区, 内边距, 边框
*/
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
/*
1. 内容区 content
width: 内容区的宽
height: 内容区的高
*/
</style>
</head>
<body>
<div class="box1">却法卑承投，求才如。</div>
</body>
</html>
2. 边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 0;
height: 0;
/* background-color: red; */
border-width: 20px;
/* border-width: 10px 20px 30px 40px; */
border-color: transparent transparent transparent greenyellow;
border-style: solid;
/* border: 5px solid #368; */
}
</style>
<!--
边框(border) 边框用来隔开盒子内部和盒子外部
设置边框, 三个要素, 缺一不可
边框的宽度 border-width
1. 可以设置多个值, 以空格隔开即可
4个值 上 右 下 左
3个值 上 左右 下
2个值 上下 左右
1个值 上下左右
2. 单独设置某一边的边框
border-top-width
border-bottom-width
border-left-width
border-right-width
3. border-width有默认值, 默认大小在1px~3px之间
边框的颜色 border-color
1. 可以设置多个值, 规则同上
2. 单独设置某一边的边框, 规则同上
3. 小箭头的写法
border-color: transparent transparent transparent greenyellow;
4. border-color也有默认值, 默认黑色
边框的样式 border-style
1. 边框的种类
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
2. 可以写多个样式, 规则同上
3. 单独设置某一边的样式, 规则同上
4. border-style默认值是none
语法:
1. border: 大小 颜色 样式
2. 单独设置某一边边框
border-top
border-right
border-bottom
border-left
-->
</head>
<body>
<div class="box"></div>
</body>
</html>
3. 内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/*
内边距 padding 是边框和内容区之间的距离
1. 可以单独设置某一边的内边距
padding-top
padding-right
padding-bottom
padding-left
2. 内边距padding简写
规则同border-width
*/
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 5px solid #368;
}
.box2{
width: 100%;
height: 100%;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
4. 外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!--
外边距 margin(相对于块元素)
不影响盒子的大小, 可以改变盒子的位置
margin-top 设置元素的上外边距, 如果是正值, 元素向下移动, 负值则相反
margin-right 设置元素的右外边距, 元素是没有效果的
margin-bottom 设置元素的下外边距, 如果是正值, 元素会挤下面的元素向下移动, 负值则相反
margin-left 设置元素的左外边距, 如果是正值, 元素向右移动, 负值则相反
margin简写
margin 可以设置多个值 规则同padding
-->
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/* margin-top: 100px; */
/* margin-bottom: 50px; */
}
.box2 {
width: 200px;
height: 200px;
background-color: #368;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
5. 水平布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 600px;
height: 200px;
border: 10px solid red;
}
/*面试题： 什么是过度约束，浏览器是如何调整水平方向值？ */
/*
水平方向能影响到inner所占位置的因素有哪些
margin-left border-left padding-left width padding-right border-right margin-right
过度约束：
浏览器规定，元素水平方向7个值相加，必须要等与其父元素内容区的宽度，
如果不等于，浏览器就会进行调整，让等式成立
margin-left+border-left+padding-left + width + padding-right +
border-right+ margin-right=父元素内容区的宽度
40+20+0+100+0+20+0=600
180 ！= 600
浏览器如何调整
1、如果水平方向7个值当中没有auto，浏览器会自动调整margin-right的值
40+20+0+100+0+20+ 420 =600
2、7个值当中，有3个值可以设置auto，margin-left width margin-right
（1） 设置1个auto 谁是auto，浏览器就调整谁
margin-left
auto+20+0+100+0+20+0=600 auto=460
width
40+20+0+auto+0+20+0=600 auto=520
margin-right
（2）设置2个auto
margin-left width 调整width
width margin-right 调整width
margin-left margin-right 同时调整margin-left margin-right
设置3个auto
margin-left width margin-right 调整的就是width
总结：
1、如果7个值当中有auto，调整的顺序
width > margin-left margin-right
2、如果想让块元素水平方向居中，必须要width为固定值，左右外边距为auto
*/
.inner {
width: 100px;
height: 100px;
background-color: #bfa;
border: 10px solid green;
margin-left: 40px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
扫一扫
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
