1、CSS盒模型
释义:网页中所有元素都可以看作是一个盒子。
作用:盒内样式修饰、盒子位置布局
组成:外边距margin、内边距
padding、边框border
方向:上top、右right、下bottom、左left
2、盒模型三维立体层次结构【从上到下】
(第一层)边框border
(第二层)元素内容content和内边距padding
(第三层)背景图片层background-image
(第四层)背景颜色层background-color
(第五层)外边距margin
3、外边距:margin
margin-top 上边界
margin-right 右边界
margin-bottom 下边界
margin-left 左边界
(1)可以分别设置,也可以一起设置。
(2)只有一个值表示四边外边距一样;两个值表示【上下】、【左右】;四个值表示:上、右、下、左。
(3)margin:0px auto; 块级元素水平居中 | 行级元素效果为上左边界为0px.
外边距的问题(尽量少用):
(1)上下外边距会叠压
(2)父级包含子级时,子级的margin-top会传递给父级(建议使用父级的内边距替代外边距)
4、边框:border:border-color颜色、border-width宽度、border-style线型、border-radius边框弧度
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框 【transparent隐藏边框】
可以分别设置,也可以一起设置。都有color、width、style属性。【border-style是边框线型,常用属性值为:solid实线、dashed虚线】
5、内边距:padding
padding-top 上边距
padding-right 右边距
padding-bottom 下边距
padding-left 左边距
可以分别设置,也可以一起设置。只有一个值表示四边内边距一样;两个值表示【上下】、【左右】;四个值表示:上、右、下、左。
6、元素的实际宽高[元素的实际占位]
盒子高度 = height属性 + 上下填充高度 + 上下边框高度
盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度
【填充指的是内外边距】
7、display
none:不显示不占位置 ——与visibility的hidden比较 隐藏效果
block:块级元素效果 inline:行及元素显示 ——与visibility的visible比较 显示效果
inline-block:行块级元素效果。块级元素在一行显示,支持行内元素设置宽高,换行解析。不设置宽度由盒子内容撑开,IE6-7↓不支持。 ——与float比较内容不设置宽度由内容撑开。提升半层 vertical-align:
8、浮动属性——float
?默认的常规文档流:页面内容从上到下,从左到右排列。
?要使得DIV块换行显示,向右浮动,脱离常规文档流,使用浮动属性。
?属性值为:left(设置元素左浮动)、right(设置元素右浮动)、none(默认值不浮动)。
?浮动的三大显著特征
?DIV块元素失去“块状”换行显示特征,变为行内元素。
?紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示。
?占据行内元素的空间,导致行内元素围绕显示。
注:父块不设置高度,子块浮动,父块相当于无内容。解决办法:
(1)父级设置固定宽高
(2)同级元素设置margin-top
(3)子元素后添加清除浮动的空标签【IE6及以下,不设置高度的空白div(高度低于19px的div没有)空div在页面显示空块。设置font-size:0;可以消除,还剩两个像素的边框需要消除。】
(4)设置伪类清除浮动,父级其后清除浮动→.parent:after{ display:block;clear:both;content:"" } bat公司常用来清除的方法,兼容 ie8以上的版本浏览器
(5)子元素后利用<br clear="all"/>清除浮动。
9、清除属性——clear【清除浮动】
?clear作用
如果前一个元素存在左浮动或右浮动,则换行以区隔(使浮动换行);只对块级元素有效。
?clear属性的取值
?right 在左边不允许有浮动元素
?left 在右边不予许有浮动元素
?both 在左右两侧都不允许有浮动元素
?none 默认值,允许两侧有浮动元素
10、定位属性——position用于设置目标对象的定位方式
★absolute(绝对定位)——允许漂浮于页面上,相对于浏览器页面,不保留位置;【移动物】
★relative(相对定位)——相对定位,相对于原位置,保留原位置; 【 参考物】
★static(静态定位)——仅以页面作为参考(默认普通文档流方式)。
★fixed(绝对相对定位)——可以让元素漂浮于网页上层。
◇z-index设置漂浮层的层序,值越大漂浮层越浮于上面。前提是设置了absolute!
例:div { position:absolute; z-index:3; 6px; }