650) this.width=650; "Src=" http://upload-images.jianshu.io/upload_images/647982-89abb364e5782afb.png?imageMogr2/ auto-orient/strip%7cimageview2/2/w/1240 "alt=" 1240 "/>
Companion video
div and Span tags
<style> .header{ width: 980px; height: 100px; Background: red; margin: auto ; margin-bottom: 10px; } .content{ width: 980px; height: 500px; background: green; margin: auto; margin-bottom: 10px; } .footer{ width: 980px; height: 100px; background: blue; margin: auto; } .logo{ width: 200px; height: 50px; background: pink; float: left; margin: 20px; } .nav{ width: 600px; height: 50px; background: yellow; float: right; margin: 20px; } .aside{ width: 250px; height: 460px; background: purple; float: left; margin: 20px; } .article{ width: 650px; height: 460px; background: deepskyblue; float: right; margin: 20px; } </style><div class= "header" > <div class= "logo" ></div> <diV class= "NAV" ></div></div><div class= "content" > <div class= "aside" ></div> <div class= "article" ></div></ div><div class= "Footer" ></div>
<style> span{color:red; }</style><p> efforts to <span> helpless </span>, hard to <span> touched themselves </span></p>
What is the difference between div and span?
1.div will occupy a single row, and span will not occupy a single row
2.div is a container-level label, and span is a text-level label
What is the difference between a container-level label and a text-level label?
All other labels can be nested in a container-level label
Common container-level tags: div h ul ol dl Li DT dd ...
Text-level tags can only be nested in text/Pictures/hyperlinks
Common text-level tags: span p buis strong EM ins del ...
Note the point:
Do not deliberately remember which tags are text-level which tags are container-level, in enterprise development generally to nesting are nested in the Div, or according to the group tag nested (Ul>li, Ol>li, DL>DT+DD)
CSS element display mode
HTML in HTML divides all tags into two categories, namely container-level and text-level
CSS in CSS also divides all the tags into two categories, namely block-level elements and inline elements (in fact, there is a class, inline block-level)
What is a block-level element and what is an inline element?
Common container-level tags: div h ul ol dl Li DT dd ...
Common text-level tags: span p buis stong em ins del ...
Common block-level elements: p
DIV h ul ol dl Li DT DD
Common inline elements: span Buis strong em ins del
What is the difference between a block-level element and an inline element?
Block-level elements
Exclusive row
If the width is not set, the default is as wide as the parent element
If you set the width height, then the settings are displayed as
In-line elements
Does not monopolize a row
If the width is not set, the default is as wide as the content
Inline elements are not allowed to set width and height
Inline block-level elements
In order for an element to be able to have both a single row and a width and height set, the inline block-level element appears
Do not monopolize a row, and you can set the width height
CSS element display mode conversion
HTML Tutorial-css display mode-Li Nanjiang