Summary of CSS layout basics_html/css_WEB-ITnose

Common layout types

One column layout

Two column layout

Three column layout

Positioning mechanism in CSS

Principles of structure and performance of simple web page layout

Hide CSS elements

The best way to clear floats in CSS

DIVCSS specification naming collection

DIVCSS naming reference table

Import styles and scripts

Traditional way

New specification

Common layout types

One-column layout

Top-down, generally the header has a fixed width and the height is set to automatic

Two-column layout

Adaptive two-column layout: width is float as a percentage;

Fixed-width two-column layout: width: specific value/width of parent element is determined, width is percentage; float;
If float is not added, side-by-side two-column layout cannot be achieved.

Three-column layout

The traditional three-column layout relies on float

Special three-column layout: fixed left and right, adaptive in the middle, left and right are implemented using absolute positioning , the middle is implemented with margin.
Three-column layout: left and right fixed, middle adaptive:

Positioning mechanism in CSS

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

Principles of structure and performance of simple layout of web pages

Simplify the structure of html to the greatest extent, and then use css to set it up to reduce the fit between html and css

You should not add meaningless tags for the sake of style

Structure and presentation are separated, the structure is simple, and the structure is built without considering the layout style

CSS elements are hidden

{ display: none; /* 不占据空间，无法点击 */ }{ visibility: hidden; /* 占据空间，无法点击 */ }{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间，无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }{ position: relative; top: -999em; /* 占据空间，无法点击 */ }{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }

The best way to clear floats in CSS

Add overflow: hidden
at the parent level. Advantages: There are no structural and semantic problems, and the amount of code is very small.

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

Advantages: There are no structural and semantic problems, and the amount of code is very small
Disadvantages: It makes elements adjacent to the parent element The layout will be affected and it is impossible to float all the way to the body. It is not recommended to use

parent element to set display:table

Advantages: The structure semantics is completely correct and the amount of code is very small
Disadvantages: Box model The attributes have been changed, and the resulting series of problems are not worth the loss. It is not recommended to use

Use the :after pseudo-element

Advantages: It should be noted that: after is a pseudo-element, not a pseudo-class (some CSS It is called "pseudo-object" in the manual), and many articles such as Clear Float are called pseudo-classes. However, CSS should be more rigorous. This is an attitude.
Since IE6-7 does not support :after, use zoom:1 to trigger hasLayout.
Disadvantages: Compatibility is not very good.

Add empty tags after floating elements

Clear floats

Advantages: Simple and clear
Disadvantages: Meaningless empty tags, not conducive to semantics

DIV CSS specification named collection

DIV CSS naming reference table CSS style naming instructions CSS file naming instructions

wrapper	Page peripheral control overall layout width		master.css, style.css	main
container or #content	container, used for the outermost		module.css	Module
layout	Layout		base.css	Basic common
head,#header	Header part		layout .css	Layout, layout
foot, #footer	Footer part		themes. css	theme
nav	main 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	Leftbar or Right column
main	Page body
tag	tag
msg#message	Prompt message
tips	Tips
vote	Vote
friendlink	Friendlink
title	title
summary	Summary
loginbar	Log in Bar
searchInput	Search input box
hot	Hot Hotspot
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
siteinfo	Website information
siteinfoLegal	Legal Notice
siteinfoCredits	Reputation
joinus	Join us
partner	Partner
service	Service
regsiter	Register
arr/arrow	arrow
guild	Guidelines
sitemap	Sitemap
list	list
homepage	Homepage
subpage	Secondary page sub-page
tool,#toolbar	Toolbar
drop	Drop-down
dorpmenu	下拉菜单
status	状态
scroll	滚动
.tab	标签页
.left.right.center	居左、中、右
.news	新闻
.download	下载
.banner	广告条(顶部广告条)

导入样式及脚本

传统方式

引用线上CDN

引用本地文件

新规范

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。

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