CSS入门笔记2: 布局

CSS 布局属性

display确定元素显示类型：

• block
• inline
• inline-block：对外表现行内元素，内部表现块级元素
• flex
• grid

常见布局方法

1. float布局：为了兼容低版本IE浏览器（IE9）
2. flex布局：灵活，不兼容IE9浏览器
3. grid布局：只兼容最新浏览器

float 布局

特点：

• 形成BFC（block formatting context）
• 元素浮动
• 脱离文档流（不影响其他元素），但不脱离文本流（会影响其他元素内的文字布局），可用来做文本混排，文字环绕的效果。
• 在父元素上加clearfix 清除浮动

.clearfix {
    content:'';
    diaplay: table;
    clear: both;
}

flex 布局

教程

小游戏

常用属性：

• flex-direction: row/column
• flex-wrap: warp/nowrap
• justify-content
• align-items

grid 布局

教程

小游戏

特点：

• 功能最强大
• 一维布局用flex，二维布局用grid
• 适合不规则布局

响应式布局

• rem
• vw