CSS盒子模型

简介: 一、CSS盒子模型      盒子的构成为:     1.盒子的内容区:content.     2.盒子的边框:border(border-top、border-right、border-bottom、border-left).

一、CSS盒子模型

  CSS盒子模型

  盒子的构成为:

    1.盒子的内容区:content.

    2.盒子的边框:border(border-top、border-right、border-bottom、border-left).

    3.盒子的边框与内容之间的距离:padding(padding-top、padding-right、padding-bottom、padding-left).

    4.盒子与盒子之间的距离:margin(margin-top、margin-right、margin-bottom、margin-left).

二、盒子的相关属性:

  [1]:内容属性:宽,高;

  [2]内填充属性padding(在定义盒子的宽度时。要考虑到内填充、外填充、边框、边界的存在)

  (在使用外边距时一定要注意浏览器的兼容性,不兼容的情况下,可以使用给外面的盒子加边框的方法来解决此问题;除了值为零的情况下,所有的非零的值后面都要加单位)

  [3]外填充属性margin(内外填充属性都可以使用关键字-方向的方法来进行css操作,但一般还是使用直接用关键字的方法来控制,如:margin-topmargin-rightmargin-bottommargin-left在控制时,按照上右下左顺时针方向进行操作,规则为不足时到对边去找,如padding20px 30px 50px 表示上边距为20,下边距为50,左右边距均为30

相关文章
|
3月前
|
前端开发
玩转CSS盒子之 三角形盒子
玩转CSS盒子之 三角形盒子
28 0
|
6月前
|
前端开发
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
N..
|
22天前
|
前端开发
CSS盒子模型
CSS盒子模型
N..
13 0
|
1月前
|
前端开发 容器
CSS之弹性盒子Flexible Box
CSS之弹性盒子Flexible Box
|
2月前
|
前端开发 JavaScript 容器
CSS学习笔记(一) 盒子模型
CSS学习笔记(一) 盒子模型
|
6月前
|
前端开发
|
6月前
Css-弹性盒子
Css-弹性盒子
52 0
|
3月前
|
Web App开发 前端开发 容器
CSS:盒子模型
CSS:盒子模型
58 1
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影
|
3月前
|
前端开发
CSS【盒子模型】
CSS【盒子模型】
58 0