css3-based on floating layout, responsive web design, positioning elements on the Web page, designing CSS technology for printing pages

Floating-based layouts:

1. Unless the picture is set to a width, you should always set a width for the floating picture, which allows the browser to make room for other content.

2. When the height of the sidebar is inconsistent with the height of the main content area, it can be adjusted with a margin

3, in a non-floating element <div> There is a floating element, when the floating element is higher than the element itself, the content will overflow <div>, the solution is as follows:

A: Add a newline before </div>, and add a class <br class= "clear"/>, then create a style br.class{clear:both;}

B: Let non-floating elements also float, but when choosing this method, be sure to add a clear property to any element behind the floating container to ensure that the floating element falls below the container

C: Add Overflow:hidden to the peripheral Quick style, and he will force the perimeter to expand to include floating elements, however, if the container contains absolutely positioned elements, it may not show

d:.clear:after{

Content: "";

display:table;

Clear:both;

}

. clear{

Zoom:;

}

/* These two styles are designed to enable IE6 and IE7 to have layouts */

/* Once you have added these styles to the style sheet, simply add the class name to the <div> that contains the floating element.

Eg:<article class= "Clear" >*/

. Clearfix:after{content: "/200b";d Isplay:block;height:0;clear:both;overflow:hidden;}

. Clearfix{*zoom:1;}

4. The elements are divided into several columns:

Column-count:2; Set the number of columns

Column-gap:1em; Set the interval between columns

column-rule:1px dotted black; draw a line between columns

IE9 and its previous unsupported, like Chrome and so on also need to add a prefix, opera can directly support

5, with box-sizing to prevent floating whereabouts:

Content-box:padding+border+content

Padding-box:padding+content

Border-box: Already contains the Padding,border, and the width

*{

-moz-box-sizing:border-box; Firefox browser

Box-sizing:border-box;

}

The Box-sizing property is not supported in IE7 and prior versions

6, when the three-column layout, if the right floating column is placed after the main, will cause the floating not to the right, so it should be placed under the left float---this is for the main content bar does not float

If all three columns are floating, there is no need to adjust the order

7. The clear property forces an element to fall below the floating element

Responsive Web Design:

1, instruct the browser how to display the content of the Web page: placed above the title tag

<meta name= "viewport" content= "Widt=divice-width" >

Viewport refers to the browser's screen, the content property sets the width of the browser to the width of the phone's screen, which tells the phone that the browser does not need to zoom out, but that the width of the screen matches the actual display screen of the phone

2. In addition to the method described in 1, there is one way to add a style to the top of the style sheet:

@viewport {

Width:device-width;

}

3, <link href= "Css/small.css" rel= "stylesheet" media= "(min-width:480px) and (max-width:768px)" >

4, IE8 and previous version is not support media query, add some JavaScript in

<!--[If LTE ie8]>

<script src= "Response.min.js" ></script>

<! [End If]-->

5. Add media queries to the style sheet

A: @import url (css/small.css) (max-width:320px); -----IE8 and previous versions will not load and will be placed at the beginning of the style sheet

B: Embed the media query in the style sheet:

@media (max-width:480px) {

body{

}

. style{

}

}

6. When converting pixels to percentages, the following decimals do not need to be rounded

7. Set the picture to flow:

First: Add a style to the style sheet img{max-width:100%}

Second: Delete the Heigh and width of properties in the webpage

8. Use Inline-block on the navigation elements to keep the links side-by, while preserving padding and margin

9, in the responsive layout, after clearing the float, setting display as Inline-block is the only way to center the navigation button

To locate elements on a Web page:

1. Do not set the float property at the same time in one style and any kind of positioning

2, absolute positioning: elements on the page do not know the existence of absolute positioning elements

If you just set an element to be absolutely positioned and not provide up or down four positions, then the browser will keep the element in place on the page, but stack it on top of other content

An absolutely positioned element is actually placed relative to the boundary of his nearest positioned ancestor element.

A: If the position of a label is absolutely positioned, and he is not in any other label that sets the absolute,relative or fixed positioning, then it is positioned relative to the browser's window

B: If a label is inside another label that sets the absolute,relative or fixed positioning, it is positioned relative to the edge of the other element

3, relative positioning: relative to its current position in the HTML stream, other page elements will not occupy the relative elements in the original position in the HTML, the most important advantage of relative positioning is not moving elements, but to his internal absolute positioning elements set a first reference point

4, fixed positioning, the same effect as background-attachement:fixed, when the visitor Scrolls the page, the fixed element will remain on the screen is not moving

5, stacking in positioning: z-index:3; The larger the value, the closer the element is to the top of the stack, meaning that the larger the image appears above the other picture

The value of Z-index can also be negative, you can position an element under its parent element or any ancestor element (but not before IE7), such as a part of a title is masked by a badge, we can set the value of the badge's z-index to a negative number, An absolutely positioned element is placed behind its parent element.

6, absolute positioning when often used a CSS property visibility, it allows you to hide some of the web pages, hidden and visible

Visibility:hidden and Display:none differences: Display:none does not leave traces of the page disappears from the top, but Visibility:hidden just block the browser to display the contents of the element, And leave a hole in the position where the element was originally located.

Another way to hide elements: Opacity is 1 for display, 0 for hiding, but for a transition to simulate this effect

7, put the description text above the picture, to use absolute positioning

8. In HTML:

<figure class= "Hat" >

<figcaption> a piction of a hat</figcaption>

</figure>

In the CSS:

. Hat figcaption{

Display:none;

Position:absolute;

bottom:0;

left:0;

right:0;

Background-color:white;

}

. Hat:hover figcaption{

Display:block;

}

/* Description text becomes visible when the visitor's mouse passes through the picture

All <figcation> tags in the element with the Hat class will only function when the mouse passes through the element.

9, you can use positioning to make an element beyond the boundaries of another element, that is, using negative values

10, fixed positioning, if the sidebar is fixed and is also higher than the scrollable main content width, because the sidebar is not scrolling, so will not see beyond the part

11, unlike absolute positioning, fixed positioning is always relative to the browser window

CSS technology for designing printed pages:

1. CSS supports 10 different media types: All,braille (reader for the Blind), EMBOSSED,HANDHELD,PRINT,PROJECTION,SCREEN,SPEECH,TTY,TV

All----for every device

Screen-----for displays

Print----for printing web pages

2, <link rel= "stylesheet" media= "print" href= "Print.css"/>

3, when creating and testing the plot style table, to delete the media= "print" property, and close all the only for the screen style sheet, for example, the media= "screens" changed to Media= "speech", this method allows you to browse the page in a Web browser, But it shows the format of the printer settings, if it feels good, you can change the media type to the corresponding

4. Define directly in the style sheet:

@media print{

h1{}

p{}

}

5. Page-break-before:always makes certain title elements always appear at the top of the page, and properties are also useful for large images, which can be printed on a single sheet of paper

Page-break-after:always makes an element appear at the end of a printed page face

6. Add a URL at the end of each link

a:after{

Content: "(" attr (HREF) ")"

}

css3-based on floating layout, responsive web design, positioning elements on the Web page, designing CSS technology for printing pages