盒子模型
1.盒模型是CSS布局的基石
他规定了网页元素如何显示以及元素之间的相互关系
CSS定义所有的元素都可以拥有项盒子模型一样的外形和平面空间
包括:
边框(border)
外边距(margin)
内边距(padding)
内容区(content)
盒模型的类型:
1.标准模式
2.怪异模式
盒的内容
1.overflow:属性指定如果内容移除一个元素的框
取值:
visible/hidden/scroll/suto
visible:默认值,内容不会被裁剪掉,会呈现在元素框之外
hidden:内容会被剪裁,其余的内容不可见
scroll:内容会被剪裁,滚动条显示其余的内容
atuo:如果内容被剪裁,则被浏览器以滚动条显示其余内容
2.overflow-x:指定如果他溢出了元素的内容区域是否剪裁左边或右边边缘的内容
3.overflow-y:指定如果他溢出了元素的内容区域是否剪裁上边和下边边缘的内容
4.text-overflow:指定当文本溢出包含他的元素:
clip:修剪文本
elipsis:显示胜率符号来代表被修剪的文本
注意:
text-overflow必须和overflow:hidden;white-space:nowarp;一起使用
边框
元素的边框:是围绕元素的内容和内边距的一条或多条线
属性允许你规定元素边框的样式、宽度、颜色
border:用于把针对四个边的属性设置在一个声明中
border-style:用于设置元素所有边框样式,或者可以为单个边框设置特有的样式、
border-width:用于设置边框的宽度
border-left:用于将左边框的所有属性设置到一个声明中
top
bottom
right
border-style:取值:
soild/dashed/double/none
注意:
如果要设置盒子的边框,必须制定边框的线型,只有设置了线型才能是指相对应的属性(颜色和宽度)
padding的使用方法
padding:
填充,元素碧娜狂和元素内容之间的区域,称之为内边距
用法:
用来调整内容在容器中位置关系,或者理解调整子元素在父元素中的位置
注意:
padding属性需要添加在父元素上,padding值是额外加载元素原有大小上的值;
如果想保证元素大小不变,需要充元素的宽或高上减掉后在加上padding值
属性值的四种方式:
1.四个值:上、下、左、右{padding:10px 10px 10px 10px;}
2.三个值:上、左右、下:
3.两个值:上下、左右;
4.一个值:四个方向;{padding:2px}
说明:可以单独设置一个方向上的填充:
如:padding-top;
margin的使用方式
margin:盒子与盒子之间的距离
属性:
margin-top:上边界
margin-right:右边界
margin-bottom:下边界
margin-left:左边界
属性值表示的四种方式(和padding一样)
说明:
在浏览器中横向居中:{margin:0 atuo;}
同样可以单独设置方向边界
外边距的合并
1.当两个盒子纵向排列的时候,他们的距离为两个盒子之间最大的那个外边距
2.当两个和子横向排列时,他们的距离是两个和子的外边距之和
盒子的计算
计算公式:
宽:左右的margin+左右的border+左右的padding+内容width
高:上下margin+上下border+上下padding+内容height
例如:
一个盒子的margin为 20px;
border为1px;
padding 为10px;
content的宽:200px;高50px;
宽:20*2+1*2+10*2+200=262px;
高:20*2+1*2+10*2+50=112px;
注意:设置padding和margin会撑大盒子,任何解决?
根据外边距、内边距、边框的大小重新计算盒子中的内容宽度和高度