盒子模型:包括 内容区(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;一起使用