Advanced CSS Chapter 8 Layout

時間  2019-11-08
標籤 advanced css chapter layout 欄目 CSS 简体版
原文   原文鏈接

#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 aboutwindows

  • 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:app

<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:ide

.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.flex

###使用定位和負值空白邊讓設計居中
首先定義容器的寬度。而後將容器的position設置爲relative：ui

#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.this

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

<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.spa

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)..net

.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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程