文档流

　　文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式布局，文档流可以分为定位流、浮动流、普通流三种

普通流(Normal flow)

  • 在常规流中，盒一个接着一个排列，也就是常说的默认的文档流
  • 在块级格式化上下文里面， 它们竖着排列
  • 在行内格式化上下文里面， 它们横着排列
  • 当position为static或relative，并且float为none时会触发常规流
  • 对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置
  • 对于相对定位(relative positioning)，position: relative，盒偏移位置由top、bottom、left、right属性定义。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置
  • 可以通过display 改变元素类型

浮动(Floats)

  • 左浮动元素尽量靠左、靠上，右浮动同理
  • 这导致常规流环绕在它的周边，除非设置 clear 属性
  • 浮动元素不会影响块级元素的布局
  • 但浮动元素会影响行内元素的布局，让其围绕在自己周围，撑大父级元素，从而间接影响块级元素布局
  • 最高点不会超过当前行的最高点、它前面的浮动元素的最高点
  • 不超过它的包含块，除非元素本身已经比包含块更宽
  • 行内元素出现在左浮动元素的右边和右浮动元素的左边，左浮动元素的左边和右浮动元素的右边是不会摆放浮动元素的

绝对定位(Absolute positioning)

  • 绝对定位方案，盒从常规流中被移除，不影响常规流的布局
  • 它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；
  • 如果元素的属性position为absolute或fixed，它是绝对定位元素
  • 对于position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于body

块格式化上下文（BFC）

　　BFC(Block formatting context)直译为"块级格式化上下文"。是用于布局块级盒子的一块渲染区域，它是一个独立的渲染区域、容器，简单的可以理解把BFC理解为是css页面渲染的一种机制、有一套渲染规则，规定内部元素如何布局。也可以理解为这个独立的区域与外部之间的元素互不影响。

BFC布局规则

  • 内部元素中的块级元素 Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由外边距margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
  • 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算（浮动的元素会被父级计算高度）。

BFC 作用

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

注意：一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。即一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。

BFC运用

  • 清除内部浮动，造成的高度坍塌（产生一个新的BFC时，浮动元素的高度也参与计算）
  • 防止边距折叠
  • 布局

BFC创建

  • 根元素（<html>）
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
  • overflow 计算值(Computed)不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content 或 paint 的元素
  • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
  • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

除了BFC 还有IFC、GFC、FFC原理都类似都有自己的布局规则。

Flex 弹性盒子布局

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。这种布局就是上面说的FFC。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器属性

六个属性分别为：flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content

项目属性

六个属性分别为：order，flex-grow，flex-shrink，flex-basis，flex，align-self

Grid 网格布局

将网页划分成一个个网格，定义行、列可以任意组合不同的网格，做出各种各样的布局，这种布局就是上面说的GFC。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

css中的px

css 中的px是一个相对逻辑单位，相对的是设备像素比(DPR) ，其中DPR 可以通过window.devicePixelRatio，简单的可以理解为使用多少物理像素绘制单个CSS逻辑像素。

window.devicePixelRatio DPR = 物理像素(设备像素) / 逻辑像素(css像素/设备独立像素) dips

CSS中的 1px 并不等于设备的1px

从iphone4开始，推出了所谓的Retina屏（一种新型高分辨率屏），分辨率提高了一倍，变成640*960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，1个CSS像素是等于4个物理像素的。

对于桌面设备，一个css逻辑像素通常就等同于物理像素，不用考虑缩放问题。

  • css 是一个相对单位，是一个逻辑像素相对于设备像素
  • pc端默认一个像素等于一个物理设备上的像素
  • 分辨率越高显示的图像越清晰，因为有更多的点来描述这个图像
  • 用多少个物理像素渲染1个css 逻辑像素，很多概念都是高分屏出来之后为了解决布局、显示体验的问题提出的解决方案，之前都是一个css 逻辑像素显示一个物理像素

备注：dpr 涉及到的相关概念比较多可自行查找如css像素、设备像素比dpr等

常见分辨率

屏幕分辨率是指纵横向上的像素点数，单位是px。显示分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平方向含有像素数为160个，垂直方向像素数128个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。

1024*600            （常见8、9寸电脑使用)

1024*768            （常见10.4、12.1、14.1、15寸电脑使用）

1280*1024            (常见14.1、15寸电脑使用）

1280*800            （常见10.8、12.1、15.4寸电脑使用）

1280*854            （不常见)

1366*768            （常见15.2寸电脑使用)（主流）

1440*1050            (常见15、16.1寸电脑使用)

1440*900            （苹果17寸电脑)

1600 * 900            (非主流)

1600*1200            (常见15、16.1寸电脑使用)

1600*1024            (不常见)

