CSS Layout Basics Summary

• Common layout types
  • A list of layouts
  • Two-Column layout
  • Three-column layout
• The positioning mechanism in CSS
• The principle of structure and expression of simple layout of web pages
• CSS element hiding
• Clear floating optimal method in CSS
• Divcss Canonical named Collection
• Divcss named reference table
• Importing Styles and scripts
  • Traditional way
  • New specification

Common layout types one column layout

• Top-down, general head fixed width, height set to auto

Two-Column layout

• Adaptive two-column layout: width in percent +float;
• Fixed-width Two-column layout: Width: specific/parent elements, width+ percentage; +float;
  If you do not add float, you cannot implement a two-column layout side-by.

Three-column layout

• The traditional three-column layout relies on the float implementation
• Special three-column layout: Left and right fixed, the middle adaptive situation, the use of absolute positioning to achieve, the middle with margin.
  Three-column layout: Left and right fixed, intermediate adaptive:

The positioning mechanism in CSS

1. Standard document Flow
2. Floating
3. Absolute positioning

The principle of structure and expression of simple layout of web pages

• Maximize the simplification of the HTML structure and then set it up with CSS to reduce the fit between HTML and CSS
• You should not add meaningless labels for styles
• The structure and performance are separated, the structure is concise, the construction structure does not consider the layout style

CSS element hiding

{  display: none; / * Do not occupy space, cannot click * / }{  visibility: hidden; / * Occupy space, cannot click * / }{  position: absolute;  clip:rect (1px 1px 1px 1px); / * Do not occupy space, cannot click * / }{  position: absolute;  Top: -999em; / * Do not occupy space, cannot click * / }{  position: relative;  Top: -999em; / * Occupy space, cannot click * / }{  position: absolute;  Visibility: hidden; / * Do not occupy space, cannot click * / }{  height: 0;  Overflow: hidden; / * Do not occupy space, cannot click * / }{  opacity: 0;  filter:Alpha (opacity=0); / * Occupy space, you can click * / }{  position: absolute;  opacity: 0;  filter:Alpha (opacity=0); / * Do not occupy space, you can click * / }

Clear floating optimal method in CSS

Add Overflow:hidden at parent level
Pros: No structural and semantic problems, very little code
Cons: When content grows, it is easy to cause the content to be hidden from being wrapped and not be able to display elements that need to overflow

The parent element is also set to float (add a float:left/right)
Pros: No structural and semantic problems, very little code
Disadvantage: The layout of the elements adjacent to the parent element is affected and cannot be floated to the body, not recommended

Parent element Settings Display:table
Pros: The structure is semantically correct and the code is very small
Cons: Box model properties have changed, resulting in a series of problems, not worth the candle, not recommended to use

Use: After pseudo element
Pros: It is important to note that after is a pseudo-element, not a pseudo-class (some CSS manuals called "pseudo-objects"), many of the articles such as the removal of floats are called pseudo-classes, but csser to be rigorous, this is an attitude.
Because IE6-7 does not support: After, use zoom:1 to trigger haslayout.
Cons: Compatibility is not very good.

Add an empty label after a floating element

Clear floating
Advantages: Simple and clear
Cons: Meaningless empty tags that are not conducive to semantics

Div+css Canonical named Collection

Naming specification Description
1), all the names are preferably lowercase
2), the value of the attribute must be enclosed in double quotation marks (""), and must have values such as class= "DIVCSS5", id= "DIVCSS5"
3), each label must have the beginning and the end, and must have the correct level, the layout has the regularity neatly
4), empty element to have the end of the tag or after the beginning of the tag plus "/"
5), performance and structure are completely separated, the code does not involve any expression elements, such as style, font, bgColor, border, etc.
6), the definition, should follow from the big to the small principle, manifests the document structure, and facilitates the search engine query.
7), add a unique, structure tag ID to each table and form
8), add alt tag to picture
9), to use the English naming principle as far as possible
10), as far as possible not abbreviated, unless a look to understand the word

Div+css named reference table

CSS style naming	Description		css file naming	instructions
Wrapper	Page perimeter control Overall layout width		Master.css,style.css	of the main
Container or #content	container, for outermost		Module.css	Module
Layout	Layout		Base.css	Basic public
Head, #header	Page Head points		Layout.css	Layout, layout
Foot, #footer	Footer section		Themes.css	Theme
Nav	Main navigation		Columns.css	Column
Subnav	Second-level navigation		Font.css	Text, Font
Menu	Menu		Forms.css	Form
Submenu	Sub-Menu		Mend.css	Patch
SideBar	Side bar		Print.css	Print
Sidebar_a, #sidebar_b	Left column or right column
Main	Page body
Tag	Label
Msg#message	Prompt information
Tips	Little Tricks
Vote	Vote
Friendlink	Friendship Connection
Title	Title
Summary	Summary
Loginbar	Login Bar
Searchinput	Search Input Box
Hot	Popular hot Spots
Search	Search
Search_output	Search output is similar to search results
Searchbar	Search bar
Search_results	Search results
Copyright	Copyright information
Branding	Trademark
Logo	Website Logo logo
Siteinfo	Website Information
Siteinfolegal	Legal Notices
Siteinfocredits	Credibility
Joinus	Join us
Partner	Our Partners
Service	Service
Regsiter	Registered
Arr/arrow	Arrow
Guild	Guide
Sitemap	Site Map
List	List
Homepage	Home
Subpage	Level two page face page
Tool, #toolbar	Tool bar
Drop	Drop down
Dorpmenu	Drop-down menu
Status	State
Scroll	Rolling
. tab	tab page
. left.right.center	Left, centre, and right
. News	News
. download	Download
. Banner	Banner (top ad bar)

Traditional ways to import styles and scripts

• Referencing an on-line CDN
  
  • <script type="text/javascript" href="xxx/xxx.js"> 这是引用JS文件
  • <script type="text/css" href="xxx/xxx.css">这是引用CSS文件
• referencing local files
  
  • <script type="text/javascript" src="xxx/xxx.js"> 这是引用JS文件
  • <script type="text/css" src="xxx/xxx.css">这是引用CSS文件

New specification

According to the HTML5 specification, it is generally not necessary to specify the type attribute when introducing CSS and JavaScript files, because Text/css and text/javascript are their default values, respectively.

<!--External CSS--  <link  rel  =  "stylesheet"  href  = "code-guide.css" ;  <!--in-document CSS-->  <style ;   /* ... */   </style ;  <!--JavaScript-->  <script  src  = "code-guide.js" ;     </script ;   

CSS Layout Base rollup