CSS盒子模型-内边距(padding)

html-css022

CSS盒子模型-内边距(padding),第1张

padding属性用于设置内边距,即边框与内容之间的距离。

值的个数 /表达意思

padding:5px 1个值,代表上下左右都有5像素内边距;

padding:5px 10px 2个值,代表上下内边距是5像素 左右内边距是10像素;

padding:5px 10px 20px3个值,代表上内边距5像素,左右内边距10像素,下内边距20像素;

padding:5px 10px 20px 30px 4个值,上是5像素,右是10像素,下是20像素,左是30像素,顺时针。

以上4种情况,实际开发都会遇到。

给指定盒子添加padding值之后:

备注 :我们需要在不同设备的不同尺寸屏幕下去浏览网页,传统的网页布局方式很难满足响应式布局的需要。因此css3提出了一些全新的布局属性,包括: 弹性盒子模型 , 多列属性 , 响应式布局 等等。弹性盒子模型的最大特征在于动态修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局。

说明 :盒子模型的内容范围包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。盒子模型就是通过div和css样式来设计一个可以添加逻辑的效果。

备注 :内边距(padding)在 content 外,边框内。内边距有1个参数时,上下左右外边距都为该参数值;2个参数时,第一个参数为 上下 外边距值,第二个参数为 左右 外边距值;4个参数分别代表 上右下左 外边距值。

边框可以创造出效果出色的边框,并可以应用于任何元素。 基本的边框属性

简化写法

备注: border: 1px solid red三个参数分别为边框的宽度、样式和颜色属性。

css3提供的边框属性

eg1 :圆角边框的绘制

阴影属性(box-shadow)的4个参数分别代表:背景阴影 向右 移动10个像素,再 向下 移动20个像素;阴影 透明度 ;阴影 颜色 。

备注:围绕在内容边框的区域就是外边距(margin),外边距默认是透明区域,外边距接受任何长度单位和百分数值。外边距和内边距的属性比较相似。margin的参数个数和对应代表大含义和padding一致。

盒子模型示例

说明:最外层的div为容器层,之后为边框、内边距和内容区域。

说明:外边距合并就是一个叠加的概念。外边距合并遵循边距大的一方,即元素1的外边距为10px,元素2的外边距为20px,则元素1和元素2间的距离为20px;元素1的外边距为10px,元素2的外边距为10px,则元素1和元素2间的距离为10px。

(1) 弹性容器属性

(2) 弹性子元素属性

eg1