Web前端基础——盒子模型

(1)盒子模型的作用:

        布局网页,摆放盒子和内容

(2)盒子模型重要组成部分:

  • 内容区域 - width & height
  • 内边框 - padding(出现在内容与盒子边缘之间)
  • 边框线 - border
  • 外边框 - margin(出现在盒子外面)

Web前端基础——盒子模型_第1张图片

 (3)盒子模型——边框线

属性名:border(bd)

属性值:边框线粗细  线条样式  颜色 (不区分顺序)

常用线条样式:实线-solid        虚线-dashed        点线-dotted

  • 设置单方向边框线。
  • 属性名:border-方位名词(bd+方位名词首字母(上-top 下-bootom 左-left 右-right))
  • 属性值:边框线粗细  线条样式  颜色 (不区分顺序)

(4)盒子模型——内边距

作用:设置内容与盒子边缘之间的距离。

属性名:padding/padding-方位名词

  • padding多值写法:
取值个数 示例 含义
一个值 padding:10px 四个方向内边距均为10px
四个值 padding:10px 20px 40px 80px 上:10px  右:20px  下:40px  左:80px
三个值 padding:10px 40px 80px; 上:10px  左右:40px  下:80px
两个值 padding:10px 80px 上下:10px  左右:80px

 (5)盒子模型——尺寸计算

  • 默认情况:盒子尺寸=内容尺寸+border尺寸+内边距尺寸
  • 给盒子加border/padding会撑大盒子,margin不会撑大盒子
  • 解决:
    • 手动做减法:减掉border/padding的尺寸
    • 内减模式:box-sizing:border-box

Web前端基础——盒子模型_第2张图片 

 (6)盒子模型——外边距

作用:拉开两个盒子之间的距离,不会撑大盒子

属性名:margin

提示:与padding属性值写法,含义相同。

margin: 0 auto; ==>实现版心居中(前提一定要设置盒子宽度)。

 

你可能感兴趣的:(Web前端基础,前端,html)