鱼C论坛

 找回密码
 立即注册
查看: 3721|回复: 15

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

[复制链接]
发表于 2017-1-21 13:29:51 | 显示全部楼层 |阅读模式

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

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

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

仅仅掌握2728的元素定位方式,是不能制作出精良性感的Web页面滴!

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

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

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


  • 内容区域


  • 先来创建一个最原始的box:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.         <meta charset="utf-8">
    5.         <title></title>
    6.         <style type="text/css"></style>
    7. </head>
    8. <body>
    9.         <div class="box">
    10.                 <h1>本大人乃盒子大仙</h1>
    11.         </div>
    12. </body>
    13. </html>
    复制代码

    效果图:
    Snip20170121_226.png


    我们创建了一个类名为box的div元素。

    div里面只有一个h1标题,所以整个页面才会显得空空如也~

    现在设置一些基本的样式,将body、div、h1分别设置为三种渐变样蓝色(字体颜色大全

    #BBFFEE、#00FFFF、#00AAAA,就是三个背景色。

    为了更加方便理解边距饿,我们设置body为绝对定位,否则会引起容器塌崩。。。

    不会没关系,这个是CSS中的BFC机制,有兴趣自行百度,不做延伸。

    1. body{
    2.                         color: #FFF;
    3.                         background:#BBFFEE;
    4.                         position: relative;
    5.                 }
    6.                 .box{
    7.                         background: #00FFFF;
    8.                         position: absolute;
    9.                 }
    10.                 h1{
    11.                         background: #00AAAA;
    12.                 }
    复制代码

    效果图:
    Snip20170121_227.png


    看到颜色的划分了不,最大的是body背景色#BFE

    然后叠加,盒子模型的#0FF。

    最顶层就是h1的#0AA。


  • 内外边距


  • 内边距,padding;外边距,margin

    之前,我们在26介绍过属性值的不同,代表含义不同。

    我们为了演示,只用一个属性值,代表四个变量。

    先设置内边距,padding,修改h1代码:
    1. h1{
    2.                         background: #00AAAA;
    3.                         padding: 33px;
    4.                 }
    复制代码

    效果图:
    Snip20170121_231.png


    看到了吗,h1的文字到第一层背景色的外延距离变大了。

    且长度都是33px。

    文字不在紧贴自己的背景色边缘了,之间的距离就是内边距。

    现在,设置h1的外边距,margin:
    1. h1{
    2.                         background: #00AAAA;
    3.                         padding: 33px;
    4.                         margin: 33px;
    5.                 }
    复制代码

    效果图:
    Snip20170121_232.png


    h1到第二层背景色的底边缘距离就是margin,外边距。

    margin,也可以设置为,负值
    1. margin: -33px;
    复制代码


    效果图:
    Snip20170121_233.png


    因为外边距为负数,意味着第二层隐藏在h1中了



  • 边框


  • 边框border,也用过好几次了。这次解释下:
    1. h1{
    2.                         background: #00AAAA;
    3.                         padding:33px;
    4.                         margin:33px;
    5.                         border:6px solid #000;
    6.                 }
    复制代码

    效果图:
    Snip20170121_234.png


    边框位于内外边距的中间,宽度为6px的黑线。


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


  • 现在,让我们综合提升下,padding设置为20px、border设置为5px、margin20px。

    h1标签的宽度,120*120px。
    Snip20170119_122.png

    1. h1{
    2.                         width:120px;
    3.                         height: 120px;
    4.                         background: #00AAAA;
    5.                         padding:20px;
    6.                         margin:20px;
    7.                         border:5px solid #000;
    8.                 }
    复制代码

    效果图:
    Snip20170121_235.png


    我们设置的h1宽高120*120px,根本没有对padding、margin、boder有影响。

    width对应的范围是:

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

    这就是出现一个很尴尬的地方,当我们为一个可视化区域设置宽高时,并不是可视化区域宽高。

    而是,加上border、padding的距离。

    一次可以算,两次可以算,n次后。。。

    就不好说了。。。

    所以为了,设置宽高就是可视化区域的宽度。

    就设置box-sizing属性为border-box。
    1. h1{
    2. box-sizing: border-box;
    3. }
    复制代码

    效果图:
    Snip20170121_236.png


    为啥,字体会出来?

    因为现在设置高度为120px,可视化高度就是border + padding + h1 = 120px。

    Snip20170119_124.png


    最后h1,内容宽度只有70,所以会出来。

    这样我们为元素设置什么样的宽高,元素就显示为相应的尺寸。

    这样就不用老让设计师计算了。

    默认将所有块状元素的box-sizing属性值都设置为border-box。




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


官方 Web 课程:

评分

参与人数 3荣誉 +15 鱼币 +10 贡献 +5 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献!
type_J + 5 + 5 + 2 感谢楼主无私奉献!
alltolove + 5 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-4-25 11:05:31 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Box Model</title>
  6.         <style type="text/css">
  7.                 body{
  8.                         background-color: beige;
  9.                         position: relative;
  10.                 }
  11.                 .box{
  12.                         margin: 20px;
  13.                         padding: 20px;
  14.                         border: 10px solid black;
  15.                         background-color: #f5f588;
  16.                         position: absolute;
  17.                 }
  18.                 h1{
  19.                         background-color: #f5e500;
  20.                         border: 10px solid red;
  21.                         margin: 20px;
  22.                         padding: 20px;
  23.                 }
  24.                 a{
  25.                         font-size: 22px;
  26.                         color: white;
  27.                         border:1px solid white;
  28.                         border-radius: 2px;
  29.                         background-color: aqua;
  30.                         padding: 10px;
  31.                         margin: 20px;
  32.                         text-decoration: none;
  33.                 }
  34.                 #a1{
  35.                         float: left;
  36.                 }
  37.                 #a2{
  38.                         float: right;
  39.                 }
  40.         </style>
  41. </head>

  42. <body>
  43. <div class="box">
  44.         <h1>CSS盒子模型(Box Model)</h1>
  45.         <a id="a1" href="http://bbs.fishc.com/thread-81781-1-1.html">传送门</a>
  46.         <a id="a2" href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
  47. </div>
  48. </body>
  49. </html>
