盒模型

盒模型的四要素:宽高(width+height)、内边距(padding)、边框(border)、外边距(margin)。依次是从内到外。

宽高

宽高:宽 width 高 height 单位是像素 px

内边距

内边距:padding后面可以跟1~4个值。赋值顺序是上右下左。

  • 当1个值时,上右下左一样。
  • 当2个值时,第一个值是上下,第二个值是右左。
  • 当3个值时,第一个值是上,第二个值是右左,第三个值是下。
  • 当4个值时,依次是上右下左。
    单独赋值:
  • 上:padding-top
  • 右:padding-right
  • 下:padding-bottom
  • 左:padding-left
    padding会增加盒子的面积。

边框

语法示例:border:1px solid red;复合写法。
单独写法:(三者缺一不可)

  • 线宽:border-width
  • 线型:border-style:solid 实线 dashed 虚线 dotted 点线
  • 线色:border-color
    单独赋值:同padding单独赋值。
    border会增加盒子的面积。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 盒模型 边框属性 什么边框? 边框就是环绕在标签宽度和高度周围的线条 边框属性的格式 连写(同时设置四条边) bo...
    极客江南阅读 10,020评论 12 74
  • 1、盒模型的初步认识一个真正的盒子包括:内容宽,内容高,边框,内边距,外边距width:内容宽height:内容高...
    落崖惊风yxy阅读 392评论 0 0
  • python的深浅拷贝,使用python的童鞋并不陌生,但是在这里面有几点需要注意的,我们忽略的点,在此总结一下,...
    KillerManA阅读 450评论 3 0
  • 夜来飞雪满汀州,压断竹枝万树愁。 却看青松犹静寂,英姿不改只白头。
    莫愁Jessie阅读 335评论 6 12
  • 在高铁站遇到L,于我而言真的是要惊掉下巴。而且是在我家乡的高铁站,偶遇去当地出差的他。我不免怀疑,这是老天再向我暗...
    蔷薇青青阅读 154评论 0 0