"CSS3 Cheats" 第12-17 Chapter

Chapter 12th Introduction to CSS layout

1. Type of page layout

1) Fixed width

2) Flow Type

3) Responsive Web Design

2. CSS Layout Strategy

1) Start with the content

2) Mobile First

The 13th chapter constructs a floating-based layout

1. Simple two-column floating layout design steps

1) In each column is wrapped in a <div> tag with ID or class attribute

2) Float the sidebar <div> to the right or left: the html of the floating element must precede the HTML of the element to surround it

3) Set a width for the floating side bar

4) Add a left/right margin to the body

2 . Overflow may occur when floating one or more elements in a non-floating peripheral label, such as <div>. The solution is as follows:

1) Add a clear element at the bottom ofthe peripheral label, such as <div>:<div> <br class="clear"/> </div> br.clear{ Clear:both;} , the problem is that it generates additional HTML Code

2) Floating Peripheral elements: Be sure to add a clear property to any element behind the floating container to ensure that the floating element falls below the container

3) Use Overflow:hidden: If there are elements in the floating container that have the absolute position of the personality, they may not show up

4) Use Micro Clear Fix: Set the. Clear:after{content in the external style sheet :""; display:table; Clear:both;} . Clear{zoom:1;}

3, multi-column layout: In the peripheral label such as <div> set . multicol{column-count:3; column:1em; column-rule:1px dotted Black;} , IE9 and earlier versions do not support multiple columns and need to Chrome and the Safari as well Firefox using vendor prefixes

4, Box-sizing

1) Content-box: Contains the width property value

2) Padding-box: Contains the sum of the values of the left/right padding and the width property

3) Border-box: Includes left/right border,left/right padding, and width Sum of property values

Firefox needs to use vendor prefixes

14th-Responsive Web Design

1. Make the screen of the browser match the display screen of the phone

1) <meta name= "Viewport" content= "Width=device-width" >

2) @viewport {width:device-width;}

2, the Media query strategy

1) Adjust columns

2) Elastic width: For mobile phones and tablets it is best to set the width of <div> to auto or 100%

3) Shrink white space: reduce margin and padding value

4) Adjust font size

5) Modify the navigation menu

6) Hide content on handheld devices

7) Use the background image

3. Set breakpoints: Typically 3 groups of media queries are created for 3 different breakpoints , one for smartphones (less than 480px,< Link href="css/small.css" rel= "stylesheet" media= "(max-width:480px)" >), another for tablets (larger than 480px , less than 768px,<link href= "css/medium.css" rel= "stylesheet" media= "(min-width : 481px) and (max-width:768px) ">", and a desktop-based display (greater than 768px,<link href= "Css/large.css" rel= " Stylesheet "Media=" (min-width:769px) >)

4. Include media queries in the style sheet

1) Use @import directive:@import url (css/small.css) (max-width:480px);

2) Embed media query in style:@media (max-width:480px) {. style{}}

5. Streaming Picture: Setting max-width:100%, deleting height and width Properties

Chapter 15th locating elements on a webpage

1, absolute positioning:absolute, to pixel,em or percentage Position the unit on the left and right of the set element

2, relative positioning:relative, relative to its current position in the HTML stream positioning, the other page elements will not occupy the relative positioning elements originally in the HTML the location in which it is located

3 positioning: Fixed

4. Static positioning:statics, default

5, the positioning of the precautions

1) If a position is absolutely positioned, and it is not in any other label that sets the absolute,relative , or fixed positioning, Then it's a browser-relative window.

2) If one of the labels is in another label that sets the absolute,relative , or fixed positioning, Then it is positioned relative to the edge of the other element.

6, Stacking elements:Z-index, the larger thevalue, the more the element appears closer to the top of the stack, the value is negative, and the element appears under its parent element or any of its ancestor elements.

7. Hide some pages

1) visibility:hidden/visible

2) Display:nonewill leave a blank in the position where the element was originally, but not for an absolutely positioned element that is already out of the page stream

3) OPACITY:0/1

The 16th chapter designs the CSS Technology of the printing page

1. Media Style sheet

1) all style: suitable for every kind of device

2) screen style: for display only

3) Print style: only for printed pages

4) Other styles:Braille,embossed,handheld,projection ,speech,tty , and TV

2. Add Media style sheet

1) Specify the media type for the external style sheet: <link rel= "stylesheet" href= "Print.css" media= "print"/>

2) Specify the media type in the style sheet:@media print{.style{}}

3. Show link in print:a[href^="/http"]:after{content: "(" attr (HREF) ")"}

4. Hide unwanted page areas: Create a class style in the main style sheet and set the display property value to none,and then in the class style for the plot style table , display attribute value is set to block

5. Add a page break to the print: To make an element appear at the top of the printed page, set the page-break-before:always; to make an element appear at the bottom of the printed page, set the page-break-after:always

The 17th chapter corrects the CSS design Habit

1. Add Comment:/* * /

2. Organization style and style sheet: style name to be clear, to name the style according to the purpose, not the appearance, do not name according to the location, do not use the ambiguous name

3. Use multiple classes to save time

4. Group styles: Set the styles used in the relevant parts of the page together, set the use-related styles, and separate the style groups with comments

5. Eliminate browser style conflicts: Delete padding and margin, use a uniform font size, make sure that HTML5 elements are displayed as block-level elements, Set a uniform row height, delete the border lines of the table, create cells that look the same, delete the border lines around the linked picture, set a uniform list indent and list symbol, remove quotation marks from the summary material

6. Using derived selectors

7 . Try different CSS for Internet Explorer

<!--[if IE 7]>

<link href= "Ie7_styles.css" rel= "stylesheet" >

<! [endif]-->

(<!--[if IE 8]>

<style>

@import url ("Ie8_styles.css")

</style>

<! [endif]-->)

"CSS3 Cheats" 第12-17 Chapter