复制代码
0023Box Model.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-4-25 12:52
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-5 20:25:36 | 显示全部楼层
本帖最后由 joker11111 于 2017-3-5 20:50 编辑

做出来是这个效果。。。
h11111111111.png
感觉不太能理解这个框模型,就是个内边距,边框,外边距的概念么???
1111111111111111111.png
上图中应该是可视化宽高;
设置box-sizing属性为border-box,也就是让可视化宽高=(所设置的)width , higth;对吧

另纠错:
22222.png
可视化宽高就是border + padding + h1。上式多个20



22222.png

明白了,可视化宽高就是border + padding + h1,明白这个概念了,啊啊啊啊啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-5 20:26:29 | 显示全部楼层
joker11111 发表于 2017-3-5 20:25
做出来是这个效果。。。

132850fwkwmt5tl131t82l.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-5 20:51:45 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-5 21:25:43 | 显示全部楼层

热爱小王子的老司机
都是好样儿的!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-18 12:49:59 | 显示全部楼层
交作业!
029.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-3-15 21:51:19 | 显示全部楼层
后半部分width范围开始就没看懂,是我理解能力太差么
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-6-9 15:12:30 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>029</title>
  6.         <style type="text/css">
  7.         body{
  8.                 color:#FFF;
  9.                 background:#BBFFEE;
  10.                 position:relative;
  11.         }
  12.         .box{
  13.                 background:#00FFFF;
  14.                 position:absolute;
  15.                 border:6px dotted #0000FF;
  16.         }
  17.         #Godbox{
  18.                 background:#00AAAA;
  19.                 padding:33px;
  20.                 margin:33px;
  21.                 border:6px solid #000;
  22.                 box-sizing:border-box;
  23.         }
  24.         </style>
  25. </head>
  26. <body>
  27.         <div class="box">
  28.                 <h1 id="Godbox">本大人乃盒子大仙</h1>
  29.         </div>
  30. </body>
  31. </html>
复制代码