1680*1050            (常见15.4、20寸电脑使见)

1920*1080            (主流)

1920*1200            (常见20寸电脑使见)

 1 @media (min-width: 1024px){

 2      body{font-size: 18px}

 3     } /*>=1024的设备*/

 4

 5     @media (min-width: 1100px) {

 6      body{font-size: 20px}

 7     } /*>=1100的设备*/

 8

 9     @media (min-width: 1280px) {

10      body{font-size: 22px;}

11     } /*>=1280的设备*/

12

13     @media (min-width: 1366px) {

14      body{font-size: 24px;}

15     }

16

17     @media (min-width: 1440px) {

18      body{font-size: 25px !important;}

19     }

20

21     @media (min-width: 1680px) {

22      body{font-size: 28px;}

23     }

24

25     @media (min-width: 1920px) {

26      body{font-size: 33px;}

27     }
@media (min-width: 1024px){

     body{font-size: 18px}

    } /*>=1024的设备*/

    @media (min-width: 1100px) {

     body{font-size: 20px}

    } /*>=1100的设备*/

    @media (min-width: 1280px) {

     body{font-size: 22px;}

    } /*>=1280的设备*/

    @media (min-width: 1366px) {

     body{font-size: 24px;}

    }

    @media (min-width: 1440px) {

     body{font-size: 25px !important;}

    }

    @media (min-width: 1680px) {

     body{font-size: 28px;}

    }

    @media (min-width: 1920px) {

     body{font-size: 33px;}

    }

css整理之-----------布局相关的更多相关文章

  1. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

  2. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  3. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  4. amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid

    amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...

  5. CSS之浮动布局及相关问题

    CSS之浮动布局及相关问题   1.什么是浮动:       在我们布局的时候用到的一种技术,能够方便我们进行布局,默认流动布局有不足,让块元素可以并排显示,通过让元素浮动,我们可以使元素在水平上左右 ...

  6. CSS布局相关概要

    一.文档流 运用css布局首先要具备一些概念上的知识,文档流的概念充斥着布局的整个过程.浏览器渲染页面是有先后顺序的,其顺序是至上而下,根据HTML的文档结构进行渲染. 二.div+css 耳熟能详的 ...

  7. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  8. display属性的表格布局相关属性

    基于CSS属性display:table的表格布局的使用   项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的tabl ...

  9. CSS的flex布局(转载)

    我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...

随机推荐

  1. 如何在windows下切换node版本

    安装nvm 最近的项目中,一个是用vue项目开发,一个是使用react开发,但是ant design pro使用了umi框架,所需要的node版本>10.0.0,vue那个项目中又不兼容node ...

  2. JVM详解总结

    JVM详解总结 1.JVM内存模型 1.1 运行时数据区内存分布实例 1.2 类加载的生命周期 2.物理内存与虚拟内存 3.Java中需要使用内存的组件 3.1 Java堆 3.2 线程 3.3 类和 ...

  3. Spark练习之wordcount，基于排序机制的wordcount

    Spark练习之wordcount 一.原理及其剖析 二.pom.xml 三.使用Java进行spark的wordcount练习 四.使用scala进行spark的wordcount练习 五.基于排序 ...

  4. 使用两个FIFO完成流水操作

    一.设计目标 写一个FIFO控制器,控制器里有两个FIFO,输入的数据由串行接收模块(uart_rx_module)送来,一共有86行86列的数据,按0.1.2行,1.2.3行,直到最后83.84.8 ...

  5. vscode开发vue，热更新

    1.首先用vscode去安装热更新插件 2.vscode安装后默认修改的文件是没有开启自动保存的,需要将自动保存勾选 这样就不用每次修改都去open with live server:

  6. indexedDB数据库的使用

    <!DOCTYPE html> <html> <head> <title>indexedDB数据库的使用</title> <meta ...

  7. Codeforces 1355 E. Restorer Distance（三分）

    传送门:E - Restorer Distance  题意:给出四个数 N, A, R, M ,然后给出一个长度为N的序列.让一个数+1花费A,-1花费R,从一个大的数向一个小的数移动1花费M.问让所 ...

  8. 【bzoj 3333】排队计划（线段树）

    n个数,求一次逆序对.接着有m次修改操作,把每次输入的位置p的数之后<=它的数取出来,从小到大排序后再放回空位里,求逆序对.(N,M<=500,000 , Ai<=10^9)思路:1 ...

  9. Atcoder(134)E - Sequence Decomposing

    E - Sequence Decomposing Time Limit: 2 sec / Memory Limit: 1024 MB Score : 500500 points Problem Sta ...

  10. hdu5637 Transform (bfs+预处理)

    Problem Description A list of n integers are given. For an integer x you can do the following operat ...