day7
content宽度和高度
高度的计算原则是
/*外盒尺寸计算(元素空间尺寸)*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算(元素实际大小)*/
Element Height = content height + padding + border (Height为内容高度)
Element Width = content width + padding + border (Width为内容宽度)
1.width,height仅使用块级元素
2.计算盒子总高度时,还应考虑上下两个盒子的外边距合并情况
3.如果一个盒子没有给定宽度和高度时,padding不会影响盒子大小
盒子模型布局稳定性
width > padding > margin
1.margin外边距合并问题,ie6 margin加倍的bug,所以最后使用
2.padding会影响内盒的大小,经常使用加减法
3.width 宽度剩余法,高度剩余法
CSS3盒模型
1.content-box :盒子模型 width + padding + boder
2.border-box:/盒子模型即为宽度 padding 和boder 都包含再width/
1.默认设置,优先保证内部的内容所占区域不变
2.boder-box 优先保证自己盒子的所占区域不变,对内容进行压缩
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
1.前两个属性一定要有,其他的可以省略
2.外阴影(outset默认值,内阴影inset
浮动(float)
普通流(normal flow)
css中三种定位机制:普通流,浮动,定位
标签从上而下,从左至右顺序排序的意思,这种布局称之为普通流
浮动(float)
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。
选择器{float:属性值;}
属性值 | 描述 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动(默认值) |
浮动详细内幕特性
浮动脱离标准流,不占位置,会影响标准流。浮动只有左右浮动。
标准流父级
1.子盒子浮动不会压住padding
2.浮动的元素会找最近的父级元素对齐,不会超出内边距的范围
浮动的目的是,让多个块级元素同一行显示
float 浮漏特
浮:浮起来,漂浮在其他标准流盒子上面
漏: 加了浮动,不占位置,原来的位置就漏给了标准流的盒子
特:特别注意,首先浮动的盒子和标准流父级搭配使用,特别注意,浮动会使元素变成行内块元素
版心和布局流程
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等。
清除浮动
在CSS中,clear属性用于清除浮动,其基本语法格式如下:
选择器{clear:属性值;}
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
闭合浮动,
额外标签法
w3c推荐的清除浮动方法
优点:通俗易懂,书写方便
缺点:添加了许多无意义的标签,结构化更差。
父级添加overflow属性方法
可以给父级添加overflow:hidden auto scroll
优点:代码简介
缺点:内容增多的时候,不会自动换行,无法显示溢出元素
使用after伪元素清除浮动
:after 的升级版
优点:符合闭合浮动的思想,结构语义化正确
缺点: ie6不支持after,
使用before和after双伪元素清除浮动
清除浮动:clear:both 块级元素下移,直到两边没有浮动元素
闭合浮动:使浮动元素闭合,使父元素能够包含浮动元素,从而减少浮动影响
代码更简洁
ie6 不支持:after