0 0 2 9 - C3框模型

不二如是 · 发表于 2017-1-21 13:29:51

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:21 编辑

仅仅掌握27、28的元素定位方式，是不能制作出精良性感的Web页面滴！

必须要掌握元素本身的内容显示方式，即，江湖传说中的CSS框模型！

框模型往往又被称为盒模型、盒子模型。

他决定了元素的内容、内外边距、边框的设置。

内容区域

<!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>

复制代码

字体颜色大全

body{
color: #FFF;
background:#BBFFEE;
position: relative;
}
.box{
background: #00FFFF;
position: absolute;
}
h1{
background: #00AAAA;
}

复制代码

内外边距

内边距，padding；外边距，margin

26

h1{
background: #00AAAA;
padding: 33px;
}

复制代码

h1{
background: #00AAAA;
padding: 33px;
margin: 33px;
}

复制代码

margin: -33px;

复制代码

边框

h1{
background: #00AAAA;
padding:33px;
margin:33px;
border:6px solid #000;
}

复制代码

内容、内外边距、边框之间的大小关系

h1{
width:120px;
height: 120px;
background: #00AAAA;
padding:20px;
margin:20px;
border:5px solid #000;
}

复制代码

5+20+120+20+5= 170px

就设置box-sizing属性为border-box。

h1{
box-sizing: border-box;
}

复制代码

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

shishunfu · 发表于 2017-4-25 11:05:31

交作业

<!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:25:36

本帖最后由 joker11111 于 2017-3-5 20:50 编辑

做出来是这个效果。。。

感觉不太能理解这个框模型，就是个内边距，边框，外边距的概念么？？？

上图中应该是可视化宽高；
设置box-sizing属性为border-box，也就是让可视化宽高=（所设置的）width , higth;对吧

另纠错：

可视化宽高就是border + padding + h1。上式多个20

明白了，可视化宽高就是border + padding + h1，明白这个概念了，啊啊啊啊啊

不二如是 · 发表于 2017-3-5 20:26:29

joker11111 发表于 2017-3-5 20:25
做出来是这个效果。。。

joker11111 · 发表于 2017-3-5 20:51:45

不二如是发表于 2017-3-5 20:26

感谢不二解惑

不二如是 · 发表于 2017-3-5 21:25:43

joker11111 发表于 2017-3-5 20:51
感谢不二解惑

热爱小王子的老司机
都是好样儿的！

aswyamato1989 · 发表于 2017-7-18 12:49:59

交作业！

R9bot · 发表于 2018-3-15 21:51:19

后半部分width范围开始就没看懂，是我理解能力太差么

rock5442107 · 发表于 2018-6-9 15:12:30

<!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>

复制代码

charles_2268 · 发表于 2018-8-24 21:49:39

为了更加方便理解边距饿，我们设置body为绝对定位，否则会引起容器塌崩。。。
这句话是不是写错了，和演示代码中的不一致，演示代码中的为relative;

soulwyb · 发表于 2018-10-20 08:16:00

charles_2268 发表于 2018-8-24 21:49
为了更加方便理解边距饿，我们设置body为绝对定位，否则会引起容器塌崩。。。
这句话是不是写错了，和演示 ...

我也在困惑这句

soulwyb · 发表于 2018-10-20 14:10:19

<!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>

复制代码

克里斯保罗 · 发表于 2019-8-15 21:50:46

交作业！

<!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>

复制代码

你在意在便在 · 发表于 2019-10-30 20:48:27

作业~~

<!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>

复制代码

huanghuiyv · 发表于 2020-8-19 09:27:31

<!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>

复制代码

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 2 9 - C3框模型

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

浏览过的版块