css之布局
css之布局
css布局元素主要有disiplay,float,clear,visibility,overflow,overflow-x,overflow-y.
css布局元素之【disiplay】
disiplay目前兼容的元素主要有none,inline,inline-block,block,table,inline-table,table-caption,table-cell,table-row,table-row-group,table-column,table-column-group,table-header-column,table-footer-group.【无继承值】
css【disiplay】元素之none.
当disiplay元素设置none时，float和positon属性不生效，并且不占据空间，visibility:hidden占据空间，clip也不占据空间，绝对定位设置大负值时，不占据空间，相对定位设置大负值时，不占据空间。overfollow:hidden不占据空间，设置透明值(opcity)，占据空间，可以点击。
disiplay:none和visibility:hidden区别主要在于占据空间，另一个不占据空间。第二个则是前者回流与渲染后者不占据。
什么是回流?
答：回流则是重新使该页面渲染一次，从而影响性能。
哪些影响会影响回流
答：改变窗口的宽高，改变字体(建议可以用rem),增删改内容，增删样式，内容发生改变时比如input,text输入属性时等等
如何避免回流
如果想改变某个div宽高等其它样式时，不应该改变style属性(即本身/css的宽高)，建议使css类、id。
避免使且table布局，因为html是流式布局，后面的元素不会影响前面的元素，然而table中的续行中的列宽会影响前面内容进行回流(reflow)和重绘(repaint)。
第三个是株连性，前者株连，后者不株连。
css【disiplay】元素之inline
如果该元素设置此元素，那么此元素为内联/行内元素，其主要特点为不独占一行，宽、高、行高不可以进行设置。可以设置padding和margin-right/left不可以设置margin-top/bottom值。ps:替换元素可以设置宽高，比如img\input等。
css【disiplay】元素之inline-block
如果该元素设置此元素，那么元素拥有block可以设置宽、高、行高的特性。怎么去除该元素带来的间距问题，一是移除代码之间的空格，二是使用margin-right负值，三、去除闭合标签，四、设置父级字体大小为0，五、设置父级letter-spacing为负值。六、设置父级word-spacing为负值。
css【disiplay】元素之block
如果设置该元素，可以设置该元素宽、高、行高、margin\padding值，并且另起一行。宽度缺省的话，是该容器父级的100%。
css【disiplay】元素之table
如果设置属性，那么元素则以表格形式出现，有换行符
css【disiplay】元素之inline-table
如果设置该属性，那么该元素则内联表格形式出现，没有换行符。
css【disiplay】元素之table-caption
如果设置该属性，此元素会作为一个表格标题显示
css【disiplay】元素之table-cell
如果设置该属性， 此元素会作为一个表格单元格
css【disiplay】元素之table-row
如果设置该属性，此元素会作为一个表格行显示
css【disiplay】元素之table-row-group
如果设置该属性，此元素会作为一个表格标题显示
css【disiplay】元素之table-column
如果设置该属性， 此元素会作为一个或多个行的分组来显示(类似 )
css【disiplay】元素之table-column-group
如果设置该属性， 此元素会作为一个或多个列的分组来显示(类似 )
css【disiplay】元素之table-header-column
如果设置该属性，此元素会作为一个或多个行的分组来显示(类似 )
css【disiplay】元素之table-footer-group
如果设置该属性， 此元素会作为一个或多个行的分组来显示(类似 )
css【disiplay】元素之table-column-group
如果设置该属性，此元素会作为一个单元格列显示(类似 )
css布局元素之【float】
float属性主要有right,left,none【无继承性】，浮动元素会使父元素高度塌陷，解决此问题使用clear,
css【float】元素之right
float在display:none情况下不生效，
如果设置此属性，那么此属性向右浮动，display:inline-table计算值为table,tabler-*,none,inline-block,run-in计算值为block.
css【float】元素之left
float在display:none情况下不生效，
如果设置此属性，那么此属性向左浮动，下效果同上
css布局元素之【clear】
此属性主要值有both,right,left,none【无继承属性】
css【clear】元素right
设置属性值，则去除右浮动。
css【clear】元素left
设置属性值，则去除左浮动。
css【clear】元素both
设置属性值，则去除左右浮动。
css布局元素之【visibility】
设置元素可见还是隐藏，其属性值主要有hidden,visible,collapse【有继承性】
css【visibility】属性之visible
设置元素可见模式，
css【visibility】元素之hidden
设置元素为隐藏模式
css【visibility】元素之collapse
设置隐藏表格的行和列
css布局元素之【overflow】
其值主要visible,hidden,scroll,auto,默认值visible【无继承性】
css【overflow】属性之visible
设置对溢出内容不作处理。
css【overflow】属性之hidden
设置对溢出内容作隐藏
【overflow】属性之scroll
设置对溢出内容作滚边条出现
css【overflow】属性之auto
设置对溢出内容按需显示。
css布局元素之【overflow-x】
其值主要visible,hidden,scroll,auto,默认值visible【无继承性】
设置对溢出内容不作处理。
css【overflow】属性之hidden
设置对溢出内容作隐藏
【overflow】属性之scroll
设置对溢出内容作滚边条出现
css【overflow】属性之auto
设置对溢出内容按需显示。
css布局元素之【overflow-y】
其值主要visible,hidden,scroll,auto,默认值visible【无继承性】
设置对溢出内容不作处理。
css【overflow】属性之hidden
设置对溢出内容作隐藏
【overflow】属性之scroll
设置对溢出内容作滚边条出现
css【overflow】属性之auto
设置对溢出内容按需显示。
position:absolute与float:left有两大共性：包裹性，破坏性。包裹性换种说法就是让元素inline-block化，内联块显示该元素;破坏性主要是指使用此元素会出高度塌陷的情况。有必要的情况可设置高宽值。
