您的位置：首页 > Web前端 > CSS

2016年1月13日

2016-01-13 21:21 375 查看

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  布局 css
相关文章推荐
新的分享
章节导航