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默认的布局方式是将每个块状标签 ...
随机推荐
- mysql 创建函数问题
ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declar ...
- 更改jdk后，eclipse运行jsp出错
1.错误: 在Eclipse下启动tomcat的时候,报错为:Eclipse下启动tomcat报错:The archive: C:/Program Files(x86)/Java/jdk1.7.0_1 ...
- 源码安装mysql 5.7.19数据库
1.系统要求yum install -y cmake make gcc gcc-c++ bison ncurses ncurses-devel 2.创建用户和组groupadd mysql & ...
- java设置配置session过期时间的方法
1) Timeout in the deployment descriptor (web.xml)以分钟为单位 代码如下 复制代码 <web-app ...> <session-co ...
- [转]Filter 过滤器
1.简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 ...
- Vue-cli / webpack 加载静态js文件的方法
一.html-webpack-plugin 编译 1.只需要在入口处定义一个chunks,如我们定义一个fuck模块 entry: { app: './src/main.js', fuck: ['./ ...
- 如何在ppt或word中添加高亮代码？
如何在ppt或word中添加高亮代码? 问题: 如何ppt中添加带有语法高亮的程序代码,就如同下面的形式(在ppt嵌入高亮代码,且可以编辑,带有行号) 详细的要求如下: 1.代码带有语法高亮. 2.结 ...
- hive splict, explode, lateral view, concat_ws
hive> create table arrays (x array<string>) > row format delimited fields terminated by ...
- 不错位的java .class 反编译工具推荐
我们经常会反编译看一些class文件,但是反编译出来的文件里面会有很多杂乱的东西 一直以来都是用的idea来反编译的,只要把class文件往里面一拖就行了 这么用没问题,用来看看源码什么的都OK 但是 ...
- U盘启动ubuntu 12.04
第一步: 下载U盘启动制作工具Universal-USB-Installer-1.9.5.9.exe http://www.pendrivelinux.com/downloads/Universal- ...