The third edition of CSS3 tips covers HTML5 Study Notes 13 ~ Chapter 17 ordinary people in the ordinary world

The third edition of CSS3 tips covers HTML5 Study Notes 13 ~ Chapter 17-ordinary people in the ordinary world chapter 13th: Build a floating-based layout

The float attribute is used.

Note: The float: none value will cancel all float. It is usually used only to cancel the float that has been applied in the element.

Remember: you do not need to design the p width for the text, even if it is designed to be a fixed width.

Layout with float

LayoutGala website (http://blog.html.it/layoutgala/) provides 40 different CSS designs, but most of them are just the basic framework, which has only

CSS code for tag and positioning

Layout builder, Cridinator (http://gridinator.com) provides a simple tool for creating complex, multi-column grid systems

A floating element is added to a column.

Overcome floating Problems

Clear floating and keep floating

footer{    clear:both;}

Clear floating on both sides of the element

Clear property value: left, right, both

In non-floating peripheral elements such

The floating element in the tag may be protruding from the bottom of the peripheral element when the floating element is higher than other content in p,

Solution:

1. on the periphery

Add a clear element at the bottom

2. Floating peripheral elements

3. overflow: hidden is used in peripheral elements.

4. Use Micro Clear Fix

Multi-Column Layout

CSS3 introduces the multicolumn layout (Multi-column layout) module, which is not supported by IE9 and earlier versions. The attributes of multicolumns can be found on the W3C official website/

Chapter 2: Basic knowledge of responsive Web Design

Responsive Web design RWD for short.

Ethan Marcotte explained in detail the steps of RWD in his book Responsive Web Design, article: http://www.alistapart.com/articles/responsive-web-design

RWD integrates three concepts: elastic network for layout, elastic media for images and videos, and CSS media queries for different styles for different screen widths.

On the webpageAdd the following code (The top of the tag is its best position. You can ignore the automatic scaling of the webpage by the mobile browser: </p>

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

You can assign a style to the webpage based on the width and height of the target browser.

Media query Policy

1. Adjust Columns

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 background images

Create breakpoint

A media query can tell a browser to use a specific style under a specific condition. A specific condition is usually called a breakpoint.

How to 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 are designed, one for smartphones, one for tablets, and one for desktop browsers.

Desktop or mobile edition preferred

Create a media Query

Only media attributes are added and conditions are set.

IE8 and earlier versions are not supported.Add some js files in, you can also enable the old version of IE to support media queries, download respond.js from http://tinyurl.com/7w49a6z, import:

This is only for exact queries. It is best to use the range value, that is, using max-width (less than or equal to) and min-width (greater than or equal)

Browser Query Information: www.w3.org/TR/css3-mediaqueries

Elastic Mesh

Importance of the sequence of HTML source code

Reset the Box Model

Convert a fixed width to an Elastic Mesh

Streaming Images

Although the columns in the elastic design will shrink as the browser window decreases, but the image does not, this may cause image overflow.

You can use the following method to make the image elastic:

1. First, add a style:

img { max-width:100; }

2. Delete the height and width attributes of all img tags in HTML.

Insufficient streaming Images

The image will stretch to 100% of the column width, which may stretch beyond its natural width, deformation and distortion.

Chapter 2: locating element positioning attributes on a web page

The position attribute of CSS controls how and where the 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, absolute and fixed cannot be applied to the same element together with the float attribute.

Relative positioning: relative to its current position in the HTML stream, unlike absolute positioning, 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: The fixed positioning element is locked at a certain position on the screen.

Static positioning: only indicates that the webpage content will follow the normal HTML stream from top to bottom

The position attribute can change the positioning of any element and use the following four keywords: static, absolute, relative, and fixed.

Note: static positioning elements do not support any of the following positioning values to be discussed.

Set positioning Value

The window display area of the Web browser is also called the viewport. The top, bottom, left, and right sides correspond to top, bottom, left, and right CSS attributes.

The position attribute is followed by more attributes (top, bottom, left, 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 labels:

1. If the position of a tag is absolutely located and it is not in any other tag with absolute, relative, and fixed positioning set, 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 located 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 "all the positioning elements inside me should be located relative to my position"

Stacked Element

Generally, the stacking order of positioning elements is determined by their order in the HTML code of the webpage. However, you can control the stacking order of positioning elements through the CSS attribute z-index:

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. Negative values 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.

Hide some webpages

Absolute positioning elements often use the CSS attribute visibility (visibility) to hide some webpages or hide some of the visibility: hidden, visibility: visible)

Visibility: hidden is similar to display: none, but visibility will leave a blank space on the HTML webpage, and display will not

The opacity attribute can also hide the following elements: opacity: 0, completely invisible, opacity: 1, completely visible.

Powerful positioning strategy

Position Positioning

Part 4 ---- CSS advanced technology chapter 16th: design the CSS technology for printing pages

Functions of Media Style Sheets

CSS supports 10 different media types: all, braille, embossed, handheld, print, projection, screen, speech, tty, TV

Special attention should be paid to the following three media types:

All: applies to each device. This method is used when a style is embedded or linked through an external style sheet.

Screen: Only applicable to displays

Print: Only applicable to printing web pages

Specify the media type for the external style sheet

Technically speaking, @ import url(print.css) print; is also acceptable, but IE does not support

Specify the media type in the style sheet

Use the following statement in the style sheet:

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

Override text style

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, so it is best to set it to a printer style and Use pt as the unit.

Define print background

1. Cancel the background element.

You can use background: white to set the background to white and cancel the image.

2. Retain background elements

3. Add a paging character 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. An element is displayed on the top of the print page.

Page-break-after: always is an element that is displayed at the end of the print page.

Chapter 4 correcting CSS design habits

1. Add comments

2. Organization style and style sheet

3. Clear style naming

4. naming styles Based on purpose rather than appearance

5. Do not name by location

6. Do not use 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.

9. Use comments to separate style groups

10. Use multiple style sheets: You can use @ import to merge multiple style sheets and then introduce'

11. Eliminate style conflicts in browsers: the default styles of different browsers are inconsistent. You must reset the styles.

12. Use a derived selector: minimize the use of the ID selector and reduce the use of classes.

Advanced: Object-oriented CSS. you can log on to the Website: Images and Modular Architecture for CSS (SMACSS). This is a simple style wizard for creating reusable CSS components. Learn about http://smacss.com through the following websites:

13. Try different CSS for IE

Basic Structure of IE condition annotation:

Non-ie browsers will be treated as HTML comments and ignored

For more information about IE condition comments, log on to learn: http://msdn.microsoft.com/en-us/library/ms537512 (VS.85). aspx