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

CSS布局

2016-07-15 16:43 316 查看

CSS布局

如何清除浮动

如下布局：

<section>
<img src="images/book1.jpg" alt="">
<p>It's funny float</p>
</section>
<footer>
Here is footer element that across the bottom of the page.
</footer>

样式如下：

section{border: 1px solid blue; margin: 0 0 10px 0}
p{margin: 0;}
footer{border: 1px solid red;}
img{float: left;}

img左浮动后，显示效果如下：

如何清除浮动？

一：为父元素添加overflow:hidden

section{border: 1px solid blue; margin: 0 0 10px 0; overflow: hidden;}
p{margin: 0;}
footer{border: 1px solid red;}
img{float: left;}

效果如下：

二：同时浮动父元素

section{border: 1px solid blue; float: left; width: 100%;}
p{margin: 0;}
footer{border: 1px solid red; clear: left}
img{float: left;}

效果如下：

三：添加非浮动的清除元素

就是给父元素的最后添加一个非浮动的子元素，然后清除该子元素。

给

section

添加一个类

clearfix

，请css样式为：

section{border: 1px solid blue; margin: 0 0 10px 0;}
p{margin: 0;}
footer{border: 1px solid red; clear: left}
img{float: left;}
.clearfix:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}

最终效果为：

没有父元素时如何清除？

给浮动元素

clear:both;

布局

Reset CSS

使用Normalize重置CSS

Download normalize.css

About normalize.css

创建一个Layout Wrapper

两种方式：

使用body标签

创建div标签

If you want to give your page a full background color or image, you’ll need to apply it to the

<html>

element, and you can’t place any elements outside of the

<body>

.

Why Vertical Margins Collapse?

If there is no content, padding, or border area to interrupt two touching margins, the margins collapse to the largest of the two margin values.

MDN - Mastering margin collapsing

移动优先

创建Sticky Footer

如果一个页面的content比broswer的高度小，页面就会在下马显示一个空白。

如何使footer一直在底部？

<div class="wrap">
<div class="main-header">
<div class="container">
...
</div>
</div>

<div class="container">
...
</div>
</div> <!-- /.wrap -->

Use

calc()

to write a mathematical expression that will subtract the footer height from the viewport’s total height.

.wrap {
min-height: calc(100vh - 89px);
}

CSS Tricks - Sticky Footer

MDN - min-height

MDN - calc()

Sizing with vh units

display

inline

The browser does not apply width and height properties, or top and bottom margin settings to inline elements.

An inline element will only accept left/right margins and any padding value.

inline-block

The advantage to using inline-block over inline display is that you can style inline-block elements as you would block-level elements. You can apply a width, height, and top/bottom margins and padding.

Removing Gaps Between Inline and Inline-Block Elements

You’ll usually see default whitespace between elements when you set their display value to

inline

inline-block

. If you don’t want the spaces in your design, there are several ways you can remove them.

The browser interprets the line breaks and spaces in the HTML as content.

The browser adds spaces between elements displayed

inline

and

inline-block

, just like it adds spaces between words.

You can remove the gaps by applying a small, negative right margin to the elements.

The element’s

font-size

value affects the size of the gaps between inline and inline-block elements. The larger the font size, the more you’ll need to compensate with margins, so you’ll need to experiment with negative margin values.

Setting an

<a>

element’s display value to block lets you apply top and bottom padding values.

使用display来创建列布局

如下创建两列布局：

<div class="container">

<div class="primary col">
<h2>Welcome!</h2>
<p>Everything in this city is worth waiting in line for.</p>
<p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
<p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
</div><!--/.primary-->

<div class="secondary col">
<h2>Great food</h2>
<p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee dragée chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
<p> Fruitcake jelly-o croissant soufflé. Biscuit jujubes dragée. Sesame snaps tootsie roll chocolate bar cake tart macaroon pudding. Ice cream gummies jujubes cupcake. Cake marshmallow cookie lollipop tart.</p>
</div><!--/.secondary-->

</div><!--/.container-->

样式如下：

.col {
display: inline-block;
width: 50%;
margin-right: -4px;
vertical-align: top;
padding: 0 1em;
}

效果如下：

资料：

MDN - display

vertical-align content

Inline-block - The Secret to Designing Layouts without Floats

float

A floated element is technically a block-level element (it accepts any width, height, padding or margins values), but it behaves like an inline element because it doesn’t exist on a line of its own, and surrounding content flows around it.

Clearing and Containing Floats

Resources

Float clearfix

::after pseudo-element

clearfix类

.clearfix::after {
content: "";
display: table;
clear: both;
}

Column layout tips

To add a left gutter to all but the first column, you can use this:

.col + .col {
padding-left: 1em;
}

To remove the right gutter from the column closest to the right edge of the page, use :last-child

.col:last-child {
padding-right: 0;
}

Bringing it all together

This snippet floats all columns left and applies a right gutter. It applies a left gutter to all but the first column, so the first column will be flush with the left margin of the page. Then it removes the right gutter from last column, so that it’s flush with the right margin of the page.

.col {
float: left;
padding-right: 1em;
}

.col + .col {
padding-left: 1em;
}
.col:last-child {
padding-right: 0;
}

You can also apply a gutter using just a left padding or margin value, like this:

.col {
float: left;
}

.col + .col {
padding-left: 1.5em;
}

Float VS Inline

Use inline-block to lay out navigation items side by side or create a simple two-column layout

Use inline-block when you need control over center and vertical alignment

Use floats to flow content along the left or right side of an element

Floats do not create default horizontal white space between elements

Be aware of collapsing containers

Position

创建一个固定的导航栏

body {padding-top: 68px;}

.main-header {
position: fixed;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0.4);
width: 100%;
top: 0;
z-index: 1000;
}

z-index works only on elements with a position property set to absolute, fixed, or relative.

If you set a z-index on an element with no position, it will do nothing.

Stacking contexts

When you give a positioned element a z-index, you establish a new stacking context for any descendants – or children – of that element. It’s possible to have a higher z-index element that’s underneath another element with a lower z-index. Learn more about stacking contexts here.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 布局

相关文章推荐

新的分享

章节导航