文档章节

Advanced CSS Chapter 8 Layout

LuXing
 LuXing
发布于 2014/05/30 16:10
字数 1929
阅读 102
收藏 5

#Advanced CSS
#Chapter 8 Layout
All these CSS layout techniques rely on three basic concepts: positioning, floating, and margin manipulation. The different techniques really aren’t that different, and if you understand the core concepts, it is relatively easy to create your own layouts with little or no hassle. In fact, layout is generally the easiest part of CSS; it’s all the tweaking that takes time.
In this chapter, you will learn about

  • Horizontally centering a design on a page
  • Creating two- and three-column float-based layouts
  • Creating fixed-width, liquid, and elastic layouts
  • Creating equal height columns
  • CSS frameworks versus CSS systems

##Planning your layout
##Setting the foundations
###Centering a design using margins(使用自动空白边让设计居中)
Say you have a typical layout where you wish to center a wrapper div horizontally on the screen:

<body>
    <div class="wrapper">
    </div>
</body>

To do this, you simply define the width of your wrapper div and set the horizontal margins to auto:

.wrapper {
    width: 920px;
    margin: 0 auto;
}

This works on all modern browsers. However, IE 5.x and IE 6 in quirks mode don’t honor the margin:auto declaration. Luckily, IE misunderstands text-align: center, centering everything instead of just the text. You can use this to your advantage by centering everything in the body tag, including the wrapper div, and realigning the contents of the wrapper back to the left:

body {
    text-align: center;
}
.wrapper {
    width: 920px;
    margin: 0 auto;
    text-align: left;
}

Using the text-align property in this way is a hack—but a fairly innocuous hack that has no adverse effect on your site. The wrapper now appears centered in older versions of IE as well as more standards-compliant browsers.

###使用定位和负值空白边让设计居中
首先定义容器的宽度。然后将容器的position设置为relative:

#warpper{
    width:720px;
    position:relative;
    left:50%;
    margin-left:-360px;
}

##Float-based layouts
There are a few different ways of doing CSS-based layout, including absolute positioning and using negative margins. I find float-based layouts the easiest and most reliable method to use. As the name suggests, in a float-based layout, you simply set the width of the elements you want to position and then float them left or right.

###Two-column floated layout To create a two-column layout inside our content area, we first need to create our basic HTML structure.

<div class="content">
<div class="primary">
<!-- main content goes here -->
</div>
<div class="secondary”>
<!--navigation and secondary content goes here -->
</div>

Although this wouldn’t be a problem if browsers behaved themselves, buggy browsers can cause tightly packed layouts to break, forcing columns to drop below each other.
This can happen on IE because it honors the size of an element’s content, rather than the size of the element itself. In standards-compliant browsers, if the content of an element gets too large, it will simply flow out of the box. However, on IE, if the content of an element becomes too big, the whole element expands. This can be triggered by the smallest things, such as some of your text being set in italic. If this happens in very tightly packed layouts, there is no longer enough room for the elements to sit next to each other, and one of the floats will drop. Other IE bugs, such as the 3-pixel text jog bug and the double-margin float bug (see Chapter 9), along with various browser-rounding errors can also cause float dropping.
To prevent your layouts from breaking, you need to avoid cramming floated layouts into their containing elements. Rather than using horizontal margin or padding to create gutters, you can create a virtual gutter by floating one element left and one element right (see Figure 8-6). If one element inadvertently increases in size by a few pixels, rather than immediately running out of horizontal space and dropping down, it will simply grow into the virtual gutter.

The CSS for achieving this layout is very straightforward. You simply set the desired width of each column and then float the secondary content left and the primary content right. You also need to add a small amount of padding to the primary content to prevent the enclosed text being flush to the right hand edge of the element. You’ll notice that I’ve also added display:inline to all the floated items. This is a defensive measure to prevent the double margin float bug in IE (more on that in the next chapter).

.content .primary {
width: 650px;
padding-right: 20px;
float: right;
display: inline;
}
.content .secondary {
width: 230px;
float: left;
display: inline;
}

As the total width available is 920 pixels, these dimensions leave a 20-pixel wide virtual gutter between each floated element. As mentioned previously, doing this protects the layout from float drops due to accidental content expansion.
Because these elements are floated, they no longer take up any space in the flow of the document, causing the footer to rise up. In order to prevent this, you need to clear the floated items by applying the overflow method to their parent element, in this case the content div.

