HTML Tutorial-css display mode-Li Nanjiang

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

• What is a div?

  • Function: Generally used in conjunction with CSS to complete the basic layout of the page

<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>

• What is span?

  • Function: Generally used in conjunction with CSS to modify some local information in the page

<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?

  • Block-level elements are exclusively one row

  • Inline elements do not monopolize a row

• 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

• How do I convert the display mode of a CSS element?

  • Set the display property of an element

• Display Fetch value

  • Block-level blocks

  • Inline in line

  • Inline-block in-line block level

• Shortcut keys

  • Di Display:inline;

  • DB Display:block;

  • Dib Display:inline-block;

HTML Tutorial-css display mode-Li Nanjiang