文档流

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

普通流(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. nginx 配置文件解读

    参考:链接 在微服务的体系之下,Nginx正在被越来越多的项目采用作为网关来使用,配合 Lua 做限流.熔断等控制 --源自 nginx Lua 脚本语言,用标准C语言编写并以源代码形式开放, 其设计 ...

  2. 不要在nodejs中阻塞event loop

    目录 简介 event loop和worker pool event loop和worker pool中的queue 阻塞event loop event loop的时间复杂度 Event Loop中 ...

  3. 将一个 JavaBean 对象转化为一个 Map

    package com.loan.modules.common.util; import java.beans.BeanInfo; import java.beans.IntrospectionExc ...

  4. Vue.js到前端工程化

    b站视频地址:黑马程序员Vue.js到前端工程化(webpack打包,以及Vue-cli3和Element-UI的使用) vue学习系列 1.vue概述 2.vue基本使用 3.vue模板语法 4.指 ...

  5. Qt update刷新之源码分析(一)

    在做GUI开发时,要让控件刷新,会调用update函数:那么在调用了update函数后,Qt究竟基于什么原理.执行了什么代码使得屏幕上有变化?本文就带大家来探究探究其内部源码. Qt手册中关于QWid ...

  6. Codeforces Round #652 (Div. 2) B. AccurateLee（字符串）

    题目链接:https://codeforces.com/contest/1369/problem/B 题意 给出一个长 $n$ 的 二进制串,每次可以选择字符串中的一个 $10$,然后删除其中的一个字 ...

  7. IIS Web API 长时间不连接后第一次访问非常缓慢

    搭建在 IIS 上的 Web API 若长时间不访问,会出现第一次访问耗时较长的现象,这与其调用应用程序池的 Idle Time-out(minutes) 即闲置超时设置有关.默认值为20,修改为0即 ...

  8. 使用dotNET_Reactor4.7加密后的dll在VS2010中无法打包

    1.只要去除加密工具中的反编译选项"Anti ILDASM",再加密就OK了. 2.或者使用VS2008打包也行.

  9. anaconda jupyter notebook 启动方法

    介绍 anaconda jupyter notebook是一种基于浏览器的python编译环境.(大概) 使用时可能因为浏览器缓存造成问题. 但是很方便. 启动方法 anaconda navigato ...

  10. Netty（三）基于Bio和Netty 的简易版Tomcat

    参考代码: https://github.com/FLGBetter/tomcat-rpc-demo