.content {
overflow: hidden;
}

###Three-column floated layout
The HTML needed to create a three-column layout is very similar to that used by the two-column layout, the only difference being the addition of two new divs inside the primary content div: one for the main content and one for the secondary content. Therefore, we can reuse our flexible primary and secondary class names again.

<div class="content">
<div class="primary">
<div class="primary">
<-- your primary primary content goes here -->
</div>
<div class="secondary">
<-- your secondary primary content goes here -->
</div>
</div>
<div class="secondary”>
<!--navigation and secondary content goes here -->
</div>
</div>  

As before, the CSS for this is very simple. You just set your desired widths and then float the primary div left and the secondary div right, creating a 20-pixel gap in the middle:
.content .primary .primary { width: 400px; float: left; display: inline; } .content .primary .secondary { width: 230px; float: right; display: inline; } One thing you’ll notice is that the right-hand padding we gave to the primary div in the in the first example is now being applied to our new primary div in the second example. As such, we need to remove the pading from the more general style and apply it to the more specific style.

.content .primary {
width: 670px; /* width increased and padding removed*/
float: right;
display: inline;
}
.content .secondary {
width: 230px;
float: left;
display: inline;
}
.content .primary .primary {
width: 400px;
float: left;
display: inline;
}
.content .primary .secondary {
width: 230px;
padding-right: 20px; /* padding applied here instead*/
float: right;
display: inline;
}

