The third edition of CSS3 tips covers HTML5 Study Notes 13 ~ Chapter 17, css3html5

The third edition of CSS3 tips covers HTML5 Study Notes 13 ~ Chapter 17, css3html5
In Chapter 13th, the float (floating) attribute is used to build a floating-based layout. Note: The float: none value will cancel all float, which is usually used only to cancel the float that has been applied in the element. Remember: do not need to design the div width for the body, even if the design is fixed width, do not use floating LayoutGala site (http://blog.html.it/layoutgala/) layout provides 40 different CSS design, but mostly only the basic framework, only the <div> label and its positioning with CSS code layout generator, Cridinator (http://gridinator.com) provides a simple tool, used to create a complex multi-column grid system floating elements in floating elements, columns are added to the column. Overcome floating problems, clear floating and keep floating

footer{    clear:both;}

Clear floating clear property values on both sides of the element: left, right, both floating element in non-floating peripheral elements such as <div> label, when the floating element is higher than other content in the div, it may be protruding from the bottom of the peripheral element. solution: 1. Add a clear element at the bottom of the peripheral <div> 2. Float the peripheral element 3. Use overflow: hidden, 4. Use Micro Clear Fix multi-column layout CSS3 to introduce the multicolumn layout (Multi-column layout) module, which is not supported by IE9 and earlier versions. The multicolumns attribute can be found on the W3C Official Website: bytes. Ethan Marcotte explained in detail the steps of RWD in his book Responsive Web Design. Original: Add the following code in detail <meta name="viewport" content="width=device-width">CSS @ viewport can also implement the same function. This code should be placed before all style sheets, but there are still many browsers that do not support this code. You need to add a vendor prefix.

@viewport{ width:device-width; }

Media query can assign a style to the webpage based on the width and height of the target browser. Use Media query policy 1, adjust column 2, elastic width 3, indent Blank Space 4, adjust the font size 5, modify the navigation menu 6. Hide content on a handheld device. 7. Use a background image to create a resumable media query. This allows the browser to use a specific style under certain conditions, A specific condition is usually called a breakpoint. How do I set a breakpoint? A simple practice is to open a webpage in the webpage, and then use the browser window handle to narrow the window. at a specific point, the design will become ugly. In this case, you can set a breakpoint so that the cycle can be set. Generally, three breakpoints will be designed, one for a smartphone, one for a tablet, one for a desktop browser, and one for a desktop browser.

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

The media attribute is added, but the setting condition IE8 and earlier versions are 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. It is best to use the range value, that is, the browser query information with max-width (less than or equal to) and min-width (greater than or equal to): Limit:

img { max-width:100; }

2. Delete the height and width attributes of all img labels in HTML. If the stream image is not enough, the image will stretch to 100% of the column width, which may stretch beyond its natural width, deformation and distortion. Chapter 15th: The position attribute of CSS, a function for locating element positioning attributes on a Web page, controls how and where a Web browser displays specific elements. CSS provides four types of positioning: absolute positioning: You can use pixel, em, or percentage to locate the Left and Right vertices of an element. Note: Do not set the float attribute and any positioning in a style. Apart from static positioning and relative positioning, the absolute and fixed attributes cannot be applied to the relative positioning of the same element at the same time: unlike absolute positioning, relative to the current position in the HTML stream, other elements do not occupy the original position of the relative positioning element in the HTML, the biggest advantage of relative positioning is not to move an element, but to set a new reference point for its internal absolute positioning element. Fixed positioning elements will be locked at a certain position on the screen. Static positioning: It only indicates that the webpage content will follow the normal position attribute of the HTML stream from top to bottom and can change the positioning of any element. The following four keywords are used: static, absolute, relative, fixed note: static positioning elements do not support any of the following positioning values to be discussed. The Web browser window display area is also called the view area ), four top, bottom, left, and right sides correspond to the top, bottom, left, and rightposition attributes of CSS attributes, and more attributes (top, bottom, left, and right) when you use absolute positioning to locate an element on a webpage, the specific location of the element depends on the position of the relevant Element Nested in other tags: 1. If the position of a tag is absolute, it is not in any other tag with absolute, relative, and fixed positioning, it is located relative to the browser window. 2. If one tag is located in another tag with absolute, relative, and fixed positioning, it Is relative to the border of another element. Note: In CSS, the term relative is not exactly the same as its meaning. It can be interpreted as "relative to me. That is, when you set relative positioning for a label, it means that "all the positioning elements inside me should be located relative to my position". Generally, the stacking order for locating overlapping elements is determined by their order in the HTML code of the webpage. However, you can use the CSS attribute z-index to control the stacking order of positioning elements: z-index: 3; the value is a number. The larger the number, the closer it is to the top of the stack, that is, it appears in front of the HTML page. A negative value can also be used, positions an element under its parent element or any of its ancestor elements. Note: IE7 and earlier versions are not supported. The maximum value of z-index is 2147483647 to hide absolute positioning elements of some webpages. CSS attribute visibility (visibility) is often used to hide some webpages or hidden parts of visibility: hidden, visibility: visible (visible) visibility: hidden is similar to display: none. However, visibility will leave a blank space on the HTML page, and display will not hide the opacity attribute or the element: opacity: 0, completely invisible, opacity: 1, completely visible powerful positioning strategy comprehensive use position positioning Part 4 ---- CSS advanced technology chapter 16th, design the CSS technology for printing pages the function of the Media style sheet CSS supports 10 different Media types: all, braille, embossed, handheld, print, projection, screen, speech, tty, and TV media types that require special attention: all: applicable to each device, when a style is embedded or linked through an external style sheet, screen is used: Only for display print: Only for printing a webpage to an external style sheet to specify the media type

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

Technically, @ import url(print.css) print; is also acceptable, but IE does not support specifying the media type in the style sheet using the following statement:

@media print{     /*put your styles for printer in here*/}

Rewriting text styles using pixel or em units may be good for browsers, but it does not work for printers. The browser converts it to the unit of printing according to its own explanation: Point (pt). Different browsers have different interpretations, therefore, it is best to use pt as the unit definition to print the background for the printer style. 1. Cancel the background element and use background: white. You can directly set the background to white, remove the image 2, retain the background element 3, and add pagination characters to the print. Use the page-break-before and page-break-after attributes page-break-before: always allows the Web browser to insert a pagination character before a specified style, that is, an element is displayed on the top of the print page-break-after: always is an element that is displayed in the last chapter 17th of the print page, correct CSS design habits 1. Add comments 2. Organize styles and style sheets 3. Clear style naming 4. Name styles Based on purpose rather than appearance 5. Name them by location 6. Do not use meanings fuzzy name 7. Multiple classes can save time 8. Group styles: combine the styles used by the relevant parts on the webpage, and combine the styles related to the purpose. Release separator style group 10. Use multiple style sheets: You can use @ import to merge multiple style sheets and then introduce '11 to eliminate style conflicts in the browser: that is, the default styles of Each browser are inconsistent. You need to reset the style 12 and use the derived selector: reduce the use of the ID selector as much as possible, and reduce the use of the Class. Advanced: Object-oriented CSS, you can log on to the Website: Login and Modular Architecture for CSS (SMACSS), which is a simple style wizard for creating reusable CSS components. You can learn through the following website: http: // smacss. com13. Try to annotate the basic structure of different CSSIE conditions for IE:

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

Non-IE browser comments as HTML and ignores comments about IE conditions for more information, please log on to learn: http://msdn.microsoft.com/en-us/library/ms537512 (VS.85). aspx