CSS布局（五）

前言

如何快速的用html写出一个界面，你可能会觉得很简单，不就是div摆放，表格布局然后调整下样式吗，可真正做的时候有各种居中、浮动等，并且还要考虑到样式兼容、屏幕分辨率等问题。目前CSS布局主要有如下技术：

浮动
定位
CSS表格
flex布局（弹性布局、弹性盒子）
网格
框架

浮动

所谓浮动就是允许元素浮动到另外一个元素的左侧或者右侧，浮动的框会脱离文档流，也就是他本该占据的位置会空出来。

float 属性有四个可能的值：
1. left — 将元素浮动到左侧。
2. right — 将元素浮动到右侧。
3. none — 默认值, 不浮动。
4. inherit — 继承父元素的浮动属性。

框1右浮动，脱离文档流，直到碰到另一个元素的边缘。

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

定位

定位是通过position属性，常用的四种定位类型有：

静态定位(Static positioning)：是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
相对定位(Relative positioning)：相对于它原始位置进行偏移等操作，没有脱离文档流。
绝对定位(Absolute positioning)：绝对定位会使元素脱离正常布局流的控制，也就是可以随心所欲的放在哪儿。.
固定定位(Fixed positioning)：顾名思义就是固定元素在某一个地方（如：网页的置顶按钮）。
eg：
HTML代码

<h1>Basic document flow</h1><p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p><p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p><p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p><p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>

CSS代码

body {width: 500px;margin: 0 auto;
}p {background: aqua;border: 3px solid blue;padding: 10px;margin: 10px;
}span {background: red;border: 1px solid black;
}

正常布局流效果

相对定位
1、新增CSS代码

.positioned{position: relative;top: 30px;left: 30px;
}

2、效果

可以看到黄色部分设置相对定位后，在它正常的布局流中往上和往左偏移了30px。

CSS表格（不怎么用）

不要误以为表格布局不是利用table标签的tr或者td进行布局，而是display属性设置为table、table-row……等属性。

flex布局

非常灵活，可参考超级详细的一篇文章flex布局

网格布局（TODO）

框架

利用框架的话就是bootstrap框架了，主要是它的栅格系统。

CSS样式--前端布局（五）相关推荐

网页中使用CSS样式表的五种方法
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: < ...
图文混排作品HTML5利用css样式,DivCSS布局实例：很实用的图文混排CSS列表
CSS网页布局的一大特点就是列表元素的应用,在传统的表格布局中往往将列表元素作为表格来处理,这样的方式非但不具有语义还产生了许多不必要的代码. 今天我们共同学习一款"图文混排CSS列表&qu ...
require.js引入css文件,[DikeJS]RequireJS引入CSS样式文件（五）
在实际开发组件时,我们常常需要关注组件的样式,样式如何定义,以及样式如何引用,我关注此问题时也纠结了一小下,不过还好,RequireJS周边给我们提供了丰富的插件,我们可以直接使用css.js,具体的 ...
css 一些常用布局
div骨架 Code <div id="header">ss</div> <div id="container"& ...
html和css执行顺序,CSS样式的优先级执行顺序和覆盖规则
好看的网站离不开css样式的布局和装饰,那么大量的css样式,它们的优先级执行顺序和覆盖规则是什么呢? CSS主要有三种引用方式:元素上的style.文件头上的style元素.外部样式文件.这三种优先 ...
设置字的间距php,css字间距布局之如何设置字间距？
本章给大家介绍css如何设置字间距,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 字间距在CSS布局时候使用比较少,但偶尔文本文字排版会用到,所以有必要了解并掌握css 字间距布局 ...
精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
【前端圭臬】五：CSS 核心机制——布局
前言最近几周我一直在看 CSS 规范,下来感受就是,真·心乱如麻.也就是 CSS 是真的简单,真的,你说你 JS 巨佬,我膜拜,HTML 大师,我 respect,CSS 专家,呃,你是写规范的吗, ...
html a4页面样式_前端零基础入门（五）：如何在页面当中引用css样式
上回我们已经完成了我们的第一个HTML页面了,但是这个HTML页面是不完整的,或者说仅仅只是一个页面而已,没有任何的样式,没有任何的修饰,也没有任何的功能.那么如何给页面加上一些修饰性的东西呢? 就如 ...
python制作网页样式与布局_python之路_前端之CSS布局1
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. ...

CSS样式--前端布局（五）

CSS布局（五）

前言

浮动

定位

CSS表格（不怎么用）

flex布局

网格布局（TODO）

框架

CSS样式--前端布局（五）相关推荐

最新文章

热门文章