盒子模型小计

发布于 2016-12-17  8.08k 次阅读


盒子模型
CSS中的display属性:可以更改元素本身的显示盒子类型.
1.块级元素:display:block;可以设置元素尺寸,隔离其他元素.....
2.行内:display:inline;不可以设置元素尺寸,不会隔离其他元素.....
3.行内块级:display:inline-block;以设置元素尺寸,不会隔离其他元素.....
4.隐藏:display:none;不可见,不占位
注意:display有很从属性值,由于值太多而且很多值浏览器对它支持不好,不一一讲,自己查手册.
visibility:visible;它有三个值(visible,hidden,collapse)它就算隐藏也占位,collapse隐藏表格的行与列,如果不是表格,则与hidden一样....

浮动:float
float:none;默认值,不浮动.
float:left;浮动元素靠左
float:right;浮动元素靠右

清除元素右左的浮动clear:
clear:left;本元素左边不让有浮动元素
clear:right;本元素右边不让有浮动元素
clear:both;两边都不让有浮动元素.

盒子模型要点:
元素尺寸:
width:宽度
height:高度
min-width:最小宽度
min-height:最小高度
max-width:最大宽度
max-height:最大高度
元素内边距:padding
padding-top:
padding-right:
padding-bottom:
padding-left:
元素外边距:margin
margin-top:
margin-right:
margin-bottom:
margin-left:
元素的边框:border
border-top:(border-top-width border-top-style border-top-color)
border-right:
border-bottom:
border-left:
处理溢出:
overflow:CSS2的样式,处理溢出,有四个值,auto,hidden,scroll,visible默认值
auto与scroll:的区别 auto如果溢出则显示滚动条,如果不溢出则不显示滚动条
但是scroll则不管是否溢出,它都显示滚动条.
overflow-x:水平方向溢出处理
overflow-y:垂直方向溢出处理
box-sizing:

border-radius:圆角边框

图片边框:
border-image-source: //引入图片地址
border-image-slice: //切割图片
border-image-width: //宽度
border-image-repeat: //排列方式
border-image-outset: //向外扩张
border-image: