css课后笔记：盒属性

Css将HTML中所有元素都看作盒子

盒子由四部分组成：margin边界，border边框，padding填充，content内容

一、边界

margin-top、margin-right…bottom、left设置盒子顶部/右部/下部/左部边界的距离。

应用：

1、用于删除浏览器四个方向的预留边界（约为8px）。

2、*{ margin:0; }用于设置块级元素在其父元素水平方向的居中问题。将块级元素的左边界和右边界均设置为auto，该块级元素机会在其父元素内部水平居中。.box{margin:0 auto; }

二、填充

padding-top/right/bottom/left 设置盒子顶部/右部/下部/左部填充的距离。

盒模型书写填充后，整个盒模型的宽度和高度会发生变化。在盒子添加填充距离后，若仍然希望其宽度和高度为原始尺寸，则按如下进行设置

width属性设置为 ：原始宽度- (padding-top) - (padding-right)

height属性设置为：原始高度- (padding-top) -(padding-bottom)

padding可以去掉列表左侧为项目符号/编号预留的40px距离：padding:0;

三、边框

1边框粗细

border-top/ right/ bottom/ left-width设置盒子顶部/右部/下部/左部边框的粗细。

border-width：top right bottom left;

2边框样式与颜色

border-top/right/bottom/left-style

border-top/right/bottom/left-color

3特定设置

border-top/ right/ bottom/ left：设置顶部/右侧/下侧/左侧边框，包括粗细、样式、颜色。

四、部分涉及功能

文字的省略符：

white-space: nowrap; /*强制不换行*/

text-overflow: ellipsis; /*文字溢出显示省略符*/

overflow-x:hidden; /*水平方向溢出异常*/

border-radius：设置元素四角的圆角效果，取值为圆角半径值。

cursor:pointer 设置鼠标经过元素时鼠标的外观（手型鼠标）。