zoukankan      html  css  js  c++  java

  • css盒子模型

    　　今天，我们大家一起研究一下css盒子模型。

    　　css盒子模型是把html标签比喻成一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。ps：CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签。

    　　下面是和模型的一个Model：

    示例代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>48-CSS盒子模型</title>
    6.     <style>
    7.         span,a,b,strong{
    8.             display: inline-block;
    9.             100px;
    10.             height: 100px;
    11.             border: 6px solid #000;
    12.             padding: 20px;
    13.             margin: 20px;
    14.         }
    16.     </style>
    17. </head>
    18. <body>
    20. <span>我是span</span>
    21. <a href="#">我是超链接</a>
    22. <b>我是加粗</b>
    23. <strong>我是强调</strong>
    25. </body>
    26. </html>

    　　通过图片可以看出，盒子模型由四个部分组成，下面我们一起来了解一下盒子模型的四个部分：

    　　一、margin，外边距：标签和标签之间的距离就是外边距。

    　　　　1.外边距分为上右下左四个部分，可以单独设置也可以一块设置。

    　　　　　　①单独设置：

    • 　　　　margin-top: ;上边距
    • 　　　　margin-right: ;右边距
    • 　　　　margin-bottom: ;下边距
    • 　　　　margin-left: ;左边距
      • ②一块设置：
      • 　　margin: 上 右 下 左;　
      • 这三个属性的取值省略时的规律
        • 只设置 上 右 下 > 左边的取值和右边的一样
        • 只设置 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
        • 只设置 上 > 右下左边取值和上边一样
          • ps：外边距的那一部分是没有背景颜色
        　

    　　　　　2.外边距合并现象：

    　　　　　　默认布局的水平方向的外边距是可以叠加的，两元素边框之间的距离=左边元素的右边距+右边元素的左边距　　

    　　　　　　默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的。示例代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>外边距合并现象</title>
    6.   <style>
    7.       span{
    8.           100px;
    9.           height: 100px;
    10.           border: 1px solid #000;
    11.       }
    12.       div{
    13.           height: 100px;
    14.           border: 1px solid #000;
    15.       }
    16.       .hezi1{
    17.           margin-right:50px;
    18.       }
    19.       .hezi2{
    20.           margin-left:100px;
    21.       }
    22.       .box1{
    23.           margin-bottom:50px;
    24.       }
    25.       .box2{
    26.           margin-top:100px;
    27.       }
    28.   </style>
    29. </head>
    30. <body>
    31. <div class="hezi1">我是盒子1</div><div class="hezi2">我是盒子2</div>
    32. <div class="box1">我是div</div>
    33. <div class="box2">我是div</div>
    34. </body>
    35. </html>

    　　　　　　ps：默认布局中，当两个元素为嵌套关系是，当子元素跟父元素上边重合时，给子元素设置margin-top会把父元素一块带下来。可以通过给父元素添加over-flow:hidden;属性或者添加边框等方式解决。在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)示例代码：

    1. <style>
    2. .big{
    3.             500px;
    4. height: 500px;
    5.             background-color: red;
    6.             /*不设置边框, big会被small的顶部外边距顶下去*/
    7.             border: 5px solid #000;
    8.         }
    9.         .small{
    10.             200px;
    11.             height: 200px;
    12.             background-color: blue;
    13.             margin-top:150px;
    14.             margin-left:150px;
    15.         }
    16.     </style>

    　　　　3.使用外边距使盒子居中：

    　　　　我们的盒子一般是指html标签重的块级标签，它的默认宽度等于父元素的宽的，当给一个元素设置了一个宽度，那么它的外边局也会默认等于父元素的宽度-盒子本身的宽度。所以当我们使用margin:0 auto;时，左右外边距将会相等，使盒子占满一行，同时盒子本身也会相对于父元素居中。

    　　　　这个时候我们肯定会想到text-align:center;也有居中的功能，那么他俩有什么区别呢。

      • 　　text-align: center; 是设置盒子中存储的文字/图片水平居中；
      • 　　margin:0 auto;是让盒子自己水平居中，盒子里面的内容并不一定是居中的。

    示例代码：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>盒子居中和内容居中</title>
    6.     <style>
    7.         .father{
    8.             800px;
    9. height: 500px;
    10.             background-color: red;
    11.             /*文字图片会居中*/
    12.             /*text-align: center;*/
    13.             /*盒子自身会居中*/
    14.             margin:0 auto;
    15.         }
    16.         .son{
    17.             100px;
    18.             height: 100px;
    19.             background-color: blue;
    20.         }
    21.     </style>
    22. </head>
    23. <body>
    24. <div class="father">
    25.     我是文字<br/>
    26.     <img src="images/girl.jpg" alt="">
    27.     <div class="son"></div>
    28. </div>
    29. </body>
    30. </html>

    　　二、border，边框属性：边框就是环绕在标签宽度和高度周围的线条。

    　　　　1.一个元素有四条边框，可以单独设置，也可以一起设置。每个边框都有三个属性值：

    　　　　　　border-width 属性为边框指定宽度；

    　　　　　　border-style属性用来定义边框的样式：常用的有下面几种

     

    　　　　　　border-color属性用来设置边框颜色。ps：border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。　

    　　　　　　

    p {  
         border-top-style:dotted;
         border-right-style:solid;
        border-bottom-style:dotted;
        border-left-style:solid; }

    　　　　border-style属性可以有1-4个值：

    • border-style:dotted solid double dashed;
        • 上边框是 dotted
        • 右边框是 solid
        • 底边框是 double
        • 左边框是 dashed
    • border-style:dotted solid double;
      • 上边框是 dotted
      • 左、右边框是 solid
      • 底边框是 double
    • border-style:dotted solid;
      • 上、底边框是 dotted
      • 右、左边框是 solid
    • border-style:dotted;
        • 四面边框是 dotted

    　　　　这里用border-style示例，border-width和border-color跟它用法相同。示例代码：

    1. <style>
    2. .box{
    3.  500px;
    4. height: 500px;
    5. red;
    6. border- 5px 10px 15px 20px;
    7. border-style: solid dashed dotted double;
    8. border-color: blue green purple pink;
    9. /*border-color: blue green purple;*/
    10. /*border-color: blue green;*/
    11. /*border-color: blue;*/
    12. }
    13. </style>

    　　ps：

    • 这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
    • 这三个属性的取值省略时的规律
      • 只有 上 右 下 > 左边的取值和右边的一样
      • 只有 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
      • 只有 上 > 右下左边取值和上边一样

    　　　　2.上面的例子用了很多属性来设置边框。其实你也可以在一个属性中设置边框。你可以在"border"属性中同时设置：

    　　　　border-width，border-style (required)，border-color三个属性。例：

    　　　　　　border:5px solid red;

    　　　　同时可以按方向连写(分别设置四条边)

      • 　　border-top: 边框的宽度 边框的样式 边框的颜色;
      • 　　border-right: 边框的宽度 边框的样式 边框的颜色;
      • 　　border-bottom: 边框的宽度 边框的样式 边框的颜色;
      • 　　border-left: 边框的宽度 边框的样式 边框的颜色;
    • ps：
        • 连写格式中颜色属性可以省略, 省略之后默认就是该元素有color属性值，遗传的color属性也会生效。示例代码：
        • 　　
          复制代码
          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
             200px;
            height: 200px;
            margin: 0 auto;
            color: rebeccapurple;
            border: 1px solid;
        }
        .div2{
             100px;
            height: 100px;
            margin-top: 50px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>
</body>
</html>
          复制代码
      • 连写格式中样式不能省略, 省略之后就看不到边框了
      • 连写格式中宽度可以省略, 省略之后还是可以看到边框

    　　　　2.border-radius 圆角
       　　　　  1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
       　　　　     例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
      　　　　   2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角
      　　　　   　例如：border-radius: 50px 0px ; =border-radius: 50px 0px 50px 0px;=border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
     　　　　    3、只写一个数，默认8个值均相等。

     　　三、padding，填充属性：定义元素边框与元素内容之间的空间。

    　　　　1.可能的值：

    length 定义一个固定的填充(像素, pt, em,等)
    % 使用百分比值定义一个填充

     　　　　填充- 单边内边距属性，在CSS中，它可以指定不同的侧面不同的填充：

    　　　　　　padding-top:25px;
    　　　　　　padding-bottom:25px;
    　　　　　　padding-right:50px;
    　　　　　　padding-left:50px; 

    　　　　填充 - 简写属性：为了缩短代码，它可以在一个属性中指定的所有填充属性。这就是所谓的缩写属性。所有的填充属性的缩写属性是"padding":

    　　　　　　padding:25px 50px;

    　　　　Padding属性，可以有一到四个值。
      　　　　padding:25px 50px 75px 100px;
    　　　　　　上填充为25px
    　　　　　　右填充为50px
    　　　　　　下填充为75px
    　　　　　　左填充为100px
      　　　　padding:25px 50px 75px;
    　　　　　　上填充为25px
    　　　　　　左右填充为50px
    　　　　　　下填充为75px
     　　　　 padding:25px 50px;
    　　　　　　上下填充为25px
    　　　　　　左右填充为50px
     　　　　 padding:25px;
    　　　　　　所有的填充都是25px 

    　　　　ps：

      • 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
      • 给标签设置内边距之后, 内边距也会有背景颜色

    　　四、盒子的高度和宽度

    　　　　1.内容的宽度和高度

      • 就是通过width/height属性设置的宽度和高度

    　　　　2.元素的宽度和高度

      • 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
      • 高度 同理可证
      • 规律：
        • 增加了padding/border之后元素的宽高也会发生变化
        • 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高

    　　　　3.元素空间的宽度和高度

      • 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
      • 高度 同理可证

     　　五、box-sizing属性

    • CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

    • box-sizing取值

      • content-box
        • 元素的宽高 = 边框 + 内边距 + 内容宽高
      • border-box
        • 元素的宽高 = width/height的宽高
        • 增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

    　　好了，今天的分享就到这里了，有什么不同意见和建议可以跟我留言哟！欢迎来讨论。

    　　　　
  • 相关阅读:
    C语言I博客作业07
    C语言I博客作业06
    C语言I博客作业05
    C语言|博客作业04
    C语言|博客作业02
    第二周作业
    第一周作业
    学期总结
    作业01
    C语言I博客作业09
  • 原文地址：https://www.cnblogs.com/wuyuxin/p/7017217.html
Copyright © 2011-2022 走看看