美文网首页
盒子模型(上)

盒子模型(上)

作者: 会说话的乌鸦 | 来源:发表于2018-07-09 22:53 被阅读0次

    盒子模型的概念

    在网页中"一切皆盒子"。css处理网页时,它认为每个元素都包含在一个不可见的盒子里!

    一个盒子有:内容区(content),内边距(paading),边框(border),外边距(margin)

    1,内容区(content)

    • 通过width和height两个属性可以设置内容区的大小

    2,内边距(padding)

    • padding:上 右 下 左;
    • 在css中还有paading-top,padding-right,padding-left,padding-bottom分别用来指定四个方向的内边距

    3,边框(border)

    • boeder:大小 颜色 边框样式;
    • 也可使用border-top/left/right/bottom来分别指定四个方向的边框

    4,外边距(margin)

    • 用法和badding类似!
    • 当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等,margin:0 auto;可以是元素居中。

    display:修改元素的性质

    可选值:

    • block:设置元素为块元素
    • inline:设为行内元素
    • inline-block: 设置为行内块元素
    • none:隐藏元素(元素将在页面中完全消失)

    visibility:是否隐藏元素

    可选值:

    • visible:可见的
    • hidden:隐藏的

    overflow:控制内容溢出的情况

    可选值:

    • visible: 默认值
    • scroll:添加滚动条
    • auto:根据需要添加滚动条
    • hidden:隐藏超出盒子的内容

    文档流的概念:

    文档流指的是文档中可现实的对象在排列时所占用的位置。

    浮动:float 指的是元素脱离文本流,在父元素中浮动起来

    可选值:

    • none:不浮动
    • left:向左浮动
    • right 向右浮动
      当一个元素浮动以后将会自动变为一个块级元素,并且不能在改变!
      浮动元素不会改变父元素的高度!

    相关文章

      网友评论

          本文标题:盒子模型(上)

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