css布局
2015-06-14 11:32
676 查看
流式布局
display: inline | block | inline-block
block独占一行默认宽度会填满父的宽度,可设width,height,padding,margin. block可以包含block,inline,inline只能包含inline,也有例外。
inline同行显示直到宽度排满,宽度随元素内容显示,width,height无效,水平方向padding-left, padding-right, margin-left, margin-right有效,垂直方向padding-top, padding-bottom, margin-top, margin-bottom无效
inline-block同行显示,内容可以设置宽高
float: left | right | none | inherit(继承父的float属性)
浮动,脱离文档流,如果前一个元素是文档流中的元素,则浮动元素的顶部和前一个元素的底部对其,如果前一个元素也是浮动元素,则跟在前一个元素同行后面,如果宽度不够则挤在下面。
clear : none | left | right | both
清除浮动,添加后左侧或右侧或两边不允许浮动存在,如果左侧是浮动元素则换行不在同行显示,只影响添加clear的元素,不影响其他元素。
position: static | relative | absolute | fixed | auto
配合left top 使用
static 默认(相当于不设position) 不能用z-index
relative 相对于元素在流中的位置偏移,任然在流中,其他元素按照它偏移前的位置对待,可用z-index
absolute 相对于最近的已定位的(relative,absolute)祖先偏移,如果没有已定位的祖先则相对于浏览器窗口,脱离流,它后边的元素会补上它在流中的空缺,可用z-index
fixed 相对于浏览器窗口偏移,可用z-index
overflow //visible,hidden,scroll,auto overflow-x,overflow-y
BFC(Block fomatting context)
生成条件:
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
作用:
1. BFC不与float元素重叠
2. BFC的高度会考虑float元素
3. 同一个BFC相邻margin重叠
!important
white-space:nowrap
display: inline | block | inline-block
block独占一行默认宽度会填满父的宽度,可设width,height,padding,margin. block可以包含block,inline,inline只能包含inline,也有例外。
inline同行显示直到宽度排满,宽度随元素内容显示,width,height无效,水平方向padding-left, padding-right, margin-left, margin-right有效,垂直方向padding-top, padding-bottom, margin-top, margin-bottom无效
inline-block同行显示,内容可以设置宽高
float: left | right | none | inherit(继承父的float属性)
浮动,脱离文档流,如果前一个元素是文档流中的元素,则浮动元素的顶部和前一个元素的底部对其,如果前一个元素也是浮动元素,则跟在前一个元素同行后面,如果宽度不够则挤在下面。
clear : none | left | right | both
清除浮动,添加后左侧或右侧或两边不允许浮动存在,如果左侧是浮动元素则换行不在同行显示,只影响添加clear的元素,不影响其他元素。
position: static | relative | absolute | fixed | auto
配合left top 使用
static 默认(相当于不设position) 不能用z-index
relative 相对于元素在流中的位置偏移,任然在流中,其他元素按照它偏移前的位置对待,可用z-index
absolute 相对于最近的已定位的(relative,absolute)祖先偏移,如果没有已定位的祖先则相对于浏览器窗口,脱离流,它后边的元素会补上它在流中的空缺,可用z-index
fixed 相对于浏览器窗口偏移,可用z-index
overflow //visible,hidden,scroll,auto overflow-x,overflow-y
BFC(Block fomatting context)
生成条件:
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
作用:
1. BFC不与float元素重叠
2. BFC的高度会考虑float元素
3. 同一个BFC相邻margin重叠
!important
white-space:nowrap
相关文章推荐
- CSS清除浮动
- CSS3 速查手册
- CSS设计指南之一 HTML标记与文档结构
- CSS网页布局全精通
- phpcms表单向导更改前台代码使其能修改表单样式
- 盒相关样式
- js基础——cssText
- CSS3学习笔记(下)
- HTML中引入CSS的方法
- jsp——学习篇:简单使用CSS
- CSS小知识---table表格
- CSS——display
- css小知识---input输入块
- 编写CSS代码良好习惯介绍
- CSS3基础选择器
- CSS的基本使用
- GridControl详解(六)样式设置
- [Q]如何将图纸打印为黑白的及设置打印样式
- div+css截取字符串在规定长度,超出部分用。。。代替
- CSS中em单位和px单位的区别