0 0 2 9 - C3框模型
本帖最后由 不二如是 于 2021-8-11 09:21 编辑仅仅掌握27、28的元素定位方式，是不能制作出精良性感的Web页面滴！
必须要掌握元素本身的内容显示方式，即，江湖传说中的CSS框模型！{:10_268:}
框模型往往又被称为盒模型、盒子模型。
他决定了元素的内容、内外边距、边框的设置。
[*]内容区域
先来创建一个最原始的box：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"></style>
</head>
<body>
<div class="box">
<h1>本大人乃盒子大仙</h1>
</div>
</body>
</html>
效果图：
我们创建了一个类名为box的div元素。
div里面只有一个h1标题，所以整个页面才会显得空空如也～
现在设置一些基本的样式，将body、div、h1分别设置为三种渐变样蓝色（字体颜色大全）
#BBFFEE、#00FFFF、#00AAAA，就是三个背景色。
为了更加方便理解边距饿，我们设置body为绝对定位，否则会引起容器塌崩。。。
不会没关系，这个是CSS中的BFC机制，有兴趣自行百度，不做延伸。
body{
color: #FFF;
background:#BBFFEE;
position: relative;
}
.box{
background: #00FFFF;
position: absolute;
}
h1{
background: #00AAAA;
}
效果图：
看到颜色的划分了不，最大的是body背景色#BFE
然后叠加，盒子模型的#0FF。
最顶层就是h1的#0AA。
[*]内外边距
内边距，padding；外边距，margin
之前，我们在26介绍过属性值的不同，代表含义不同。
我们为了演示，只用一个属性值，代表四个变量。
先设置内边距，padding，修改h1代码：
h1{
background: #00AAAA;
padding: 33px;
}
效果图：
看到了吗，h1的文字到第一层背景色的外延距离变大了。
且长度都是33px。
文字不在紧贴自己的背景色边缘了，之间的距离就是内边距。
现在，设置h1的外边距，margin：
h1{
background: #00AAAA;
padding: 33px;
margin: 33px;
}
效果图：
h1到第二层背景色的底边缘距离就是margin，外边距。
margin，也可以设置为，负值
margin: -33px;
效果图：
因为外边距为负数，意味着第二层隐藏在h1中了
[*]边框
边框border，也用过好几次了。这次解释下：
h1{
background: #00AAAA;
padding:33px;
margin:33px;
border:6px solid #000;
}
效果图：
边框位于内外边距的中间，宽度为6px的黑线。
[*]内容、内外边距、边框之间的大小关系
现在，让我们综合提升下，padding设置为20px、border设置为5px、margin20px。
h1标签的宽度，120*120px。
h1{
width:120px;
height: 120px;
background: #00AAAA;
padding:20px;
margin:20px;
border:5px solid #000;
}
效果图：
我们设置的h1宽高120*120px，根本没有对padding、margin、boder有影响。
width对应的范围是：
5+20+120+20+5= 170px
这就是出现一个很尴尬的地方，当我们为一个可视化区域设置宽高时，并不是可视化区域宽高。
而是，加上border、padding的距离。
一次可以算，两次可以算，n次后。。。
就不好说了。。。
所以为了，设置宽高就是可视化区域的宽度。
就设置box-sizing属性为border-box。
h1{
box-sizing: border-box;
}
效果图：
为啥，字体会出来？
因为现在设置高度为120px，可视化高度就是border + padding + h1 = 120px。
最后h1，内容宽度只有70，所以会出来。
这样我们为元素设置什么样的宽高，元素就显示为相应的尺寸。
这样就不用老让设计师计算了。
默认将所有块状元素的box-sizing属性值都设置为border-box。
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 交作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Model</title>
<style type="text/css">
body{
background-color: beige;
position: relative;
}
.box{
margin: 20px;
padding: 20px;
border: 10px solid black;
background-color: #f5f588;
position: absolute;
}
h1{
background-color: #f5e500;
border: 10px solid red;
margin: 20px;
padding: 20px;
}
a{
font-size: 22px;
color: white;
border:1px solid white;
border-radius: 2px;
background-color: aqua;
padding: 10px;
margin: 20px;
text-decoration: none;
}
#a1{
float: left;
}
#a2{
float: right;
}
</style>
</head>
<body>
<div class="box">
<h1>CSS盒子模型(Box Model)</h1>
<a id="a1" href="http://bbs.fishc.com/thread-81781-1-1.html">传送门</a>
<a id="a2" href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
</div>
</body>
</html> 本帖最后由 joker11111 于 2017-3-5 20:50 编辑
做出来是这个效果。。。
感觉不太能理解这个框模型，就是个内边距，边框，外边距的概念么？？？
上图中应该是可视化宽高；
设置box-sizing属性为border-box，也就是让可视化宽高=（所设置的）width , higth;对吧
另纠错：
可视化宽高就是border + padding + h1。上式多个20
明白了，可视化宽高就是border + padding + h1，明白这个概念了，啊啊啊啊啊{:10_284:} joker11111 发表于 2017-3-5 20:25
做出来是这个效果。。。
不二如是 发表于 2017-3-5 20:26
感谢不二解惑{:10_288:} joker11111 发表于 2017-3-5 20:51
感谢不二解惑
{:10_281:}热爱小王子的老司机
都是好样儿的！ 交作业！
后半部分width范围开始就没看懂，是我理解能力太差么{:10_266:}{:10_266:}{:10_266:} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>029</title>
<style type="text/css">
body{
color:#FFF;
background:#BBFFEE;
position:relative;
}
.box{
background:#00FFFF;
position:absolute;
border:6px dotted #0000FF;
}
#Godbox{
background:#00AAAA;
padding:33px;
margin:33px;
border:6px solid #000;
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="box">
<h1 id="Godbox">本大人乃盒子大仙</h1>
</div>
</body>
</html>
为了更加方便理解边距饿，我们设置body为绝对定位，否则会引起容器塌崩。。。
这句话是不是写错了，和演示代码中的不一致，演示代码中的为relative; charles_2268 发表于 2018-8-24 21:49
为了更加方便理解边距饿，我们设置body为绝对定位，否则会引起容器塌崩。。。
这句话是不是写错了，和演示 ...
我也在困惑这句 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
color: #fff;
background: #bfe;
position: relative;
}
div {
background: #0ff;
position: absolute;
}
h1 {
width: 120px;
height: 120px;
background: #0aa;
padding: 20px;
margin: 20px;
border: 5px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<h1>本人乃盒子大仙</h1>
</div>
</body>
</html> 交作业！<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>C3</title>
<style type="text/css">
body{
color: #FFF;
background: #BBFFEE;
position: relative;
}
.box{
margin: 20px;
padding: 20px;
border: 10px solid black;
background-color: #f5f588;
position: absolute;
}
a{
background: #00AAAA;
padding: 22px;
margin: 33px;
border: 6px solid #000;
box-sizing: border-box;
}
h1{
background: #00AAAA;
padding: 22px;
margin: 60px;
border: 6px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<h1>GAME OVER</h1>
<a href="https://www.bilibli.com" id="a1">Try again</a>
<a href="https://www.bilibli.com" id="a2">Try again</a>
</div>
</body>
</html> 作业~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>让编程改变世界</title>
<style type="text/css">
body {
color:#636e72;
background: #2d3436;
position: relative;
}
.box {
background: #74b9ff;
position: absolute;
/* 盒子塌陷：父盒子内部的元素跑到了外部。 */
}
h1 {
background: #a29bfe;
padding: 33px;/* 外边距 */
margin: 33px; /* 内边距 */
border:6px solid #000;
/* margin: -33px; */
/* box-sizing : border-box;*/
/* width:120px;
height: 120px; */
}
/* box-sizing : border-box;
为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 */
</style>
</head>
<body>
<div class="box">
<h1><!-- 本大人乃盒子大仙 --></h1>
</div>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
color: #FFF;
background:#BBFFEE;
position: relative;
}
.box{
background: #00FFFF;
position: absolute;
}
h1{
width: 120px;
height: 120px;
background: #00AAAA;
padding: 20px;
margin: 20px;
border: 6px solid yellow;
}
</style>
</head>
<body>
<div class="box">
<h1>本大人乃盒子大仙</h1>
</div>
</body>
</html>
页:
[1]