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默认的布局方式是将每个块状标签 ...
随机推荐
- 《JAVA与模式》之单例模式(转载)
原文地址:http://blog.csdn.net/jason0539/article/details/23297037 概念: java中单例模式是一种常见的设计模式,单例模式分三种:懒汉式单例.饿 ...
- php超时时间说明
一,http请求超时时间 可能出现的场景: 1,curl进程运行了一个世纪还木结束,curl的时候设置了超时时间 --connect-timeout 1000 2,operation timed ou ...
- FreeSWITCH在会议室中持续播放音频文件
最近遇到一个客户需求,希望在会议室建立起来后,自动播放一段指定的声音. 已知会议室命令,假设建立起一个会议室号码3000,很容易实现以下功能: 一.播放一个声音文件一次 conference 3000 ...
- Eclipse自己定义keystore
首先新建一个自己的***.keystore.(假设没有,新建过程中參考下面设置) 改动keystorepassword的命令(keytool为JDK自带的命令工具,my.keystore为自己的文件名 ...
- 章节0：MySQl学前知识储备
一.数据库基础: 1.数据库(database):保存有组织的数据的容器(通常是一个文件或一组文件). 2.数据库管理系统(DBMS):创建和操纵数据库的软件系统. 3.表(table):某种特定类型 ...
- SQL 教程数据库包括：Oracle, Sybase, SQL Server, DB2, Access 等等,您将学到如何使用 SQL 访问和处理数据系统中的数据
SQL 基础教程 SQL 教程 SQL 简介 SQL 语法 SQL select SQL distinct SQL where SQL AND & OR SQL Order By SQL in ...
- ubuntu 安装 2.10.x版本的scala
Ubuntu 14.04.1 LTS上默认的scala版本是2.9的,而最新版本的spark-1.3需要最低版本的scala版本为2.10.x,先使用apt-get remove scala将机器上的 ...
- elk 的报错和优化
参数调整 elasticsearch.yml配置文件里面,调整http.max_content_length: 500mb 这个默认就100m 建议调大 之前有过报错 #如果队列满了logstash就 ...
- win 7 下合并多个表格
首先我这里从服务器上下载了一大堆的表格 分类放好之后 这里我们需要把每一类的表格合并成一张表格 这里我们使用win 7下的copy的命令 这里我的表格的格式是csv 使用cmd 我们先cd到你的表格的 ...
- 关于 ASP.NET 中的 Bundle 的补充说明（草稿）
一直以来,都认为 Bundle 有可能会不正确的压缩,而导致脚本出错,所以一直将这个功能处于禁用状态. 突然发现,其实只是自己使用的不对... 目前发现 Bundle 会导致的错误分两种情况: 1.路 ...