029.jpg

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-24 21:49:39 | 显示全部楼层
为了更加方便理解边距饿,我们设置body为绝对定位,否则会引起容器塌崩。。。
这句话是不是写错了,和演示代码中的不一致,演示代码中的为relative;
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

我也在困惑这句
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-20 14:10:19 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>Page Title</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <style type="text/css">
  9.         body {
  10.             color: #fff;
  11.             background: #bfe;
  12.             position: relative;
  13.         }
  14.         
  15.         div {
  16.             background: #0ff;
  17.             position: absolute;
  18.         }
  19.         
  20.         h1 {
  21.             width: 120px;
  22.             height: 120px;
  23.             background: #0aa;
  24.             padding: 20px;
  25.             margin: 20px;
  26.             border: 5px solid #000;
  27.             box-sizing: border-box;
  28.         }
  29.     </style>
  30. </head>

  31. <body>
  32.     <div class="box">
  33.         <h1>本人乃盒子大仙</h1>
  34.     </div>
  35. </body>

  36. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-8-15 21:50:46 | 显示全部楼层
交作业!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>C3</title>
  6.         <style type="text/css">
  7.                 body{
  8.                         color: #FFF;
  9.                         background: #BBFFEE;
  10.                         position: relative;
  11.                 }
  12.                 .box{
  13.                         margin: 20px;
  14.                         padding: 20px;
  15.                         border: 10px solid black;
  16.                         background-color: #f5f588;
  17.                         position: absolute;
  18.                 }
  19.                 a{
  20.                         background: #00AAAA;
  21.                         padding: 22px;
  22.                         margin: 33px;
  23.                         border: 6px solid #000;
  24.                         box-sizing: border-box;
  25.                 }

  26.                 h1{
  27.                         background: #00AAAA;
  28.                         padding: 22px;
  29.                         margin: 60px;
  30.                         border: 6px solid #000;
  31.                         box-sizing: border-box;

  32.                 }
  33.         </style>
  34. </head>
  35. <body>
  36.         <div class="box">
  37.                 <h1>GAME OVER</h1>
  38.                 <a href="https://www.bilibli.com" id="a1">Try again</a>
  39.                 <a href="https://www.bilibli.com" id="a2">Try again</a>
  40.         </div>
  41. </body>
  42. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-10-30 20:48:27 | 显示全部楼层
作业~~
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>让编程改变世界</title>
  6. <style type="text/css">
  7. body {
  8.   color:#636e72;
  9.   background: #2d3436;
  10.   position: relative;
  11.   
  12. }
  13. .box {
  14.   background: #74b9ff;
  15.   position: absolute;
  16.   
  17.   /* 盒子塌陷:父盒子内部的元素跑到了外部。 */
  18. }
  19. h1 {
  20.   background: #a29bfe;
  21.   padding: 33px;  /* 外边距 */
  22.   margin: 33px;   /* 内边距 */
  23.   border:6px solid #000;
  24.   /* margin: -33px; */
  25.   /* box-sizing : border-box;  */
  26.   /* width:120px;
  27.   height: 120px; */
  28. }
  29.    /* box-sizing : border-box;   
  30.    为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 */
  31. </style>
  32. </head>
  33. <body>
  34. <div class="box">
  35. <h1><!-- 本大人乃盒子大仙 --></h1>
  36. </div>
  37. </body>
  38. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-19 09:27:31 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style type="text/css">

  7.         body{
  8.             color: #FFF;
  9.             background:#BBFFEE;
  10.             position: relative;
  11.         }

  12.         .box{
  13.             background: #00FFFF;
  14.             position: absolute;
  15.         }

  16.         h1{
  17.             width: 120px;
  18.             height: 120px;
  19.             background: #00AAAA;
  20.             padding: 20px;
  21.             margin: 20px;
  22.             border: 6px solid yellow;
  23.         }
  24.     </style>
  25. </head>

  26. <body>
  27.     <div class="box">
  28.         <h1>本大人乃盒子大仙</h1>
  29.     </div>
  30. </body>

  31. </html>
复制代码
Snipaste_2020-08-15_13-44-34.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 02:14

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表