css布局概览

基础的前端css布局梳理，主要包括布局的目的、基础知识、布局方式三部分内容，便于入门的小伙伴进行总结。

css布局

• 一、 布局的目的
  • 解决排版难看，冗杂，合理安排页面的展示方式
• 二、 基础知识
  • 控制布局的属性（每一个元素都有）：display
    • display:none（隐藏）
    • display:block(块元素)
    • dispay；inline（行元素）
    • display:inline-blick(行内块元素)
  • 定位属性：position
    • position：static（默认值）
    • position: relative;（相对定位）
    • position:fixed（固定定位）
    • position：absolute(绝对定位)
  • 浮动：float
    • float:left(左浮动)
    • float：right（右浮动）
    • clear：both（清楚浮动）
  • 盒模型
    • box-sizing: border-box;（width=border+paddng+content）
    • box-sizing:content-box;(width=content)
• 三、 布局方式
  • 百分比布局
    • 前提;父元素的宽高要是固定的值
    • 方法：间距，宽高等距离或者长度使用百分比（%）作为dangwei
  • 响应式布局
    • 解释：根据不同的页面大小来呈现不懂的布局
    • 方法：使用多媒体查询技术，监测屏幕大小来使用不同的样式
  • 弹性布局
    • 方法：使用display:flexbox