CSS3 Third edition covers HTML5 study notes 13~17 Chapter

13th, floating-based layouts are used for float (float) propertiesNote:The Float:none value cancels all floats and is usually used only to remove floats that have already been applied in the element.Remember:Does not need to give the body the div design width, even if the design is fixed width also does not use the floating to Layout Layoutgala website (http://blog.html.it/layoutgala/) provides 40 different CSS designs, but mostly is only the basic frame, inside only <div> tag and its positioning CSS code layout generator, Cridinator (http://gridinator.com) provides a simple tool to create a complex multi-column grid system floating elements in floating elements, adding columns to columns. Overcoming floating problems clear float and keep floating

Footer {    clear:both;}

Clear floating clear property values on both sides of the element: Left,right,both floating elements in non-floating peripheral elements such as the <div> tag may cause the floating element to protrude from the bottom of the perimeter element when it is higher than the other content inside the Div, as a workaround: 1, in the periphery <div> Add a clear element 2, floating peripheral element 3, using Overflow:hidden, use 4 in peripheral elements, using micro Clear fix multi-column layout CSS3 introduced multicolumn layout (multi-column layouts) module , IE9 and earlier versions are not supported, Multicolumns properties can be found on the website: www.w3.org/TR/css3-multicol/, an online tool for creating and previewing multiple columns: www.aaronlumsden.com/ multicol/the 14th chapter, responsive web Design responsive web design basic knowledge responsive web design is called RWD. Ethan Marcotte in his book Responsive Web design, detailing the steps of RWD, original: http://www.alistapart.com/articles/ RESPONSIVE-WEB-DESIGNRWD combines three ideas: elastic networks for layouts, elastic media for pictures and videos, CSS media queries that create different styles for different screen widths add the following code to the

<name= "Viewport"  content= "Width=device-width">

CSS @viewport can also achieve the same function, you should put this code in front of all stylesheets, but there are still many browsers do not support, need to add a vendor prefix line

@viewport { width:device-width;}

Media queries can assign styles to Web pages based on the width of the target browser use strategy 1 for media queries, adjust column 2, Flex width 3, indent white space 4, adjust font size 5, modify navigation menu 6, hide content on handheld devices 7, Create breakpoints using a background image media queries can tell the browser to use a particular style under certain conditions, which is often referred to as a breakpoint setting. The simple way to do this is to open a Web page in a Web page and then use the browser window handle to narrow the window, and at some point the design will become difficult to see, so you can set a breakpoint so that it loops. In general, 3 breakpoints will be designed, one for smartphones, one for tablets, one for desktop browsers or for mobile, to create media queries first.

<href= "Css/small.css"  rel= "stylesheet"  media= "(width:480px)">

Just added media properties, set conditions IE8 and earlier version is not supported by adding some JS in the document

<!-- [If LTE IE 8>    <script src= "Respond.min.js" ></script><![ ENDIF] -

This is only for accurate queries, preferably using range values, i.e. with max-width (less than equals) and min-width (greater than or equal) about the browser query information: www.w3.org/TR/ Css3-mediaqueries the importance of the order of the elastic grid HTML source Reset box model converts a fixed width into an elastic grid streaming picture Although columns in the flex design shrink as the browser window shrinks, the picture does not, This may cause the picture overflow boundary to make the picture resilient using the following method: 1. First, add a style:

{ max-width:+;}

2. Deleting the height and Width properties of all IMG tags in HTML will stretch the image to the 100% width of the column, which can stretch beyond its natural width, deform and distort. The 15th chapter, positioning the elements on the page property of the function CSS position properties can control how and where and where the Web browser displays specific elements of CSS provides 4 types of positioning: absolute positioning: by Pixel, The EM or percentage position is positioned on the left and right side of the unit setting element.Note:Do not set the Float property and any kind of positioning in one style at the same time, in addition to static positioning and relative positioning, absolute and fixed can not be used in conjunction with the Float property for the same element relative positioning: relative to its current position in the HTML stream positioning, unlike absolute positioning, Other elements do not occupy the position where the relative positioning element was originally located in the HTML, the advantage of relative positioning is not moving the element, but to its internal absolute positioning elements set a new reference point fixed positioning: Fixed positioning elements will be locked in a position on the screen. Static positioning: Simply means that the content of the Web page will follow the normal top-to-bottom HTML stream Position property can change the positioning of any one element, using the following 4 keywords: static, absolute, relative, fixedNote:The static positioning element will not support any of the following positioning values to be discussed setting the anchor value the Web browser window display is also known as the View (viewport), with top, bottom, left, and right 4 edges, corresponding to the CSS properties top, bottom, leave, There are more properties (top, bottom, left, right) behind the Rightposition attribute when positioning an element on a Web page with absolute positioning, depending on where the relevant element is nested in other tags: 1, if the position of a label is absolutely positioned, And it is not in any other set of absolute, relative, fixed positioning tags inside, it is relative to the browser window positioning 2, if a label in another set absolute, relative, fixed positioning of the label, Then it is positioned relative to the border of the other element.Note:In CSS, the term relative is not exactly the same as its original meaning, and can be interpreted as "relative to me". That is, when you set relative positioning on a label, it means "I have all my internal positioning elements positioned relative to my location" stacking elements in general, the stacking order in which positioned elements overlap is determined by their order in the HTML code of the Web page.     However, the stacking order of positioned elements can be controlled by CSS property Z-index: Z-index:3; This value is a number, the larger the number, the closer to the top of the stack, which appears in front of the HTML page, you can also use negative values to position an element under its parent element or any of its ancestor elements.Note:IE7 and earlier versions are not supported, the Z-index maximum is 2147483647 hidden portions of the page absolutely positioned elements are often used with CSS properties visibility (visibility), hiding some pages or showing hidden portions of Visibility:hidden (hidden), Visibility:visible (visible) Visibility:hidden is similar to display:none, but visibility leaves a blank space on the HTML page, Display does not opacity attributes or can hide elements: opacity:0, completely invisible, opacity:1, fully visible powerful positioning strategy integrated using position positioning Part IV----CSS Advanced technology 16th chapter, CSS technology for designing print pages The role of the media style sheet CSS supports 10 different media types: all, Braille, embossed, handheld, print, projection, screen, speech, TTY, TV should pay special attention to the 3 types of media: all: For each device, when the style is embedded or linked through an external style sheet, this is the way to use screen: only for the display print: For printing the page to the external style sheet specified media type

<rel= "stylesheet"  media= "print"  href= " Print.css ">

Technically: @import URL (print.css) print; Yes, but IE does not support specifying a media type in a style sheet using the following statement in the style sheet:

@media Print {/     *put your styles for printerin here*/}

overriding text styles using pixel or EM units may be good for browsers, but it doesn't work for printers. The browser will convert it to a printed unit according to its own explanation: Point (PT), different browser interpretation is not the same, so it is best to set the style for the printer using PT as the unit to define the print background 1, cancel the background elements using Background:white; You can directly set the background to white, and cancels the picture 2, retains the background element 3, adds a page break to the print use the Page-break-before and Page-break-after properties page-break-before:always to have the Web browser insert a page break before a specified style, is an element that appears at the top of the printed page page-break-after:always is an element that appears in the final 17th chapter of the printed page, correct CSS design habits 1, add comment 2, organization style and style sheet 3, style naming to clear 4, based on the use rather than the appearance of the naming style 5, Do not name 6 based on location, do not use ambiguous name 7, use multiple classes to save time 8, group styles: Set the styles used in the relevant parts of the page together, set the use-related styles together 9, separate the style group 10 with comments, Use multiple style sheets: You can use @import to merge multiple style sheets, and then introduce ' 11, eliminate browser style conflicts: The default style of each browser is inconsistent, to reset the style 12, use derived selectors: Minimize the use of the ID selector, and reduce the use of classes advanced: Object-oriented CSS, Can log on to the website: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/, You can also view the OOCSS project on the following Web site: Https://github.com/stubbornella/oocss, another method called scalable and Modular Architecture for CSS (SMACSS), This is a simple style wizard that creates reusable CSS components. The following Web site can be used to understand: http://smacss.com13, to IE try different cssie conditions Annotation basic structure:

<!-- [If ie]>/    * for IE style */<![ ENDIF] -

Non-IE browser will be treated as HTML comment and ignore the IE conditional comment For more information, please login to learn: http://msdn.microsoft.com/en-us/library/ms537512 (vs.85). aspx

CSS3 Third edition covers HTML5 study notes 13~17 Chapter