##Fixed-width, liquid, and elastic layout(固定宽度、流体和弹性布局) ###Liquid layouts With liquid layouts, dimensions are set using percentages instead of pixels. This allows liquid layouts to scale in relation to the browser window. As the browser window gets bigger, the columns get wider. Conversely, as the window gets smaller, the columns will reduce in width. Liquid layouts make for very efficient use of space, and the best liquid layouts aren’t even noticeable.
However, liquid layouts are not without their own problems. At small window widths, line lengths can get incredibly narrow and difficult to read. This is especially true in multicolumn layouts. As such, it may be worth adding a min-width in pixels or ems to prevent the layout from becoming too narrow. However, set the min-width too large and your liquid designs inherit the same constraints as their fixed-width cousins.
However if you want to be more precise, take a look at your browser stats to calculate the most common window size and then pick a wrapper percentage that matches how the fixed width version would look at that size. A good tool for this is Liquid Fold (http://liquidfold.net/). For example, if your designer used a width of 960 pixels and the majority of your users have their browser windows set to 1250 pixels, the percentage to use would be (960 ÷ 1250) × 100 = 76.8 percent.
Next, set the width of the primary and secondary content areas as a percentage of the wrapper width. In the previous example, the width of our primary content div was 670 pixels. As the total width was 920 pixels, this works out as 72.82 percent. Similarly, the width of the secondary content div works out at exactly 25 percent. This leaves a 2.18 percent virtual gutter between the
navigation and the wrapper to deal with any rounding errors and width irregularities that may occur:

.wrapper {
width: 76.8%;
margin: 0 auto;
text-align: left;
}
.content .primary {
width: 72.82%;
float: right;
display: inline;
}
.content .secondary {
width: 25%;
float: left;
display: inline;
} 

Because this layout scales so nicely, there isn’t any need to add a max-width property. However, to ensure the lines of text remain a readable length, it’s always a good idea to add a max-width in ems. The layout does start to get a little cramped at smaller window sizes, so I’m going also to add a min-width in ems as well.

.wrapper {
width: 76.8%;
margin: 0 auto;
text-align: left;
max-width: 125em;
min-width: 62em;
}

###Elastic layouts While liquid layouts are useful for making the most of the available space, line lengths can still get uncomfortably long on high-resolution monitors. Conversely, lines can become very short and fragmented in narrow windows or when the text size is increased a couple of steps. If these limitations are of concern, elastic layouts may be your solution.
Elastic layouts work by setting the width of elements relative to the size of the font instead of the width of the browser. By setting widths in ems, you ensure that when the font size is increased the whole layout scales. This allows you to keep line lengths to a readable size and is particularly useful for people with reduced vision or cognitive disorders.

Elastic layouts are much easier to create than liquid layouts as all of the HTML elements essentially stay in the same place relative to each other; they just all increase in size. Turning a fixed-width layout into an elastic layout is a relatively simple task. The trick is to set the base font size so that 1 em roughly equals 10 pixels.
The default font size on most browsers is 16 pixels. Ten pixels works out at 62.5 percent of 16 pixels, so setting the font size on the body to 62.5% does the trick:

body {
font-size: 62.5%;
text-align: center;
}

Because 1 em now equals 10 pixels at the default font size, we can convert our fixed-width layout into an elastic layout relatively easily. In previous editions of this book, I recommended setting all the widths in ems. However, my esteemed colleague and technical reviewer Natalie Downe suggested keeping the internal widths as percentages and only setting the wrapper width in ems. That way, the internal widths will still size themselves relative to the font size. This allows you to change the overall size of the layout without having to change the width on each individual element, making for a more flexible and maintainable solution.

.wrapper {
width: 92em;
max-width: 95%;
margin: 0 auto;
text-align: left;
}
.content .primary {
width: 72.82%;
float: right;
display: inline;
}
.content .secondary {
width: 25%;
float: left;
display: inline;
}

.content .primary .primary {
width: 59.7%;
float: left;
display: inline;
}
.content .primary .secondary {
width: 34.33%;
padding-right: 2em;
float: right;
display: inline;
}

##Liquid and elastic images

© 著作权归作者所有

共有 人打赏支持
LuXing
粉丝 19
博文 84
码字总数 54768
作品 0
广州
程序员
私信 提问
FLATRO OPENCART 自适应多用途主题模板 ABC-0054

FLATRO OPENCART 自适应多用途主题模板 ABC-0054 FEATURES Compatible with Opencart 1.5.5.x, 1.5.6, 1.5.6.1 Powerful Admin Panel Advanced Search Boxed AutoComplete Search Facebook p......

OpenCart中国
2015/07/21
0
0
Yahoo javascript 开源界面库YUI 和EXT

清清月儿整理 [yui][译]Yahoo!User Interface Libray 介绍 Yahoo! User Interface Library(简称yui) 是一个使用JavaScript编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互...

晨曦之光
2012/03/09
362
0
Mr. Process的一生-Linux内核的社会视角 (2)启动

原文地址: http://www.manio.org/cn/startup-of-linux-view-of-society.html 其实这才应该是这一系列文章的第一节,因为这篇文章讲的是盘古开天地的事。话说Mr. Process是一个现代人,但是,...

晨曦之光
2012/03/09
104
0
Why CSS Grid is better than Bootstrap

CSS Grid is a new way of creating layouts on the web. For the first time ever we have a proper layout system available natively in the browser, which gives us a ton of benefits.......

一真的鱼
2018/06/30
0
0
25+ 个免费和收费的企业网站模板

老外做的网页实在是太专业了,从排版到配色都是一流,自叹不如! 免费企业网站模板 FWT Slide FWT Slide v2 BuildIt Pet Shop web template Business Solutions Website Template Dentist W...

小编辑
2012/03/04
0
1

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(11.9)hive操作基础知识

上一篇博客分享了hive的简介和初体验,本节博主将继续分享一些hive的操作的基础知识。 DDL操作 (1)创建表 #建表语法CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name ...

em_aaron
今天
2
0
OSChina 周四乱弹 —— 我家猫真会后空翻

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @我没有抓狂 :#今天听这个# 我艇牛逼,百听不厌,太好听辣 分享 Led Zeppelin 的歌曲《Stairway To Heaven》 《Stairway To Heaven》- Led Z...

小小编辑
今天
2
0
node调用dll

先安装python2.7 安装node-gyp cnpm install node-gyp -g 新建一个Electron-vue项目(案例用Electron-vue) vue init simulatedgreg/electron-vue my-project 安装electron-rebuild cnpm ins......

Chason-洪
今天
3
0
scala学习(一)

学习Spark之前需要学习Scala。 参考学习的书籍:快学Scala

柠檬果过
今天
3
0
通俗易懂解释网络工程中的技术,如STP,HSRP等

导读 在面试时,比如被问到HSRP的主备切换时间时多久,STP几个状态的停留时间,自己知道有这些东西,但在工作中不会经常用到,就老是记不住,觉得可能还是自己基础不够牢固,知识掌握不够全面...

问题终结者
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部