2016年1月13日

css布局学习

css布局学习链接

css布局学习
- display
- marginauto
- max-width
- 盒模型
- box-sizing
- position
- float
- clear
- clearfix hack
- 百分比宽度布局
- 媒体查询例子
案例
- position例子
- clear例子
- clearfix例子
- 浮动布局例子
- 媒体查询例子

display

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
display还有其他属性list-item/table/inline-block/flex
margin:auto

可使定宽块水平居中。#main {width: 600px; margin: 0 auto;}
max-width.

在移动设备设置尤为重要
盒模型

定宽时，内边距和边框影响实际宽度。
box-sizing

内边距和边框影响不再实际宽度。
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position

static

absolute ：相对于最近的“positioned”祖先元素

relative

fixed
float
clear

用于控制浮动
clearfix hack

这个非常不错
.clearfix {overflow: auto;}
百分比宽度布局
媒体查询例子

“响应式设计（Responsive Design）”是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略。

MDW文档》CSS媒体查询

媒体查询的著名站点 http://mediaqueri.es/

媒体查询查看器
视频：https://cdn.css-tricks.com/wp-content/uploads/2015/08/media-query-inspector.mp4
假设你已经对设备模式（Device Mode）有所了解。
你的样式可以注册媒体查询。当在设备模式时，这样的媒体查询显示在Media Query Inspector里。彩色的媒体查询条的宽度和视标尺对齐。
你可以点击媒体查询条里的刻度来触发媒体查询——这样会依次设置视图大小。
你可以悬停在刻度上，看看有准确规则的工具提示。
你可以右键点击媒体查询条里的刻度，并选择显示源代码。这会把你定位到源代码中定义媒体查询的地方。
视频：https://cdn.css-tricks.com/wp-content/uploads/2015/08/media-query-inspector-reveal.mp4
inline-block 布局
你可以使用 inline-block 来布局。有一些事情需要你牢记：
vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。你需要设置每一列的宽度，如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙。
column
需再查资料学习
flex（内含学习链接）
需要再查资料学习，作者说这个很棒。

案例

position例子

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>学习CSS布局</title><style type="text/css">* {box-sizing: border-box;}nav,footer,section {padding: 1em;}.container {position: relative;}nav {position: absolute;border: solid 2px palevioletred;width: 200px;}footer {position: fixed;bottom: 0;left: 0;height: 70px;width: 100%;border: solid 2px palegreen;}section {margin-left: 200px;border: solid 2px peachpuff;}</style></head><body><div class="container"><nav><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li></nav><section>section s的 margin-left 样式确保了有足够的空间容纳 nav 元素</section><section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</section><section>注意当你调整浏览器窗口时发生了什么。效果很赞！</section></div><footer>注意当你调整浏览器窗口时发生了什么。效果很赞！</footer></body>
</html>

clear例子

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>学习CSS布局</title><style type="text/css">.box {float: left;width: 200px;height: 100px;margin: 1em;background: greenyellow;}.after-box {clear: left;}/*控制浮动。使用 clear 我们就可以将这个段落移动到浮动元素 div 下面*/section {background: orange;padding: 1em;}       </style></head><body><div class="box"></div><section class="after-box">在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？</section></body>
</html>

clearfix例子

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>学习CSS布局</title><style type="text/css">/*clearfix清除浮动*/.box {float: left;width: 200px;height: 100px;margin: 1em;background: greenyellow;}.clearfix {overflow: auto;background: orange;}p {padding: 0 1em 0 1em;}</style></head><body><div class="clearfix"><div class="box"></div><p>在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？</p></div></body>
</html>

