CSS布局

Display属性


display属性

block
默认宽度为父元素宽度
可设置宽高
换行显示


块级元素

inline
默认宽度为内容宽度
不可设置宽高
同行显示

行级元素
块级元素与行级元素

如果想设置内容宽度并且可以设置宽高,并且是同行显示,使用inline-block

inline-block

display:none
元素不显示

display:none vs visiblility:hidden

none是没了,不占空间,hidden是内容消失,但是空间还在


none和hidden不一样
设置块级元素水平居中
设置块级元素水平居中
居中导航1
居中导航2

轮播头图

轮播头图1
轮播头图2

固定顶栏布局

固定顶栏1
固定顶栏2
遮罩布局

即全屏遮上一层灰色的颜色

遮罩布局
遮罩布局设置
遮罩布局样例

三行自适应布局

三行自适应布局

三行自适应布局样例

两列布局

两列布局
两列布局样例

三行自适应+两列自适应

三行自适应+两列自适应
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。