CSS布局

布局:将元素以正确的大小摆放在正确的位置上,元素摆放模式

display

设置元素的显示方式
block:默认宽度是父元素,可设置宽高,换行显示
inline:默认宽度是内容宽度,不可设置宽高,同行显示
inline-block:默认宽度是内容宽度,可设置宽高,同行显示,整块换行
none:设置元素不显示,和visibility-hidden区别就是none隐藏之后后元素会占据

position

position 设置定位方式 top bottom right left 可设置边缘距离,默认为static静态定位。relative :相对定位,仍在文本流中,参照物为元素本身,绝对定位的参照物。
absolute:绝对定位,默认宽度为内容宽度,脱离文档流,参照物为第一个定位祖先/根元素。
fixed:固定定位,默认宽度为内容宽度,脱离文档流,参照物为视窗。可用于固定顶栏和遮罩
z-index:设置元素在z轴上的排序,默认值是0,设置比0大会盖在0上面
z-index栈:元素根据参照物的z-index的大小,不管子元素多大也不会超过参照物相比较。

float

right向右浮动,left向左浮动。默认宽度为内容宽度,脱离文档流(会被边框挡住),向指定方向一直移动。
float元素在同一文档流。
float元素半脱离文档流:对元素脱离文档流,对内容在文档流。

clear

清除浮动,应用于后续元素,应用于块级元素。
加空白元素,clearfix。一般使用clearfix:after{context‘.’;clear:both;height:0;overflow:hidden;visibility:hidden;}

flex

弹性浮动
方向:
flex-direction

flex-wrap 弹性换行
wrap:正向弹性换行 wrap-reverse:反向弹性换行

flex-flow 能一次设置以上两个属性

弹性:
flex-basics 设置flex item的初始宽高
flex-grow 分配元素剩余空间的比例 初始值0
flex-shrink 初始值1

对齐:
justify-content


align-items 设置辅轴方向对齐方式

align-self 设置每个元素在辅轴方向对齐方式

align-content 设置多行在辅轴方向对齐方式

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 元素的显示方式 block:块级元素 inline:内联元素 inline-block:内联块元素 说明: 如果d...
    angelwgh阅读 308评论 0 0
  • displaydisplay:blockdisplay:inlinedisplay:inline-blockdis...
    Rella7阅读 415评论 0 0
  • 概述 position属性 position属性列表 absolute 属性 fixed 属性 relative属...
    充满活力的早晨阅读 771评论 0 0
  • 在移动设备出现之前,人们访问网站需要通过PC端的浏览器来实现。Web前端工程师主要解决的是页面在各型浏览器之间适配...
    Leesper阅读 1,070评论 0 13
  • 一直以来都认为自己的生活是随心所欲的想怎么做就怎么做在没有外界强迫的情况下小事情都是想自己怎么去处置什么...
    芳菲love阅读 409评论 3 1