css常用布局

zqhxuyuan 发布于2019-08-30 13:54 / 2541人阅读

摘要：圣杯布局双飞翼布局都是三栏布局的效果只是实现的方式不一样。双飞翼布局双飞翼的实现就比较简单了，为添加子元素并设置。四流布局页面元素的宽度按照屏幕分辨率进行适配，整体布局不变。教程七布局网格布局属于二维布局，可以跟结合使用。

一、三栏布局

三栏布局实现的是中间自适应宽度，两边固定宽度的布局，中间栏要放在文档流前面，以实现优先渲染。圣杯布局、双飞翼布局都是三栏布局的效果只是实现的方式不一样。

1.圣杯布局

这边col设置了浮动，然后将left,right定位到左右不负采用负边距，left部分margin-left: -100%，right部分margin-right: -190px。设置完成后，定位成功，但是main的内容会被遮盖，所以container中间设置了padding值。给所有col设置position: relative，再分别给左右栏添加left、right值，使他们定位到正确位置。

2.双飞翼布局

双飞翼的实现就比较简单了，为main添加子元素main-wrap并设置pading。与圣杯布局一样，一开始三个col都设置float: left,为了把left和right定位到左右部分，采用负边距，left部分margin-left: -100%，right部分margin-right: -190px。

二、怪异盒模型

盒子模型一般分为标准盒模型（w3c标准）和怪异盒模型（IE标准）。大部分浏览器采用标准盒模型，而IE中则采用Microsoft自己的标准。

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。

标准模式：
box-sizing:content-box;
盒子总宽度：width + padding（左右） +  border（左右） + margin（左右）

怪异模式：
box-sizing:border-box;
盒子总宽度： width（width已经包含了padding,border的值） + margin（左右）

三、定位布局

css 有3种定位机制：普通流，浮动，绝对定位

普通流：元素的位置由元素在html中的位置决定。

position：static | relative | absolute | fixed

static: 静态，没有特别的设置，遵循基本的定位规定。z-index无效

relative: 相对定位，不脱离文档流，通过 TLBR（top,left,bottom,right）定位，z-index无效

absolute: 绝对定位，脱离文档流，通过TLBR定位，z-index有效。选取其最近一个最有定位设置的父级对象进行定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。

fixed: 固定定位，相对于浏览器的可视窗口来定位，z-index有效。

四、流布局

页面元素的宽度按照屏幕分辨率进行适配，整体布局不变。

网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

五、浮动布局

float: left | right | none | inherit

left: 左浮动

right: 右浮动

none: 默认值。元素不浮动，并会显示在其在文本中出现的位置

inherit: 规定应该从父元素继承 float 属性的值

使用浮动，div会浮动于网页上方，为了不影响下方不需要浮动的div，要先清除浮动

clear:left;  不允许有向左漂浮的标签

clear:right; 不允许有向右漂浮的标签

clear:both;  不允许有任何方向漂浮的标签

六、flex布局

弹性布局（属于一维布局），给予容器控制内部元素的宽度、高度的能力。便于实现垂直居中的效果。

大部分浏览器都能支持，在webkit内核的浏览器需要加上-webkit前缀。

容器的6个属性：
flex-direction：row | row-reverse | column | column-reverse;  // 决定主轴的方向
flex-wrap：nowrap | wrap | wrap-reverse; // 决定项目换行的情况
justify-content： flex-start | flex-end | center | space-between | space-around; // 项目在主轴的对齐方式
align-items：  flex-start | flex-end | center | space-between | space-around; // 项目在交叉轴上的对齐方式
align-content： flex-start | flex-end | center | space-between | space-around | stretch; // 多根轴线的对齐方式，只有一根时则无效

flex-flow:  || ; //flex-direction属性和flex-wrap属性的简写形式，


项目的6个属性：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

教程：http://www.ruanyifeng.com/blo...^%$

七、grid布局

网格布局（属于二维布局），可以跟flex结合使用。

兼容性没有flex好，不够普及

特点：

1）可以定义任意数量的行和列

2）行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式，可设置最大值和最小值

3）内部元素可以设置自己所在的行、列，还可以设置跨越几行、几列

4）可以设置内部元素的对齐方向

教程：http://blog.csdn.net/ceshi986...

源文档：

http://blog.csdn.net/yinmazuo...

http://blog.csdn.net/dong_pt/...

https://www.cnblogs.com/yanay...

http://blog.csdn.net/aozeahj/...

https://www.cnblogs.com/nuann...

理解的不正确的话，有错误请指教 ^ - ^

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115621.html

CSS常用布局

摘要：头部主要内容左边栏右边栏尾部显示为头部主要内容左边栏右边栏尾部圣杯布局和双飞翼布局的原理这篇文章讲解得比较清楚，我就不再赘述。 ====== 样例代码不能显示，请看原文https://magicly.me/css-layout/ ====== 布局是CSS中一个很重要的部分，甚至我觉得是最重要也是最难的部分，其他诸如字体大小、颜色等等都是很容易的。最近总结一下使用过的CSS常...

aaron 2019-08-29 12:59 评论0 收藏0
深入学习CSS布局系列（一）布局常用属性

摘要：布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了...

Noodles 2019-08-30 12:53 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

garfileo 2019-08-30 11:25 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

CoderDock 2019-08-30 15:44 评论0 收藏0
CSS常用布局简洁解决方案

摘要：与常人的直觉不符的是，实际上表示视口宽度的，而不是。与类似，表示视口高度的。存在问题它只适用于在视口中居中的场景基于的解决方案伸缩盒是专门针对这类需求所设计的。相关基础知识 1.内部与外部尺寸模型：（w3c草案）亲测google可支持。（http://w3.org/TR/css3-sizing ）基于原有CSS尺寸特性，可以使CSS更容易描述内容自适应以及适应固定上下文的盒模型： ...

2450184176 2019-08-29 12:55 评论0 收藏0
JS / CSS 常用实战代码片段

摘要：常用模式片段之摘要第一次看到这个字眼是在中，即。之后也见到一些别人的代码里有，它和页面的有什么关系，以及和有何渊源。以前都见过这些词，但都似懂非懂，今天查了些资料收集了些代码，做个完整的理解。 CSS篇常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性质...

sutaking 2019-08-30 13:14 评论0 收藏0