一.
盒模型:
垂直的相邻外边距会重叠只取最大值
子元素设置margin 和父元素相邻会给父元素
让父元素不被传递 则可以给父元素设置一个边框或内边距
二.
浏览器默认样式: margin padding
内联元素盒模型:
1.不能设置宽高
2.可以水平垂直内边距 不会影响布局
3.可以设置边框
4.可以设置水平外边距 相邻两个不重叠
三
display:
1.内联元素变成块元素:block
2.将一个元素作为内联元素:inline
3.将一个元素设置为行内块元素:inline-block
4.隐藏元素:none
visibility:
1.设置元素是否可见 visible是(默认) hidden不显示
2.消失后占据位置
四.
overflow:
处理溢出的类容
1.Visible 默认 不做处理
2.hidden 溢出内容被剪切不会被显示
3.scroll 以滚动条显示溢出
4.auto 根据需要添加滚动条
五.
文档流:
处于页面最底层的位置
元素在文档流的特点:
1.块元素独占一行 自上而下排列
2.块元素宽带默认100%
3.块元素的高度默认
4.内联元素依次排列 默认被类容撑开
六
浮动:floa
1.元素立即脱离文档流 它下边的元素会向上移动
2.元素浮动后会向页面左上或右上漂浮 直到遇到父元素或者其他浮动元素
3.浮动元素上边是一个没有浮动的块元素 则浮动元素不会超过块元素
4.浮动元素不会发生越位上一个元素
七.
浮动:floa
1. 浮动元素不会盖住文字
2.块元素脱离文档流后 高度和宽度会被内容撑开
3.内联元素脱离文档流后会变成块元素
八.
高度塌陷问题:
为了子元素浮动会导致父元素高度塌陷:
1.将父元素高度定义值,但是父元素
解决高度塌陷问题:
2.页面元素隐含属性 BFC 该属性可以设置打开或者关闭 默认关闭,开启后元素会:
1.父元素的外边距不会和子元素外边距重叠
2.开启BFC的元素不会被浮动元素覆盖
3.父元素开启BFC 可以包含浮动的子元素
如何开启BFC:
1.设置元素浮动 会导致宽度丢失
2.设置元素绝对定位
3.设置元素inline-block
4.将元素的overflow设置非visible的值(outo)IE6及以下不支持 IE6有另一个隐藏属性叫hasLayout,开启方法:直接设置元素zoom为1
解决高度塌陷的最终方案:
1.clear:清除其他元素对当前元素的影响
属性值:left right both(两侧)
父子元素解决方案:
1.添加一个块元素设置clear
2..clearfix:after{content“”
display:block;
clear:both;}
九.
导航条:
1.text-decoration: none;取消链接下划线
2.list-style:none; 取消无序列表前面的序号
十
信息栏:
1.文字行高和父元素的高度一致 垂直居中
十.
相对定位:
position 可选值:
1.static 默认 不开启
2.relative 开启元素相对定位
3.absolute 开启绝对定位
4.fixed 开启元素固定定位
开启元素定位后:
1.相对于元素的原来位置进行定位
2.不会脱离文档流
3使元素提升一个层级
4.不会改变元素性质 块还是快 内联还是内联
绝对定位
position:absolute
开启后:
1.会使元素脱离文档流
2.绝对定位相对于离他最近的祖先元素定位
3.绝对定位会使元素提升一个层级
4.绝对定位会改变元素性质 内联元素会改变为块元素
固定定位:
position:fixed
1.和绝对定位一样
2.不同的是:固定定位是相对于浏览器位置定位
3.固定在浏览器窗口位置 不会随着滚动条移动
4.IE6不支持
十一.
层级显示:
1.同层级下 后面的元素会盖住前面的
2.通过z-index属性可以修改层级
3.z-index指定一个数值 该值越层级越高
4.对于没有开启定位的元素不能开启z-index
5.父元素层级不会盖住子元素
十二
opacity 透明元素
1.可以设置元素透明
2.0~1取值
3.在IE8以下的浏览器中不支持 需要使用filter:aloha(opacity=透明度 取值0-100)
十三
背景图片:
background-repeat:repea 左右平铺
backguround-repeat:no-repeat 不平铺
repeat-x 沿着x轴平铺
十四
background-position:两个值指定一个背景图片位置
1.设置便宜量 水平 和垂直
2.left top...组合
3.
background-attachment:fixed
1.永远相对于浏览器 不会随着滚动条移动