There displaying and hiding the display, cutting elements, overflow, processing corresponding to the shape of the mouse to change the properties.
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> box model, display, positioning </ title>
<Link the rel = "this stylesheet" type = "text / CSS "the href =" 03.css ">
</ head>
<body>
<div ID =" Above ">
</ div>
<div ID =" the CFB ">
<div ID =" BoxModel "> box model: box the actual width width (width content) + padding * 2 (the right and left margins) + border * 2 (left and right borders) + margin * 2 (right and left margins); the actual height of height (the height of the content) + padding * 2 ( the top and bottom margins) + border * 2 (top and bottom borders) + margin * 2 (upper and lower margins). </ div>
</ div>
<Small> In the above example, the blue part of the margin, the value of 10%; border areas are black, a width 1em; padding part is yellow, the value of 3em. </ Small>
<H3>
<li><a href="#Padding">padding</a> </li>
<li><a href="#Border">border</a> </li>
</ul>
<h3>与显示相关的属性</h3>
<ul>
<li><a href="#Display">display</a></li>
<li><a href="#Display">visibility</a></li>
<li><a href="#CE">裁剪元素</a></li>
<li><a href="#OF">溢出处理</a></li>
<li><a href="#MT">改变光标</a></li>
</ul>
<h3><a id="Po "href =" # Position " > locate </ h3> </a>
</ Li>
<a href="#Questions"> two div </a> a gap appeared between the (vertically arranged)
<li>
<ul>
h3> problems encountered <</ h3>
<div>
<div ID = "Display">
<HR>
</ div >
</ UL>
<H4> display (display): Set an element </ h4> how to display
<UL>
<Li> convert the block elements and inline elements
<UL>
<Li> the display: inline ; the block element transfected inline elements </ Li>
<Li> the display: block; the inline element rotatable block element </ Li>
</ UL>
</ Li>
<Li> hidden elements: display: none; element does not space </ li>
</ ul>
<h4> visible (visibility): resistance to specify an element visible or hidden </ h4>
<ul>
<li> hidden elements 01: visibility: hidden; elements in space </ li>
<li> hidden element 02: visibility: collapse; table element is not related to the space (firefox), space (chrome), display elements (IE) </ li>
</ul>
</div>
<div id="Margin">
<H4> margin </ H4>
</ div>
<ul>
<li>格式
<UL>
<Li> Description unilateral: Top-margin, margin-bottom, right-margin, margin-left </ Li>
<Li> shorthand (margin:;), the rule with the <a href="#BS"> unilateral border rule set </a> B </ Li>
</ UL>
</ Li>
<Li> value
<UL>
<Li> Auto </ Li>
<Li> length value (px, em, pt) </ Li>
<Li> percentage </ Li>
</ UL>
</ Li>
</ UL>
</ div>
<div ID = "the padding">
<H4> padding </ H4>
& nbsp   & nbsp & nbsp & nbsp
rule the same margin, did not pay attention to the value of Auto
<div the above mentioned id = "Border">
<h4> Borders </ h4>
<OL>
<Li> border style (border-style)
<UL>
<Li> border-style: none; borderless </ Li>
<Li> border-style: dotted; the dotted line border </ Li>
<Li> border-style: dashed; dotted border </ Li>
<Li> border-style: solid; solid border </ Li>
<Li> border-style: double; double border, border width, and the value of two of the border-width same </ Li>
<Li> border-style: groove; 3D trenches border </ Li>
<Li> border-style: ridge; 3D land borders </ Li>
<Li> border-style: the inset from; 3D embedded frame </ Li>
<Li> border-style: OUTSET; 3D projection borders </ Li>
</ UL>
</li>
<li> border width (border-width), can be selected long or keyword (thick \ medium (default) \ Thin) as a value </ li>
<li> border color (border-color), the color value may be the name , RGB, 16 hex value; required to set the border-style property set to </ Li>
<Li> separately provided each side of the two methods (style, color, width are applicable)
<OL type = "a">
<Li>
<UL>
<Li> border-Top-style </ Li>
<Li> border-right-style </ Li>
<Li> border-bottom-style </ Li>
<Li> border-left-style </ Li>
</ UL>
</ Li>
<Li ID = "the BS">border-style: on the right lower left
<ul>
<li> when only three values: the left-right </ Li>
<Li> Top-set margin below the first component div is 0px </ li>
<li> when only two values: approximately vertical </ li>
<li> there is only one value: vertical and horizontal </ li>
</ UL>
</ Li>
</ OL>
</ Li>
<Li> shorthand: border: width style (required) Color; </ Li>
</ OL>
</ div>
<div ID = "OL">
<h4> profile (outline), located at the border edge of the peripheral, not the space </ H4>
<UL>
<Li> outline </ Li>
<Li> outline-Color </ Li>
<Li> outline-style </ Li >
</ UL>
</ div>
<div ID = "Questions">
<H4> Two solutions vertical gap occurs div </ H4>
<UL>
<Li>Above (below) div add the attribute: "margin-bottom (top) : - xpx;", this method is not recommended </ Li>
</ UL>
</ div>
<div ID = "the Position">
<h4> five kinds of positioning (position) mode </ h4>
<OL>
<li> static
<ul>
<li> static positioning. The default value is not located, from top, bottom, right Effects </ Li>
</ UL>
</ Li>
<Li> Fixed
<UL>
<Li> element with respect to the position of the browser window is fixed </ Li>
<Li > the positioning so that the element position and document flow independent, space </ Li>
<Li> using the element of the positioning and other elements overlapping </ Li>
</ UL>
</ Li>
<Li> relative
<UL>
</ ul>
</ li>
<li> absolute positioning. With respect to the closest parent element, if not the relative html (fixed flexible Edition) </ Li>
<Li> which is positioned to cause the element position and document flow independent, space </ Li>
<Li> using the element of the positioning of the and other elements overlapping </ Li>
</ UL>
</ Li>
<Li> sticky
<UL>
<Li> viscous positioning. Relative positioning prior to crossing a particular threshold, the fixed positioning </ Li>
</ UL>
</ Li>
<Li style = "List-style-type: none;"> <H5> Note: When elements overlap, available z -index attribute specifies the stacking order. If not specified, according to the stacking order of the code </ H5> </ Li>
</ OL>
</ div>
<div ID = "the CE">
<H4> Crop element </ H4>
< li> clip: rect (y1, x1, y0, x0); y1x1 for the top right corner of the picture, y0x0 for the lower left corner of the picture position.
</ li> </ ul>
</ div>
<div ID = ". OF">
<H4> overflow handling (overflow) </ H4>
<UL>
<Li> overflow: Scroll; adding the horizontal and vertical scroll bar </ Li>
<Li> overflow: hidden; excess is not displayed, a scroll bar without </ Li>
<Li> overflow: Auto; if exceeded, a vertical direction scroll bar added </ Li>
<Li> overflow: visible; default region in excess outer continue to display </ Li>
<Li> overflow: the inherit; the parent element inherit the value of the attribute </ Li>
</ UL>
</ div>
<div ID = "the MT">
<H4> change the cursor (cursor) </ H4>
<UL>
<Li style = "Cursor: Auto;"> Cursor: Auto;
<Li style = "Cursor: default;"> Cursor: default;</li>
<li style="cursor:e-resize;">cursor:e-resize;</li>
<li style="cursor:help;">cursor:help;</li>
<li style="cursor:move;">cursor:move;</li>
<li style="cursor:n-resize;">cursor:n-resize;</li>
<li style="cursor:nw-resize;">cursor:nw-resize;</li>
<li style="cursor:pointer;">cursor:pointer;</li>
<li style="cursor:progress;">cursor:progress;</li>
<li style="cursor:s-resize;">cursor:s-resize;</li>
<li style="cursor:se-resize;">cursor:se-resize;</li>
<li style="cursor:sw-resize;">cursor:sw-resize;</li>
<li style="cursor:text;">cursor:text;</li>
<li style="cursor:w-resize;">cursor:w-resize;</li>
<li style="cursor:wait;">cursor:wait;</li>
</ul>
</div>
</body>
</html>
Corresponding css file
a{
text-decoration: none;
}
a#Po:link{
color: black;
}
a#Po:hover{
color: blue;
}
a#Po:visited{
color: darkblue;
}
#Above{
height: 2em;
background-color: brown;
border-style: outset;
border-color: gray;
/*margin-bottom: -30px;*/
}
#CFB{
/*margin-top: -75px;*/
border: 0;
background-color: deepskyblue;
}
#BoxModel{
margin: 0 10%;
border: 1em solid black;
padding: 3em;
background-color: yellow;
color: brown;
text-align: center;
}