盒子模型

盒子模型：包括 内容区(content)、内边距(padding)、边框(border)、外边距(margin)

一、标准盒子模型

1、边框   border

1.1、设置边框状态

border-type: dashed;         # 虚线

border-type: dotted;           # 点状线

border-type: solid;             # 单实线

border-type: none;             # 无

border-type: double;          # 双实线  

1.2、设置边框宽度

border-width:value；         

注：value注意添加单位

1.3、设置边框颜色

border-color:颜色；

1.4、简写border

可按照顺序：style，width，color简写,中间用空格隔开

如：border:soild 50px yellow;

1.5、设置四边

在border后面加上-方位，可以分别设置四个方位的border

border-top                      # 上

border-bottom                # 下

border-left                      # 左

border-right                    # 右

2、内边距   padding

padding赋值方式

padding:50px；          # 上下左右的内边距都为50px

padding:10px  20px；       # 按照上下 、左右顺序给内边距进行赋值

padding:10px  20px  30px;       # 按照上、左右、下的顺序给内边距进行赋值

padding:10px  20px  30px  40px       # 按照上、右、下、左的顺序给内边距进行赋值

可单独设置一方向填充

    如：上方向padding-top:10px;    右方向pahdding-right:10px;   

           下方向padding-bottom:10px;     左方向padding-left:10px;

3、外边距   margin

margin赋值方式

margin:50px；          # 上下左右的内边距都为50px

margin:10px  20px；       # 按照上下 、左右顺序给内边距进行赋值

margin:10px  20px  30px;       # 按照上、左右、下的顺序给内边距进行赋值

margin:10px  20px  30px  40px       # 按照上、右、下、左的顺序给内边距进行赋值

可单独设置一方向填充

    如：上方向margin-top:10px;    右方向margin-right:10px;   

           下方向margin-bottom:10px;     左方向margin-left:10px;

4、外边距的合并

4.1、当两个盒子纵向排列的时候，他们的距离为两个盒子中最大的那个外边距

4.2、当两个盒子横向排列的时候，他们的距离为两个盒子的外边距之和

5、盒子尺寸的计算

计算公式：

宽 =左右margin+左右border+左右padding+内容width

高 =上下margin+上下border+上下padding+内容height

二、怪异盒子模型

设置盒子模型的类型   box-sizing

设置标准盒子模型(默认)：    box-sizing:content-box;

设置怪异盒子模型：             box-sizing:border-box;

怪异盒子模型在定义边框及内边距时不会改变盒子的尺寸

三、内容物溢出

overflow:visible/hidden/scroll/auto；

visible：默认值，内容不会被裁减，会呈现元素框之外 

hidden：内容被裁减，其余内容不可见

scroll：内容被裁减，滚动条显示其余内容

auto：如果内容被裁减，则浏览器以滚动条显示其余内容

 

文字溢出处理

white-space: nowrap;

overflow: hidden;

text-overflow: clip/ellipsis/string;

clip：修剪文本

ellipsis：显示省略符号来代表被修剪的文本

string：使用给定的字符串来代表被修剪的文本

注：text-overflow必须和white-space: nowrap;及overflow: hidden;一起使用