浮动布局例子

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>学习CSS布局</title><style type="text/css">/*浮动布局例子*/* {box-sizing: border-box;}nav,section {padding: 1em;background: #fff;}.container {border: solid 2px greenyellow;overflow: auto;/*“清除浮动”。当 nav 比非浮动的内容还要高时就需要了。*/}nav {float: left;border: solid 2px palevioletred;width: 200px;}section {margin-left: 200px;border: solid 2px peachpuff;}</style></head><body><div class="container"><nav><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li></nav><section>section s的 margin-left 样式确保了有足够的空间容纳 nav 元素</section><section>注意当你调整浏览器窗口时发生了什么。效果很赞！</section></div></body>
</html>

媒体查询例子

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>学习CSS布局</title><style type="text/css">/*媒体查询例子*/* {box-sizing: border-box;}nav,section {padding: 1em;background: #fff;}nav {border: solid 2px palevioletred;}section {border: solid 2px orange;}.container {border: solid 2px green;overflow: auto;/*“清除浮动”。当 nav 比非浮动的内容还要高时就需要了。*/}@media screen and (min-width: 600px) {nav {float: left;width: 20%;}section {margin-left: 20%;}}@media screen and (max-width: 559px) {nav li {display: inline;}}</style></head><body><div class="container"><nav><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li><li><a href="#">Contact</a></li></nav><section>section s的 margin-left 样式确保了有足够的空间容纳 nav 元素</section><section>注意当你调整浏览器窗口时发生了什么。效果很赞！</section></div></body>
</html>

2016年1月13日相关推荐

PANDAS 数据合并与重塑（concat篇）原创 2016年09月13日 19:26:30 47784 pandas作者Wes McKinney 在【PYTHON FOR DATA ANALYS
PANDAS 数据合并与重塑(concat篇) 原创 2016年09月13日 19:26:30 标签: 47784 编辑删除 pandas作者Wes McKinney 在[PYTHON FOR DA ...
2016年8月13日星期六 --出埃及记 Exodus 16:14
2016年8月13日星期六 --出埃及记 Exodus 16:14 When the dew was gone, thin flakes like frost on the ground appea ...
2016年10月13日星期四 --出埃及记 Exodus 18:24
2016年10月13日星期四 --出埃及记 Exodus 18:24 Moses listened to his father-in-law and did everything he said. ...
分析当今(2016年12月13日)社交三巨头：微信、whatsapp、line
前言最近都在学习和探讨即时通讯这方面的知识,准备会写即时通讯这系列的文章,包括对其他 IM 项目的探讨,第三方即时通讯的使用到最后自己开发即时通讯的项目,其中的周期会很长,不过还是值得探研的,因为社 ...
2016年3月13日02:03:53
最近状态很糟糕,知道原因但是却又道不清说不明..(也许一句话就可以说明了:毕业季) 自身存在太多太多问题了. 平时自己没怎么发现,在这一个多月的时间里,觉得自己完完全全变了一个人了,连我自己都觉得自己 ...
2016年11月13日周工作知识点总结
jQuery :eq() 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). 经常与其他元素/选择器一起使用,来选择指定的组中 ...
2016年09月06日海南三亚之旅
2016年09月06日,凌晨4点半早起滴滴打车到首都机场T1航站楼,值机首都航空飞往三亚.飞行大概3个半小时到达三亚凤凰机场,在国内到达2号出口坐机场巴士到临时停车场.然后电话事先在携程网上预定的租车 ...
多晴转云h_上海2021年1月13日天气：晴，气温：4~14℃
上海2021年1月13日天气简报 2021年1月13日星期三上海天气:晴,西南风,风向角度:219°风力1-2级,风速:11km/h,全天气温4℃~14℃,气压值:1019,降雨量:0.0mm,相对湿 ...
约战手游服务器维护中,梦幻手游1月13日维护更新帮派约战测试
亲爱的玩家朋友: 为保证服务器的运行稳定和服务质量,<梦幻西游>手游所有服务器将于2016年1月13日8:00停机,进行维护工作.预计维护时间为8:00-9:00.如果在预定时间内无法完成 ...

2016年1月13日

css布局学习

display

margin:auto

max-width.

盒模型

box-sizing

position

float

clear

clearfix hack

百分比宽度布局

媒体查询例子

案例

position例子

clear例子

clearfix例子

浮动布局例子

媒体查询例子

2016年1月13日相关推荐

最新文章

热门文章