当前位置: 首页 > Web前端 > CSS

CSSday06

时间:2023-03-30 14:39:50 CSS

布局使用块元素构建网页结构,改变默认文档流动的方式以在一行中显示多列。【让块显示在一行】

浮动布局floatfloat:left/right可以让块元素跳出当前文档流1)如果不手动指定宽度,则由内容决定2)多个浮动元素在一个浮动流中并排显示,如果无法排出,会自动换行3)浮动元素失去对父元素的支持clearclear:left/right/both清理左右浮动的元素,一般都是利用这个特性强制子元素换行支持父元素。一行多列:全部浮动ul>li{float:left}一行两列方法一:两列都浮动。左{float:left}.right{float:right;}方法二:一列浮动,一列加margin-left.left{float:left;width:200px}.right{margin-left:220px;}overflowoverflowoverflow-xoverflow-yauto/none/visible/scroll当父元素的宽/高固定时,子元素的宽/高超过父元素,您可以使用此功能显示块/内联/内联块/...block/inline/inlineblock内联块可以和其他内联元素共享一行空间可以指定宽高定位布局positionstaticstatic(默认)非定位元素相对定位元素(相对定位)参考点:原position特征:不脱离文档流(宽度默认100%,不会抢占文档流中原有位置),但可以叠加在其他元素上。视口特性:脱离文档流(宽度由内容决定,原文档流中的位置被其他元素抢占)fixedpositioningelements(固定定位)只有定位元素可以使用定位属性top,left,bottom,正确的