zoukankan      html  css  js  c++  java
  • 网页布局02 盒子模型

    基本概念

    盒子模型,英文即box model。无论是div、span、还是a都是盒子,他们在网页上都要占据一定的空间,在进行布局的时候需要考虑他们所占据的空间大小。

    例外情况:图片、表单元素作为文本处理,不作为盒子模型计算。

    盒子模型主要CSS属性


    盒子的属性有5个:width、height、padding、border、margin。如下:

    width和height:内容的宽度、高度(不是盒子的宽度、高度)。
    padding:内边距。
    border:边框。
    margin:外边距。

    盒子模型的类型

    通过css的属性box-sizing设置盒子模型的类型,该属性值有两个:

    content-box:表示标准盒子模型

    border-box:表示IE盒子模型

    标准盒子模型

    标准盒子模型占据空间计算方式(横向为例):

    横向占据空间=width  +  paddingLeft  +  paddingRight  +  borderLeft  +  borderRight  +  marginLeft  + marginRight

    IE盒子模型

    IE盒子模型占据空间计算方式(横向为例):

    横向占据空间=width    +  marginLeft  + marginRight

  • 相关阅读:
    C#监听文件
    用bootstrapValidator来验证UEditor
    .net 在不同情况下调用带soapheader的webservice的方式
    MyBatis1
    随堂笔记2
    数学复习笔记 2018年-2019年
    药方
    随堂笔记一
    友谊藏在门背后,2
    友谊藏在门背后
  • 原文地址:https://www.cnblogs.com/rask/p/9913070.html
Copyright © 2011-2022 走看看