关于web页面CSS布局

/ 默认分类 / 没有评论 / 56浏览

常规我们知道html中要实现一些相对复杂好看现代化的的布局的时候,常见使用的布局

正常布局流

<ul>
<li>待办事件一</li>
<li>待办事件二</li>
<li>待办事件三</li>
<li>待办事件四</li>
</ul>
<p>已完成事件</p>

display 属性

  block,inline,inline-block

浮动-float

float 属性有四个可能的值:
left — 将元素浮动到左侧。
right — 将元素浮动到右侧。
none — 默认值, 不浮动。
inherit — 继承父元素的浮动属性。

position

默认为 static

表格布局

display: table

多列布局:Multi-column layout 可以让块按列布局

display属性

display:block
display:inline
display:flex
display:grid

弹性盒子(Flexbox)

display: flex