美文网首页
盒子模型

盒子模型

作者: Khada | 来源:发表于2018-07-08 19:35 被阅读0次
    • 一个盒子我们会分成几个部分:
      内边区(content)
      内边距(padding)
      边框(border)
      外边距(margin)

    • 内容区
      内容区指的是盒子中放置内容的区域,也就是元素中的文本内容,子元素都是存在于内容区中的。
      如果没有为元素设置内边距和边框,则内容区大小默认和盒子大小是一致的。
      通过width和height两个属性可以设置内容区的大小。
      width和height属性只适用于块元素。

    • 内边距
      内边距指的是元素内容区与边框以内的空间。
      默认情况下width和height不包含padding的大小。
      使用padding属性来设置元素的内边距
      padding:10px 20px 30px 40px
      设置元素的上、右、下、左四个方向的内边距。
      padding:10px 20px 30px;
      设置元素的上、左右、下四个方向的内边距。
      padding:10px 20px;
      设置元素的上下、左右四个方向的内边距。
      padding:10px
      设置元素上下左右四个方向的内边距。
      同时在css中还提供了padding-top、padding-right、padding-left、padding-bottom分别用来指定四个方向的内边距。

      .box1{
        width: 200px;
        height: 200px;
        background-color: red;
        /*设置边框*/
        border: 10px black solid;
        padding: 100px 100px 100px 100px;
      }
      /*创建一个子元素box2占满box1*/
      .box2{
        width: 100%;
        height: 80%;
        background-color: yellow;
      }
      
    • 边框
      可以在元素周围创建边框,边框是元素可见框的最外部。
      可以使用border属性来设置盒子的边框。
      和padding一样,默认width和height并包括边框的高度。
      border:1px red solid
      分别指定了边框的宽度、颜色、样式。
      使用border-top/left/right/bottom分别指定上左右下四个边框的方向。
      边框的多种样式

    --none 没有边框
    --dotted 点线
    --dashed 虚线
    --solid 实线
    --double 双线
    --groove 槽线
    --ridge 脊线
    --inset 凹边
    --outset 凸边
    
    • 外边距
      外边距是元素边框与周围元素相距的空间。
      使用margin属性可以设置外边距。
      使用margin-top/right/left/bottom为元素设置四个方向。
      使用margin:0 auto 可以使元素居中。

    相关文章

      网友评论

          本文标题:盒子模型

          本文链接:https://www.haomeiwen.com/subject/przouftx.html