Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what are the basic knowledge points of the layout of CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Common layout categories one column layout

Top-down, the general head has a fixed width and the height is set to automatic

Two-column layout

Adaptive two-column layout: percentage + float for width

Fixed width two-column layout: width: specific value / parent element width affirmation, width+ percentage; + float; can not achieve side-by-side two-column layout without float.

Three-column layout

The traditional three-column layout is based on float.

Special three-column layout: fixed left and right, adaptive in the middle, absolute positioning in the left and right, and three-column layout in the middle with margin: fixed on the left and right, adaptive in the middle:

Location Mechanism in CSS

Standard document stream

Float

Absolute positioning

The principles of the structure and expression of simple layout of web pages

Maximize the simplification of the structure of html, and then set it with css to reduce the fit between html and css

You should not add meaningless tags for the sake of styles.

The structure is separated from the performance, the structure is simple, and the construction structure does not consider the layout style.

CSS element hiding

{display: none; / * does not occupy space and cannot be clicked * /}

{visibility: hidden; / * occupies space, cannot click * /}

{position: absolute; clip:rect (1px 1px 1px 1px); / * does not occupy space and cannot be clicked * /}

{position: absolute; top:-999em; / * does not occupy space and cannot be clicked * /}

{position: relative; top:-999em; / * occupies space and cannot be clicked * /}

{position: absolute; visibility: hidden; / * does not occupy space and cannot be clicked * /}

{height: 0; overflow: hidden; / * does not occupy space and cannot be clicked * /}

{opacity: 0; filter:Alpha (opacity=0); / * occupy space, you can click * /}

{position: absolute; opacity: 0; filter:Alpha (opacity=0); / * does not occupy space, you can click * /}

The optimal method of clearing floating in CSS

Add overflow:hidden to the parent

Advantages: there are no structural and semantic problems, and there is very little code

Disadvantages: when the content increases, it is easy to avoid automatic line wrapping, causing the content to be hidden and unable to show the elements that need to overflow.

The parent element is also set to float (plus a float:left/right)

Advantages: there are no structural and semantic problems, and there is very little code

Disadvantages: the layout of elements adjacent to the parent element will be affected, it is not possible to float to body, it is not recommended to use

Parent element sets display:table

Advantages: the semantics of the structure is completely correct and the amount of code is very small.

Disadvantages: the properties of the box model have changed, resulting in a series of problems, the losses outweigh the gain, and it is not recommended to use

Use: after pseudo element

Advantages: it is important to note that after is a pseudo-element, not a pseudo-class (called "pseudo-object" in some CSS manuals), and many articles such as removing floats are called pseudo-classes, but csser should be more rigorous, which is an attitude.

Since IE6 ⑺ does not support: after, use zoom: to trigger hasLayout.

Cons: compatibility is not very good.

Add an empty tag after the floating element

Clear float

Advantages: simplicity and clarity

Disadvantages: meaningless empty tags, not conducive to semantics

DIV+CSS specification named collection

Naming convention description:

All names should be lowercase.

Each label should have a beginning and an end, and it should have the right level, and the typesetting should be regular and neat.

The empty element should have an ending tag or add "/" after the starting tag.

The expression is completely separated from the structure, and the code does not touch any expression elements, such as style, font, bgColor, borde r, etc.

The definition should follow the principle from large to small, reflect the structure of the document, and benefit the query of the search engine.

Add a unique, structural tag id to each table and form

Tag the picture with alt

Use English naming principles whenever possible

Don't abbreviate as much as possible, except for words that are easy to understand.

DIV+CSS naming reference table

CSS style naming description CSS file naming description wrapper page periphery control overall layout width master.css,style.css main container or # content container for outermost module.css module layout layout base.css basic common head,#header page header layout.css layout, layout foot # footer footer part themes.css theme nav leading navigation columns.css column subnav secondary navigation font.css text, font menu menu forms.css form submenu submenu mend.css patch sideBar sidebar print.css print sidebar_a # sidebar_b left column or right column main page body msg#message prompt information tips Mini skills vote vote friendlink Friendship connection title title summary Summary searchInput search input box hot popular search search search_output search output and search results similar to searchBar search bar search_results search results copyright copyright information branding trademark logo website LOGO logo siteinfo website information siteinfoLegal legal statement siteinfoCredits reputation. Tab tab joinus join me Our partner partners service service regsiter registration arr/arrow arrow guild guide sitemap site map list list homepage home page subpage2 level page sub-page tool # toolbar toolbar drop drop-down dorpmenu drop-down menu tag tag status status scroll rotate .left.right.center left, middle, right .news .download .download .banner banner (top banner) import style and script traditional way

Use online CDN

This is a reference to the JS file

This is a reference to the CSS file

Invoke local files

This is a reference to the JS file

This is a reference to the CSS file

New norms

According to the HTMl5 specification, it is generally not necessary to specify when introducing CSS and JavaScript files

This is the end of the content of "what are the basic knowledge points of CSS layout". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.