css盒模型

一、css盒模型

概念：css盒模型是css的基石，主要用来设置元素如何显示以及元素间的相互关系，html中的每个元素都有自己的盒模型。

组成：css盒模型是由content(内容)，padding(内边距，填充),border(边框)，margin(外边距)四部分组成。

1.content

语法：
width:数值+单位;
height:数值+单位;

注：除了设置为0以外，设置width和height时都要加单位

2.padding

a）设置一个值

padding:20px; 上，下，左，右均为20px

b）设置两个值

padding:30px 10px; 第一个值代表上下为30px，第二个值代表左右为10px

c) 设置三个值

padding:30px 0px 5px; 第一个值代表上30px，第二个值代表左右为0，第三个值代表下5px

d) 设置四个值

padding:30px 20px 10px 5px; 顺时针方向依次为上30px，右20px，下10px，左5px

e) 还可以单独设置某个方向的padding值

padding-left:30px; （left还可以更改为top,right,bottom）

注：
I.padding不允许设置负值
II.背景可以延伸到padding区域
III.如果容器本身设置了宽高，那么设置padding后，要在原来宽高的基础上减去设置的padding值，保证总宽高不变
IV.如果需要调整子元素在父元素中的位置关系，通过给父元素设置padding来实现

3.border

a)设置边框样式

语法：border-style:solid(实线)|dashed(虚线)|dotted(点线)|double(双线);

b)设置边框样色

语法：border-color:颜色值;

c)设置边框宽度

语法：border-width:数值+单位;

d)边框属性简写方式

语法：border:宽度 线型 颜色;

eg: border:5px solid blue;

e)还可以单独设置某一个方向的边框

语法：border-right:5px dashed blue; （right还可以更改为top,bottom,left）

f)去掉某个方向的边框

语法：border-right:none|0;

注：
I.如果容器本身设置了宽高，那么设置了border后，要在原来宽高的基础上减去设置的border值，保证总宽高不变
II.背景可以延伸到border区域，当设置为实线时会遮挡背景

4.margin

语法：margin:数值+单位;

注：margin属性值的设置方法同padding

注：
I.背景不能延伸到margin区域
II.margin可以设置负值
III.当需要调整元素之间的位置关系时，给需要调整的元素添加margin属性

标准盒模型的总宽度 = width+左右padding+左右border+左右margin;
标准盒模型的总高度 = height+上下padding+上下border+上下margin

二、容器溢出

语法：overflow:visible|hidden|scroll|auto|inherit;

visible 默认值，溢出部分不会被裁剪，显示在框之外

hidden 溢出部分内容会被隐藏掉

scroll 溢出部分的内容以滚动条的形式查看，如果没有溢出，显示默认滚动条

auto 当容器有溢出时，以滚动条的形式查看剩余内容

inherit 规定应该从父元素继承overflow的属性值

注：还可以单独设置某一个方向的溢出，语法如下：

overflow-x:hidden|auto|scroll;
overflow-y:hidden|auto|scroll;

三、文本溢出

语法：text-overflow:clip(不显示省略号)|ellipsis(显示省略号);

注：

单行文本省略号的设置，四个条件缺一不可：

1.给容器设置一个宽度 width:value;

2.设置文本强制在一行显示 white-space:nowrap;

3.溢出部分隐藏不可见 overflow:hidden;

4.显示省略号 text-overflow:ellipsis;

注：
a）此方法只适用于单行文本省略号的设置，多行文本省略号的设置可借助js截取字符串的功能来实现，或者交给后端处理
b）以上四个属性要给文本所在最近的元素添加