160818、CSS页面布局笔记
居中布局
水平居中
父元素和子元素的宽度都未知
inline-block + text-ailgn
.child{display:inline-block;}
.parent{text-align:center;}
优点:兼容性好
缺点:子元素文本继承了text-align属性,子元素要额外加text-align:left;
table + margin
.child{display:table; margin:0 auto;}
优点:只需要设置子元素的样式
absolute + transform
.parent{position:relative;}
.child{position:absolute; left:50%; transform: translateX(-50%);
优点:居中子元素不会对其他元素产生影响
缺点:transform是CSS3的属性,存在兼容性问题
flex + justify-content
.parent{display:flex; justify-content:center;}
优点:只需要设置父元素的样式
缺点:兼容性问题
flex + margin
.parent{display:flex;}
.child{margin:0 auto;}
垂直居中
父容器和子容器的高度都未知
table-cell + vertical-align
.parent{display:table-cell; vertical-align:middle;}
优点:兼容性好
absolute + transform
.parent{position:relative;}
.child{position:absolute; top:50%; transform:translateY(-50%);}
优点:子元素不会干扰其他元素
缺点:兼容性
flex + align-item
.parent{display:flex; align-items:center;}
优点:只需要设置父元素
缺点:兼容性问题
水平垂直居中
父容器和子容器的高度都未知
inline-block + text-align + table-cell + vertical-align
.parent{text-align:center; display:table-cell; vertical-align:middle;}
.child{display: inline-block;}
absolute + transform
.parent{position:relative;}
.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
flex + justify-content + align-item
.parent{display:flex; justify-content:center; align-items:center;}
多列布局
定宽-自适应
float+margin
.left{float:left; width:100px;}
.right{margin-left:120px;}
float+margin+fix
<div class="left"></div>
<div class="right-fix">
<div class="right"></div>
</div>
外层在包裹一个容器
.left{float:left; width:100px; position: relative;}
.right-fix{float:right; width:100%; margin-left:-100px;}
.right{margin-left:120px;}
兼容性很好,但是多了层right-fix的结构
float+overflow
.left{float:left; width:100px; margin-right: 20px;}
.right{overflow:hidden;
table
.parent{display:table; width:100%; table-layout:fixed;}
.left,.right{display:table-cell;}
.left{width:100px; padding-right:20px;}
flex
.parent{display:flex;}
.left{width:100px; margin-right:20px;}
.right{flex:1;}
不定宽-自适应
float + overflow
.left{float:left; margin-right:20px;}
.right{overflow:hidden;}
table
.parent{display:table; width:100%;}
.left,.right{display:table-cell;}
.left{width:0.1%; padding-right:20px;}
flex
.parent{display:flex;}
.left{margin-right:20px;}
.right{flex:1;}
160818、CSS页面布局笔记的更多相关文章
- CSS 页面布局、后台管理示例
CSS 页面布局.后台管理示例 页面布局 1.头部菜单 2.中间内容/中间左侧菜单 3.底部内容 <div class='pg-header'> <div style='width: ...
- css页面布局
写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签 ...
- CSS页面布局常见问题总结
在前端开发中经常会碰到各种类型布局的网页,这要求我们对css网页布局非常熟悉.其中水平垂直居中布局,多列布局等经常会被使用到,今天就来解决一下css布局方面的问题. 水平垂直居中的几种方法 说到水平垂 ...
- css页面布局总结
W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 ...
- CSS页面布局与网格(上)
1.布局规划 1.1 网格 网格系统是设计师在切分布局时作为参照的一组行和列. 1.2 布局辅助类 类名用于为布局添加样式.为了让样式可以重用,让类名表达其意图. .column { /* 一般列的样 ...
- 第6天:DIV+CSS页面布局实战
今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...
- 一、CSS概述 二、CSS的选择器(认识) 三、CSS样式和属性(练习) 四、重构商城首页DIV+CSS(页面布局)(重点) 浮动/更改显示方式
一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...
- 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局
一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...
- dic+css页面布局分享
HTML部分代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
随机推荐
- 用unity3d切割图片
原地址:http://www.cnblogs.com/leng-yuye/archive/2012/05/31/2528148.html 需求:把图片的像素中不为alpha的部分切出来保存成单个图片. ...
- Python——描述符(descriptor)解密
本文由 极客范 - 慕容老匹夫 翻译自 Chris Beaumont.欢迎加入极客翻译小组,同我们一道翻译与分享.转载请参见文章末尾处的要求. Python中包含了许多内建的语言特性,它们使得代码简洁 ...
- map方法,以及filter方法的使用
map()方法,会返回一个 jQuery 封装的数组, 这个数组不能直接使用,需要使用 get() 来处理返回的对象以得到基础的数组. 例子: <!DOCTYPE html> <ht ...
- sqlserver,获取调用存储过程返回数据的方法。
1,获取存储过程最后select返回的结果集.SELECT 数据集返回值. 因为select返回的结果是一个表.所以返回的结果需要用一个表接收.使用临时表接收. 被调用的存储过程最后是这样:返回了一个 ...
- loadrunner使用sitescope监测监控mysql数据库
分类: LoadRunner 性能测试 2012-11-22 00:14 2644人阅读 评论(0) 收藏 举报 loadrunnerLoadRunnermysqlMySQLMysqlMYSQLMyS ...
- iOSQuart2D绘图之UIImage简单使用
代码地址如下:http://www.demodashi.com/demo/11609.html 人生得意须尽欢,莫使金樽空对月. 天生我材必有用,千金散尽还复来. 前记 说到UIImage大家都不会感 ...
- Python - pandas 数据分析
pandas: powerful Python data analysis toolkit 官方文档: http://pandas.pydata.org/pandas-docs/stable/ 1. ...
- 美团HD(7)-添加取消搜索按钮
DJSelectCityViewController.m #pragma mark - UISearchBar 代理方法 /** SearchBar开始编辑 */ - (void)searchBarT ...
- [c#.Net] NUnit Test 体验
NUit Test Adapter 安装,两种方式 第一种:从扩展和更新里搜索nunit,进行下载安装
- 让你的程序通过XP防火墙
procedure TForm1.Button1Click(Sender: TObject); var FwMgr,Profile,FwApp: variant; begin FwMgr := Cre ...