CSS布局相关概要
一、文档流
运用css布局首先要具备一些概念上的知识，文档流的概念充斥着布局的整个过程。浏览器渲染页面是有先后顺序的，其顺序是至上而下，根据HTML的文档结构进行渲染。
二、div+css
耳熟能详的div+css布局指的是：仅用容器标签div配合css样式进行布局。以往的table布局是不推荐使用的。
三、display: none / block/ inline / inline-block
设置元素的显示方式，以上为常见的取值。这是布局中非常重要的概念
block块元素：独自占据一行的元素,可控制宽高。如 div p h1~h6 ...
inline内联元素：不占据一行，，不能控制宽高，需要内容撑开。如 a span ...
inline-block: 内联的块元素，不占据一整行，但是可以控制宽高
CSS:
.box1{
display: block;
width: 100px;
height: 100px;
background-color: #aaa;
}
.box2{
display: inline;
width:100px;
height:100px;
background-color: #f45;
}
.box3{
display: inline-block;
width: 100px;
height: 100px;
background-color: #567;
}
HTML:
<div class="box1">容器一</div>
<div class="box2">容器二</div>
<div class="box3">容器三</div>
可以看出，inline和inline-block都不会独自占据一行，且inline无法控制宽高。
好了，以上就是布局需要熟悉掌握的概念，接下来介绍布局的具体方法和需要用到的属性。
四、浮动布局float:浮动的目的是使元素脱离文档流，按照自己的意愿进行布局。
1.取值：none,left,right。浮动只能向左或者向右
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
display: block;
width: 100px;
height: 100px;
margin-bottom: 5px;
background-color: #000;
}
div.box2{
background-color: #f34;
float: left;
}
div.box3{
background-color: #cd3;
float: right;
}
</style>
</head>
<body>
<div class="box1">容器一</div>
<div class="box2">容器二</div>
<div class="box3">容器三</div>
</body>
</html>
效果展示
可以看到，容器一仍然是不浮动的块元素，独自占据一行，而容器二和容器三分别向左右浮动，并出现在同一行，display:block,说明
2.浮动元素已经脱离文档流。
我们稍微更改上述代码，设置容器一浮动，二和三不浮动。
CSS:
div{
display: block;
width: 100px;
height: 100px;
margin-bottom: 5px;
background-color: #000;
}
div.box1{float: left;opacity:0.5;} /*容器一浮动，并设置了透明度*/
div.box2{background-color: #f34;}
div.box3{ackground-color: #cd3;text-align:right} /*将文本向右对齐*/
结果如下：
可以看到，设置了黑色背景的容器一变成了另外一种颜色，容器只剩下两个，为什么呢？？其实原因是容器一设置了浮动，它原本的位置就不占用文档流的空间，后面的元素就会紧接着补上，所以容器二去到了容器一原本的位置，我们看到的容器一背景色实际上是容器一和二层叠所得的颜色，而文字“容器二”则围绕在浮动元素周围，不能补位。
结论：3.标准浏览器中，浮动元素脱离文档流，它后面的元素会占据浮动元素原本的位置。
4.文字内容会围绕在浮动元素周围
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ width: 100px;
height: 100px;
opacity:0.5;
background-color: #000;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
</body>
</html>
效果演示
五、清除浮动clear
1.取值：left,right,both
其常用方法是添加一个div.clear标签，在需要的清除浮动的地方加入此标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
.box{
width: 50px;
height: 50px;
background-color: #f57;
margin: 5px;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body> <div class="box"></div>
<div class="box"></div> <div class="clear"></div> <!-- 清除浮动 --> <div class="box"></div>
<div class="box"></div>
<div class="box"></div> <div class="clear"></div> <!-- 清除浮动 --> <div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div> <div class="clear"></div> <!-- 清除浮动 --> <div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
效果演示
六、position定位
1.取值：static 默认值，无定位
absolute 绝对定位，脱离文档流。若父元素无定位,则以body坐标原点进行定位;若position:relative,则以父元素左上角(原点)进行定位。
relative 相对定位，不脱离文档流。相对自己原来的位置进行定位。
fixed 固定定位，脱离文档流。相对浏览器窗口进行定位。
2.3种定位方式都是用top bottom left right进行定位
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*html,
body{
height: 100%;
}
body{
background-color: #808;
}
.box{
position:absolute;
width: 100px;
height: 100px;
top: 10px;
left: 10px;
background-color: #f5f00c;
}*/
.box1{
width: 100px;
height: 100px;
position: relative;
top:50px;
left: 30px;
background-color: #ccc00c;
}
</style>
</head>
<body> <!-- <div class="box"></div> -->
<div class="box1"></div>
</body>
</html>
效果演示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>absolute定位的两种情况</title>
<style>
.box,
.son{
position:absolute;
width: 100px;
height: 100px;
top: 10px;
left: 10px;
background-color: #f5f00c;
}
.father{
width: 150px;
height: 150px;
background-color: #ccc;
position: relative;
top: 150px;
left: 20px;
}
</style>
</head>
<body> <div class="box"></div>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
演示结果
3.z-index:规定元素的层叠关系 ，即在平面建立一个z轴，数值越大离用户越近，层叠在上，数值越小的层叠在下。元素必须有position属性时z-index才生效
CSS:
.box{
width: 100px;
height: 100px; }
.box:first-child{
background-color: #5ceb3f;
position: absolute;
top: 0px;
left: 0px;
z-index:1;
}
.box:last-child{
background-color: #808080;
position: absolute;
top: 50px;
left: 50px;
z-index:999;
}
HTML:
<div class="box"></div>
<div class="box"></div>
效果演示
z-index:1;
z-index:999;
CSS布局相关概要的更多相关文章
- amazeui笔记-CSS 布局相关
CSS 等分网格: 说明:.am-avg-sm-2 数字表示几等分 会将子元素 <li>的宽度设置为 50%. 只能用于 <ul> / <ol> 结构 辅助类: ...
- css布局相关:涉及到常见页面样式难点
一.display:table用法 Table:display:tableBody:table-row-group;Tr: table-row;Td: table-cell https://www.c ...
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- div+css布局记扎
实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系 ...
- amazeui学习笔记--css（布局相关1）--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
随机推荐
- addslashes — 使用反斜线引用字符串
返回字符串,该字符串为了数据库查询语句等的需要在某些字符前加上了反斜线.这些字符是单引号(').双引号(").反斜线(\)与 NUL( NULL 字符). 一个使用 addslashes() ...
- Apache配置WSGI
Apache配置WSGI 什么是WSGI WSGI被称作web服务器网关接口,在笔者看来其实是基于CGI标准针对Python语言做了一些改进,其主要功能是规范了web 服务器与Pythonj应用程序之 ...
- 20145315 《Java程序设计》第七周学习总结
20145315 <Java程序设计>第七周学习总结 教材学习内容总结 第十三章 时间与日期 13.1.1时间的度量 1.格林威治时间(GMT):参考太阳到达最高点,有时间误差. 2.世界 ...
- openwrt编译系统生成ubi镜像的各变量解析
1.MKUBIFS_OPTS的作用 传递参数给mkfs.ubifs 2.MKUBIFS_OPTS传递了哪些参数? 传递了最小输入输出单元大小.逻辑擦除块大小.最大物理擦除块的个数,分别由选项-m.-e ...
- CentOS7.2 安装zookeeper3.4.9
Zookeeper-3.4.9 下载Zookeeper-3.4.9 在/usr/local下创建hadoop文件夹 将下载的文件迁移到该文件夹下,并解压 tar -zxvf zookeeper-3.4 ...
- Intellij IDEA 创建控制台项目，断点调试快捷方式
在idea 2016中创建一个控制台项目(经常会忘) 打开创建界面 注意,什么都不要选,点击next(最坑的地方,经常忘) 再次点击next ============================= ...
- POJ 2337 Catenyms
http://poj.org/problem?id=2337 题意: 判断给出的单词能否首尾相连,输出字典序最小的欧拉路径. 思路: 因为要按字典序大小输出路径,所以先将字符串排序,这样加边的时候就会 ...
- 使用javascript模拟常见数据结构（三）
六.字典和散列表 我们已经知道,集合表示一组互不相同的元素(不重复元素).在字典中,存储的是键值对,其中键值是用来查询特定的元素的.字典和集合是很相似的,集合采用[值,值]的方式存储,而字典则是以[键 ...
- BZOJ 2806 【CTSC2012】 Cheat
题目链接:Cheat 话说这道题很久以前某人就给我们考过,直到现在,我终于把这个坑填上了…… 这道题要我们把一个串\(S\)划分成若干块,每块长度不小于\(L_0\),使得能够在文章库中完全匹配的块的 ...
- 山东省第四届ACM程序设计竞赛部分题解
A : Rescue The Princess 题意: 给你平面上的两个点A,B,求点C使得A,B,C逆时针成等边三角形. 思路: http://www.cnblogs.com/E-star/arch ...