Box Model
The concept: If the CSS to HTML document element elements generate a rectangular box that element occupies space in an HTML document layout (element box), said box
Defined by a series of related properties box (content content, filling padding, border border, boundary margin), each control box and the HTML document to present the effects of the Structural
border: 5px solid / dash dotted line / dotted chain line dot / double lane # 444; a high value added to the original width of the element
padding: value added to the aspect of the original elements, if you want to keep the element of change, we need to adjust the aspect
Up and down 20px} {20px
Edmundo:
{0 auto} centering element adjacent the vertical direction will sibling merging, whichever is greater. There are margin-top child when the child will be transferred to the parent, to resolve, the parent overflow: hidden
Element Type
The classification display css, XHTML elements are divided into three types
Block elements: block element, shown as a rectangular area, commonly div dl dt dd ol ul fieldset h1-h6 p form hr iframe colgroup col table tr td
Generally as a container receiving inline elements and other block elements, generally called the box
Inline elements: inline element (or the element row) common span i a em strong b
No own shape, width and height can not be defined, determined by the width and height of the content, the smallest unit of content presentation rectangle, defined when padding border margin background has no effect
Variable elements: the element is required to determine the context of block element or elements inline
applet - java applet
button, del, iframe -inline frame, ins- inserted text, map- picture block, object-object target, script- client-side script
Element type conversion
display: box type display element defines a layout is generated when
none：
block: When using a float element after adding the equivalent of the display: block, (block element default)
inline: the code is interpreted as a line feed space, width and height are not supported (inline element default)
inline-block :( form control button, the image img default) line block element content block displayed inline other elements displayed in the same row (middle gap, different for each browser definition size of the gap, usually with a float), supports a wide high, and other similar inline
list-item: bulk may become a list of elements, the list of default values
The positioning element is set
position
static: the default values, ignoring the top, bottom, left, right, z-index, the statement
absolute: absolute positioning, relative to the parent element other than the first static positioning
relative: the relative positioning, positioning normal position, z-index higher than the default absolute
fixed: absolutely positioned elements, positioned relative to window
z-index: auto comply parent / number, absolute and relative act only on
Adaptive width
Hope elements can vary depending on the window or sub-elements, allowing the window to adapt to different devices run under the window, resolution
min-height: IE6 does not support,
Compatibility hack1: min-height: 200px; _height: 200px;
Compatibility hack2: min-height: 200px; height:! Auto important; height: 200px;
min-width: IE6 does not support,
max-width: IE6 does not support,
max-height: IE6 does not support,
Highly adaptive
Method: html, body {height: 100%} elements {height: 100%}
height: auto; automatically change the height based on the content default
height: 100%; height determined according to the parent block.
Floating property practice
css
/* ::-webkit-scrollbar{display: none}/* 取消overflow的默认下拉条 */ */
.v1{float: left;height: 30px;width: 30px;background-color: #333;}
.v2{height: 130px;width: 130px;background-color: #999;}
.fa{overflow: hidden;border:5px solid red; width: 1160px}
.b1{width: 230px;background-color: brown;}
.b2{width: 700px;background-color: burlywood;}
.b3{width: 230px;background-color:#333;}
.b1,.b2,.b3{height: 50px;float: left;}
.bottom{height: 100px;width: 100%;background-color: darkblue;}
Only affects the back of the element, followed by an element immediately in front of an element (when using px), if the browser window is smaller, the block wrap, clear: none default / both / left / right,
height collapse question: Parent If there is no element height, can not be propped
method a: parent element overflow: hidden
method two: adding DIV {clear in the floating elements: both; height: 0; overflow : hidden ( or font-size: 0 IE allowed height 0)}
HTML
<div class = "v1"> </ div>
<div class = "V2">
text wrapping text wrapping text around text wrapping, v2 v1 in the region below the region, the background color can be seen
</ div>
<div class = " FA ">
<div class =" B1 "> </ div> <div class =" B2 "> </ div> <div class =" B3 "> </ div>
</ div>
<div class =" bottom " > </ div>
<-! only set height when scaling images, If both width and height, as far as the ratio of the resulting image distortion ->
<img src = "img / top.jpg" width = "100%" title = "prompt appears in the picture draw up picture" alt = "after the word image loading failed">
<img src = "" width = "100%">
Exercise navigation
css
.nav{height: 100px;background: #111}
.nav ul{list-style: none;width: 980px;background: #777;margin: 0 auto;overflow: hidden;}
.nav ul li{float: left;border-right: 1px #999 solid}
.nav ul li .last{border-right: none}
.nav ul li a{display:block;width: 139px;height: 100px;line-height: 100px;text-align: center;text-decoration: none}
.nav ul li a:hover{background:orangered}
html
<div class="nav">
<ul>
<li><a href="#">集团信息</a></li>
<li><a href="#">集团信息</a></li>
<li><a href="#">集团信息</a></li>
<li><a href="#">集团信息</a></li>
<li><a href="#">集团信息</a></li>
<li><a href="#">集团信息</a></li>
<li class="last"><a>集团信息</a></li>
</ul>
</div>
Exercise anchor
An anchor point
Anchor link: <div id = "p1"> position 1 </ div> <a href="#p1"> jump to position 1 </a>
css
.imgmd{height: 500px;width: 500px;position: relative;}
.list{position: absolute;bottom: 10px;right: 5px;}
.list a{float: left;height: 30px;width: 30px;background: rgba(0,0,0,.7);margin-right: 5px;text-decoration: none;text-align: center;line-height: 30px;color: #fff}
.list a:hover{background: rgba(0,0,0,1);}
.imglist{overflow: hidden;height: 500px;width: 500px;}
html
<div class="imgmd">
<div class="list">
<a href="#img1">1</a>
<a href="#img2">2</a>
<a href="#img3">3</a>
<a href="#img4">4</a>
</div>
<div class="imglist">
<img src="../img/1.jpg" id="img1" />
<img src="../img/2.jpg" id="img2" />
<img src="../img/3.jpg" id="img3" />
<img src="../img/4.jpg" id="img4" />
</div>
</div>
Exercise css sprites
Image Integration
css sprites or sprite, CSS CSS sprites or mosaic image
Http iis reduce the number of requests, for the Taobao such a large site is a must
css
.cssimg{width: 200px;height: 22px;overflow: hidden;list-style: none;}
.cssimg li{float: left;}
.cssimg li a{display: block;height: 22px;width: 50px;background: url(/img/1.jpg);text-align: center;text-decoration: none;line-height: 22px}
.p2 a{background: url(/img/1.jpg) -50px 0;}
.p3 a{background: url(/img/1.jpg) -100px 0;}
.p4 a{background: url(/img/1.jpg) -150px 0;}
.p2 a:hover{background: url(/img/1.jpg) -50px -22px;}
.p3 a:hover{background: url(/img/1.jpg) -100px -22px;}
.p4 a:hover{background: url(/img/1.jpg) -150px -22px;}
html
<ul class="cssimg">
<li class="p1"><a href="#">新闻</a></li>
<li class="p2"><a href="#">新闻</a></li>
<li class="p3"><a href="#">新闻</a></li>
<li class="p4"><a href="#">新闻</a></li>
</ul>
text-overflow practice
Text overflow
overflow:
visible: By default, the contents will not be pruned, there will be elements outside the box.
hidden: content will be trimmed, and the remaining contents are not visible
scroll: content will be trimmed, but a drop-down box
auto: If the content is pruned, the drop-down box appears
inheirit: overflow values inherited from the parent
white-space: how to set up processing elements within the blank
normal: By default, white space is ignored by the browser
pre: are reserved browser
nowrap: the text does not wrap the text will continue on the same line until it encounters <br /> (common)
pre-wrap: blank character sequence, will change the normal line
pre-line: consolidated blank character sequence, but retains the newline
inherit: inherit the parent element of white-space
text-overflow: overflow occurs when the text element comprising
clip: do not display an ellipsis, simple cut
ellipsis: overflow ellipsis
To display the required conditions ellipsis: width, over-flow: hidden, white-space: nowrap
css
.textul{border: 1px solid #333;}
.textul .p1{width: 100px;text-overflow: ellipsis;white-space: nowrap;border: 1px solid #222;overflow: hidden;}
html
<ul class="textul">
<li class="p1"><a href="#">新闻sfdfsffsdfsfsdf</a></li>
<li class="p2"><a href="#">新闻</a></li>
<li class="p3"><a href="#">新闻</a></li>
<li class="p4"><a href="#">新闻</a></li>
</ul>