May 30, 2021 Article blog
2. Positioning mechanism in CSS
3. The structure and performance principles of the simple layout of the web page
5. The best way to clear floats in CSS
6. The div-CSS specification names the collection
{Display: none; / * does not occupy space, not click * /}
{Visibility: hidden; / * occupied space, not click * /}
{Position: absolute; clip: Rect (1px 1px 1px 1px); / * does not occupy space, no click * /}
{Position: absolute; top: -999em; / * does not occupy space, no click * /}
{POSITION: Relative; Top: -999em; / * Occupy space, no click * /}
{Position: absolute; visibility: hidden; / * does not occupy space, no click * /}
{Height: 0; overflow: hidden; / * does not occupy space, no click * /}
{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 * /}
Add overflow:hidden to the parent
Pros: There are no structural and semantic problems and very little code
Cons: When content increases, it's easy not to wrap it so that it's hidden and doesn't show the elements that need to overflow
The parent element is also set to float (plus a float:left/right)
Pros: There are no structural and semantic problems and very little code
Cons: The layout of elements adjacent to the parent element is affected and cannot float all the way to body and is not recommended
The parent element sets display:table
Pros: The structure semantics are completely correct and the amount of code is minimal
Disadvantages: Box model properties have changed, resulting in a series of problems, gain or loss, not recommended to use
Use the :after pseudo-element
Pros: It's important to note that after is a pseudo-element, not a pseudo-class (some CSS manuals call it a "pseudo-object"), and many articles such as Clear Floating General are called pseudo-classes, but csser should be a little more rigorous, which is an attitude.
Since IE6(7) does not support: after, use zoom: trigger hasLayout.
Cons: Compatibility is not very good.
Add an empty label after the floating element
Clear the float
Pros: Simple and straightforward
Cons: Meaningless empty labels that are not conducive to semantics
Naming specification description:
All names are best lowercase
Each label should have a start and end, and have the right level, layout has regular work
An empty element should have an end tag or add "/" after the tag is started
Performance is completely separate from the structure, and no performance elements such as style, font, bgColor, borde r, etc. are touched in the code
Definitions should follow the principles from large to small, reflect the structure of the document, and be beneficial to search engine queries.
Add a unique, structured tag id to each table and form
Tag the picture with an alt
Use the English naming principle whenever possible
Try not to abbreviated words unless you see them at a glance
THE DIV-CSS NAMING REFERENCE TABLE
| CSS style naming | illustrate | CSS file name | illustrate |
|---|---|---|---|
| wrapper | The perimeter of the page controls the overall layout width | master.css,style.css | capital |
| container or smh.com.au | Containers for the outermost layer | module.css | module |
| layout | layout | base.css | Basically common |
| head,#header | Page head portion | layout.css | Layout, layout |
| foot,#footer | Footer part | themes.css | topic |
| nav | The main navigation | columns.css | column |
| subnav | Secondary navigation | font.css | Text, fonts |
| menu | menu | forms.css | The form |
| submenu | Submenu | mend.css | Make up the nail |
| sideBar | Sidebar | print.css | |
| sidebar_a,#sidebar_b | The left or right column | main | The main body of the page |
| msg#message | Prompt information | tips | Small skills |
| vote | vote | friendlink | Friendship connection |
| title | title | summary | summary |
| loginbar | Sign-in bar | searchInput | Search the input box |
| hot | Popular | search | Search |
| search_output | The search output is similar to the search results | searchBar | Search bar |
| search_results | Search results | copyright | Copyright information |
| branding | trademark | logo | Website LOGO logo |
| siteinfo | Website information | siteinfoLegal | Legal notice |
| siteinfoCredits | Credibility | .tab | The tab |
| joinus | Join us | partner | Co-operative fire companion |
| service | serve | regsiter | enroll |
| arr/arrow | arrowhead | guild | guide |
| sitemap | The site map | list | list |
| homepage | Home | subpage | Level 2 page subpages |
| tool,#toolbar | Toolkning | drop | Drop down |
| dorpmenu | Drop-down menu | tag | label |
| status | state | scroll | turn |
| .left.right.center | Left, center, and right | .news | News |
| .download | Download | .banner | Ad bar (top ad bar) |
Use an online CDN
<script type""text/javascript" href""xxx/xxx.js" > This is an admedition to JS files
<script type""text/css" href""xxx/xxx.css" > this is to invoke the CSS file
Use local files
<script type""text/javascript" src "http://www.wfuyu.com/uploadfile/cj/20150502/xxx/xxx.js" > this is the use of JS files
<script type""text/css" src"""http://www.wfuyu.com/uploadfile/cj/20150502/xxx/xxx.css" > which is to invoke the CSS file
Depending on the HTML5 specification, you typically do not need to specify CSS and JavaScript files when you introduce them