HTML+CSS盒模型

一、Padding

1、padding用来调整内容在容器中的位置关系；padding的属性要添加到父元素上。

padding值是额外加在元素原有的大小之上的，若想保证元素大小不变，需从元素宽或高上减掉后添加的padding值。

2、padding属性值的四种方式

四个值：上右下左 padding：10px 20px 30px 20px

三个值：上左右下

两个值：上下左右

一个值：四个方向

二、margin

边界：margin在元素外边的空白区域，被称外边距

三、浮动

横向排版，在一个DIV里，div未定义高度，里面有具有浮动属性的盒子，则父div无法撑开。

1、清除浮动

四、background-position 按外部容器的位置

语法：
background-position : length || length
background-position : position || position
取值：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right

background-position:-50% -50%;

等同于x：-{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：-{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。

添加空盒子，子元素添加一个空盒子 .clear{clear:both}

父级元素添加 .clear{display:block;overflow:hidden}

父级元素添加:.clear{dsiplay:block;clear:both;visibility:hidden;content:''} .clear{zoom:"1"}

巴特西

HTML+CSS盒模型

最新文章

热门文章