html页面布局总结篇
1. 使用float布局
注意点：使用浮动布局要注意清除浮动。使用伪类清除
浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。
而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrap {
background-color: #FBD570;
margin-left: 100px;
margin-right: 150px;
}
.clearfix:after { /*清除浮动*/
content: "";
clear: both;
display: block;
}
.left {
float: left;
width: 100px;
background: #00f;
height: 180px;
margin-left: calc(-100% - 100px); /*使用负值让他们浮动到上方去*/
}
.right {
float: right;
width: 150px;
background: #0f0;
height: 200px;
margin-right: -150px;
}
.center {
background: #B373DA;
height: 150px;
float: left;
width: 100%;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>
<div class="left">left，宽度固定，高度可固定也可以由内容撑开</div>
<div class="right">right，宽度固定，高度可固定也可以由内容撑开</div>
</div>
</body>
</html>
2. 普通流布局：display : inline-block
inline-block默认是基线对齐的，而inline-block的基线又跟文本基线一致，所以在内容不同的时候并不能水平对齐。只需要用vertical-align显式声明一下top/bottom/middle对齐即可。
注意：inline-block的基线是最后一行文字的底部，flex里面的基线是第一行文字的底部
示例代码 ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrap {
background-color: #FBD570;
font-size: 0;
letter-spacing: -4px; /*用于兼容safari，根据不同字体字号或许需要做一定的调整*/
margin-left: 100px;
margin-right: 150px;
}
.wrap * {
font-size: 1rem;
letter-spacing: normal;
}
.left {
display: inline-block;
vertical-align: top;
width: 100px;
background: #00f;
height: 180px;
margin-left: -100px;
}
.right {
display: inline-block;
vertical-align: top;
width: 150px;
background: #0f0;
height: 200px;
margin-right: -150px;
}
.center {
display: inline-block;
vertical-align: top;
background: #B373DA;
height: 150px;
min-width: 150px;
width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left，宽度高度固定</div>
<div class="center">center，可以自适应浏览器宽度，高度固定。</div>
<div class="right">right，宽度高度固定</div>
</div>
</body>
</html>
3. 绝对定位
绝对定位就是我们平常所说的定位，给定参考坐标系+坐标确定位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrap {
position: relative;
background-color: #FBD570;
margin-left: 100px;
margin-right: 150px;
height: 250px;
}
.left {
position: absolute;
top: 0;
left: -100px;
width: 100px;
background: #00f;
height: 180px;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 150px;
background: #0f0;
height: 200px;
margin-right: -150px;
}
.center {
position: absolute;
top: 0;
left: 0;
background: #B373DA;
height: 150px;
min-width: 150px;
width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">
center，可以自适应浏览器宽度，高度固定。
</div>
<div class="left">left，宽度高度固定</div>
<div class="right">right，宽度高度固定</div>
</div>
</body>
</html>
父元素为relative，子元素为absolute，这样的话，又会出现跟浮动一样的问题：父对象高度坍塌，子元素不能撑起父对象。原因也跟浮动一样，解决办法的话目前我知道的只有给父对象指定一个确定height值
4. 弹性盒子
使用注意：
- flex下的子元素必须为块级元素，非块级元素在android2.3机器下flex失效
- flex下的子元素宽度和高度不能超过父元素，否则会导致子元素定位错误，例如水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
/* ============================================================
flex：定义布局为盒模型
flex-v：盒模型垂直布局
flex-1：子元素占据剩余的空间
flex-align-center：子元素垂直居中
flex-pack-center：子元素水平居中
flex-pack-justify：子元素两端对齐
兼容性：ios 4+、android 2.3+、winphone8+
============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
</style>
</head>
<body> <div class="flex flex-pack-justify">
<div>模块一</div>
<div>模块二</div>
<div>模块三</div>
<div>模块四</div>
</div> </body>
</html>
html页面布局总结篇的更多相关文章
- 一步一步构建手机WebApp开发——页面布局篇
继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...
- css篇-页面布局-三栏布局
页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. 1)浮动 2)绝对定位 3)Flexbox 4)表格布局 5)网格布局(CSS3的Grid布局) 代码: ...
- （数据科学学习手札103）Python+Dash快速web应用开发——页面布局篇
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- 无废话SharePoint入门教程五[创建SharePoint页面布局]
一.前言 文章成体系,如果有不明白的地方请查看前面的文章. 二.目录 1.创建页面布局 2.首次使用页面布局 3.修改页面布局 4.使用页面布局 5.最终效果 1.创建页面布局 (1)打开设计管理器, ...
- HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- 【转】Android性能优化之布局优化篇
转自:http://blog.csdn.net/feiduclear_up/article/details/46670433 Android性能优化之布局优化篇 分类: andorid 开发2015 ...
- css页面布局
写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签 ...
随机推荐
- request.getRequestURI() 、request.getRequestURL() 、request.getContextPath()、request.getServletPath()区别
request.getRequestURI() /jqueryWeb/resources/request.jsprequest.getRequestURL() http://localhost:808 ...
- C语言下的错误处理的问题
下面是三种C语言的错误处理,你喜欢哪一种?还是都不喜欢? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /* 问题: 不充分,而且很容易出错,前 ...
- 【Java】K-means算法Java实现以及图像切割
1.K-means算法简述以及代码原型 数据挖掘中一个重要算法是K-means.我这里就不做具体介绍.假设感兴趣的话能够移步陈皓的博客: http://www.csdn.net/article/201 ...
- 你永远学不会的设计-->百度地图map api key 的设置
哈哈 说到咱的互联网大佬 baidu, 真是无人不知,无人不晓,可是多少人能领会他的设计哲学呢? 来看看吧.... 事情要从上周的一个小实验说起,目标是调用baidu map api 做个产品原型. ...
- 文件处理-智能检测编码的工具（chardet）
一.chardet使用方法 问:假如你不知道你要处理的文件是什么编码可怎么办呢? import chardet f = open('通讯录.txt',mode='rb') data = f.read( ...
- maven配置src/resources默认目录
在maven工程中,我们会将配置文件放到,src/main/resources 下面,例如 我们需要确认resource 下的文件 编译之后存放的位置 它编译的路径直接位于classes下面,这个 ...
- MySQL 忘记root密码的两种处理方法
[背景] 由于各个原因,我遇到过不只一次我服务的客户忘记了MySQL的root密码:如果是普通用户还好,我们可以用root用户去改它的密码,要命 的是把root给丢了! 对于MySQL来说如果你忘记了 ...
- 令新手头疼的modelsim库编译
估计很多人买了CB哥的书来看吧,他们在学习modelsim仿真的过程中可能遇到过明明是按照书上的步骤添加器件库的了,但还是出现如下的错误: 首先,我想说的是CB哥书上的modelsim-altera1 ...
- maven正式版本和快照版本的区别
Maven中建立的依赖管理方式基本已成为Java语言依赖管理的事实标准,Maven的替代者Gradle也基本沿用了Maven的依赖管理机制.在Maven依赖管理中,唯一标识一个依赖项是由该依赖项的三个 ...
- scikit-learn：6. Strategies to scale computationally: bigger data
參考:http://scikit-learn.org/stable/modules/scaling_strategies.html 对于examples.features(或者两者)数量非常大的情况, ...