1. The box model
(1) border: border, border-width border thickness, unit px; border-style border style, none default value, no border ignoring the width of all the borders, Solid single solid line (common), Dashed broken line, dotted dotted lines, double double solid line; border-color border color.
You may also be provided separately on the top, the bottom, left and left, right and right border, e.g. border-top-width. You may also be integrated set style, border-top, border-bottom, border-left, border-right, border: width style color.
border-collapse: collapse; indicates adjacent border combined.
border-radius: rounded corners (CSS3), from 1 to 4 can be set values, the value may be in units of px and the percentage may be sequentially set the upper left corner, upper right corner, lower right corner, lower left corner radius.
(2) padding: padding-top padding-right padding-bottom padding-left, padding the box, may be provided one to four values, values in units of px, padding is set to 0 to clear.
(3) margin: margin-top margin-right margin-bottom margin-left, from the outside, between the elements to create a "blank", 1 may be set to four values, values in units of px, when the left and right to the outside from both when set to auto, the horizontal block elements can be made with the width of the center, is set to 0 to clear margins.
Inline elements only about margins, there is no vertical margins; block element adjacent vertical margins combined (also referred to collapse margins), whichever is greater vertical spacing therebetween; nesting relationship for the two block elements If the parent element is not in the top margin and borders, the parent element from the outside and will be on the outside of sub-elements from the merger take place, outside the combined distance of the larger of the two, on the outside even if the parent element margin is 0, the merger will take place, can the parent element defines the 1px border or on the padding, the parent element may also add overflow: hidden to solve this problem.
(4) content width and height: the sleeve element size, i.e. the size calculation space, element space height | width = content height | width + padding + border + margin; inner box size i.e. calculates the actual size of the elements, element space Height | Width = content height | width + padding + border; wherein the height and width by the attribute value.
Width property width and height attributes height applies only to block elements of the line element is not valid; model when calculating the total height of the box, two boxes should be considered where the upper and lower vertical margins combined; if not given a box width / height or his father's width / height, the padding size does not affect this box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;/*情况默认内外边距*/
padding: 0;
}
ul {
list-style: none;/*取消列表自带的小点*/
}
.searchPic {
width: 238px;
height: 294px;
border: 1px solid #D9E0EE;
border-top: 3px solid #FF8400;/*位于border之后*/
margin: 100px;
}
.searchPic h3 {
height: 35px;
line-height: 35px;/*垂直居中*/
border-bottom: 1px solid #D9E0EE;
font-weight: normal;/*粗体不加粗*/
font-size: 16px;
padding-left: 12px;/*继承父亲宽度*/
}
.searchPic img {
margin: 7px 0 0 8px;
}
.searchPic ul li a {
font-size: 12px;
color: #666;
text-decoration: none;/*取消下划线*/
}
.searchPic ul {
margin-left: 8px;
}
.searchPic ul li {
padding-left: 10px;
height: 26px;
line-height: 26px;
background: url(images/square.png) no-repeat left center;
}
.searchPic ul li a:hover {
text-decoration: underline;
color: #FF8400;
}
</style>
</head>
<body>
<div class="searchPic">
<h3>搜索趣图</h3>
<img src="images/img01.jpg" width="218">
<ul>
<li><a href="#">这是链接1</a></li>
<li><a href="#">这是链接2</a></li>
<li><a href="#">这是链接3</a></li>
</ul>
</div>
</body>
</html>(5) box-sizing (css3): Specifies the box model, value of content-box, the box size is width + padding + border; when the value of border-box, a box size of width, i.e., padding and border comprising the width inside.
(6) box-shadow: h-shadow horizontal position of the vertical position of v-shadow fuzzy blur from the shadow size spread inside and outside the shadow of the inset from color shadow color, default OUTSET, need not be provided, for example, box-shadow: 0 15px 30px rgba (0, 0,0,0.4); shadow size thereof is omitted.
2. css positioning mechanism
(1) normal stream / flow standard / document flow : Page tab element normal top to bottom, left to right, block-level elements on a separate line, the line according to the order of elements arranged one behind.
(2) float float : floating element refers to elements disposed attribute will float out of the normal stream control standards, the process moves to the parent element in the specified position, the element has a characteristic line at this time within the block elements, the floating object to allow multiple block-level elements are displayed on the same line, there is value left, right, none are three first create a float containing block (ie, parent elements), floating elements are always looking for the nearest parent element alignment , but will not exceed the scope of the padding. A parent child box inside the box, wherein if a child floating, then the other children need floating, so as to align the line display.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div:first-child {
background-color: pink;
width: 200px;
height: 200px;
float: left;
}
div:last-child {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
/*注意两个div是否设置了float:left的区别*/
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>When the parent element is not set the height of the parent element height default is 0, the sub-elements disposed floating behind the element will float to occupy the original position, clear float i.e., the floating box ring to the inside, so that the parent box closing of the outlet and inlet are not let them out the influence of other elements, here are several ways to clear float caused by the impact.
Additional labeling ① : floating elements added at the end, for example, an empty tag <div style = "clear: both "> </ div>, clear the value can also left, right, but not commonly used, this method is easy to understand, writing convenient, but will add a lot worse than meaningless labels structured.
② added to the parent element overflow attribute : add overflow: hidden | auto | scroll; can be achieved, the code introduction, but are not likely to cause wrap lead content is hidden and can not be displayed elements need to overflow when the increase in content.
③ using clear float after pseudo-element :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.clearfix:after {
content: ".";/*内容为小点，尽量不为空，否则旧版本浏览器有空隙*/
display: block;/*转换为块级元素*/
height: 0;/*高度为0*/
visibility: hidden;/*隐藏盒子*/
clear: both;/*清除浮动*/
}
.clearfix {/*ie6、7浏览器的处理方式*/
*zoom: 1;
/** 代表ie6、7能识别的特殊符号，带有*的属性，只有ie6、7才执行
zoom是ie6、7清除浮动的方法*/
}
div:first-child {
background-color: pink;
width: 200px;
height: 200px;
float: left;
}
div:last-child {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
section:last-child {
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<section class="clearfix"><!-- 父元素盒子不设置高度 -->
<div></div>
<div></div>
</section>
<section></section>
</body>
</html>④ The pseudo-dual before and after clear float elements :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.clearfix:before,.clearfix:after {
content: "";
display: table;/*触发BFC清除浮动*/
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
div:first-child {
background-color: pink;
width: 200px;
height: 200px;
float: left;
}
div:last-child {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
/*注意两个div是否设置了float:left的区别*/
section:last-child {
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<section class="clearfix"><!-- 父元素盒子不设置高度 -->
<div></div>
<div></div>
</section>
<section></section>
</body>
</html>(3) Location : attribute positioning element includes a positioning mode and a two offset edge portions.
① edge offset : top, bottom, left, right .
② positioning modes : selector {position: Property Value;}, the value of the attribute values have a common static, relative, absolute, fixed four.
A. static positioning static : default targeting all elements, i.e., the flow characteristics of the standard, this state can not be changed by the edge offset position of the element attributes (top, bottom, left, right ), other targeting methods generally used to eliminate Impact.
B. relative positioning relative : moving a position offset by an edge, but continue to occupy the original position occupied; each moved position, are moved to their top left corner of the starting point; is still the standard stream, still behind the boxes standard flow approach to it; its main value is the mobile position, let the box to where we want to go up.
C. Absolute positioning Absolute : movement position may be shifted by an edge, but completely off the standard, does not account for the location; if the document can be scrolled, as it will be absolutely positioned elements rolling, because the elements ultimately positioned with respect to a portion of the normal stream; If all parent elements are not located, the browser places a reference alignment; if the parent element positioning, will be based on recent elements already positioned (absolute, relative or fixed) to locate the parent element.
Parent child must phase: when child elements are absolutely positioned parent element to use relative positioning.
Absolute positioning box horizontal / vertical center: In this case the box margin is ordinary about auto invalid, shall be provided left: 50% or top: 50%, i.e., half the size of the parent box, and then from the margin-lef or negative outer margin-topt half the width of the box himself / height can be.
D. Fixed positioning Fixed : When setting fixed positioning of elements (need to set the width and height, or the content distraction), it will spin out of control standard document flow, and parent elements do not have any relationship, do not take the position, always based on browsing window to define your own display position, regardless of the browser scroll bar to scroll regardless of the size of the browser window changes in how the elements are always displayed in a fixed position of the browser window.
index-Z : used to adjust the stacking order of overlapping of the positioning element, which may be a positive integer value, a negative integer and 0, no units, the default value is 0, the larger the value, the more the positioning element in the home laminated element; if the same value, in accordance with the writing order from behind; only when the position is set to relative, absolute, fixed have this property, the remaining standard stream, floating, this is not the static positioning property.
After adding absolute positioning element positioned and fixed, as the floating element row is converted into the mode block pattern (the line element and the block elements are so), thus, without adding display: block.
| Positioning mode |
Are possession off the mark position |
You can use the offset edge |
Moving the reference position |
|---|---|---|---|
| Static static |
Not marked off, the normal mode |
Can not |
Normal mode |
| Relative positioning relative |
Not off the mark, occupies a position |
can |
Position relative to itself (narcissistic) |
| Absolute positioning absolute |
Completely off the mark, does not occupy the position |
can |
Relative to the parent element moved position (fight father type) positioned |
| Fixed positioning fixed |
Completely off the mark, does not occupy the position |
can |
Position relative to the mobile browser |
3. Layout
(1) page layout process : determining the page version of the heart (the viewing area, the main content area of the page where the general level is centered in the browser window, the common width is 960px, 980px, 1000px, 1200px) , analysis page module rows, each row and column module module, making the structure html, css initialization, the use of box model, each module is controlled by div + css page layout.
(2) a telescopic arrangement (CSS3)
Parent element disposed display: flex; child element set flex: num; num represents occupied parts, divide the parent element, the pixel values may be specified directly, without the flex attribute specifies not participate retractable dispensing.
① flex-direction: a spindle (main spindle to configure the container flex flex project, default horizontal direction) side shaft (perpendicular to the spindle, the default is the vertical direction), the direction (from left to right spindle default, from the upper side of the shaft to the next, can flex-direction: row | column | row-reverse | column-reverse; change).
② min-width and max-width: may be limited min / width.
③ justify-content: adjusting spindle alignment (horizontally), there are five kinds of values, flex-start from the beginning of the sub-elements so that the parent container starts immediately change the sort order of the box, however, flex-end so that the child from the parent container element start immediately behind the sort order, however the same box, center so that the intermediate sub-elements parent container next to the display, the space-between the left and right cassette box close to the parent, the average distribution of the intermediate blank margins before and after the respective sub-element space-around have white space.
④ align-items: adjusting side shaft alignment (vertical line), stretch suitable parent container so highly stretched child element (child element to the next without the premise of the height), center centered vertically, flex-start at the top of the parent element is reference vertical alignment, i.e. the alignment, flex-end to the bottom of the parent element is a vertical alignment reference, i.e. the alignment.
⑤ flex-wrap: when the sub-box width than the parent box when controlling whether the line feed, the values there are three kinds, nowrap default value (common), shall not wrap or removed columns, i.e. systolic (compression) force the inner row shows , demolition or demolition column line when necessary, wrap, wrap-reverse when necessary demolition rows or columns removed, but in reverse order.
⑥ align-content: for the case of multiple lines of flex of the container, must be provided to the parent element display: flex; arrangement flex-direction: row; and set wrap flex-wrap: wrap will work, there are six kinds of values, Stretch , center, flex-start, flex-end, space-between, space-around.
⑦ flex-flow: flex-direction flex-wrap shorthand way of merger.
⑧ order: num; controlling the order of sub-elements, arranged in regular order from small to large, the top surface of the small value may be negative, the default value is 0.
4. BFC (block-level formatting context)
(1) Concept : independent rendering area, only the block-level elements involved specifies how the layout of the interior of the block-level element, and irrelevant to the outer region, the region has a width and a height, from the outside margin, padding padding , borders border, not all elements modes can produce BFC, display property to block, list-item, table of elements will produce BFC.
(2) the triggering condition BFC : ① float property is not none; ② position to absolute or fixed; ③ display as inline-block, table-cell, table-caption, flex, inline-flex; ④ overflow is not visible.
(. 3) BFC element has the characteristics : ① in the BFC in a box from the top by one vertically arranged; the vertical distance is determined by the margin boxes ②, two belong to the same box adjacent a margin of BFC will overlap; ③ BFC, each of the outer left edge of the box margin-left will touch the left edge of the container border-left; ④ BFC no intersection region with the floating box, but close to the floating edge; ⑤ calculation BFC's height, will naturally float detected height of the box.
(4) BFC's main purpose :
① clear float inner elements: a common parent element is provided on the overflow: hidden; preventing sub-elements parent element so that the floating height of 0.
② solution merger Margin: the vertical distance is determined by the margin boxes, belonging to the same two vertically adjacent BFC a box, the box above and below the margin-bottom margin-top boxes will be merged, whichever is the more a large value, a solution can be used wherein a box package box, and set overflow: hidden.
③ Production adaptive right box: BFC no intersection region with the floating box, but close to the floating edge, general fluid elements (e.g. text containing div) BFC, the floating elements are not generated, and for any intersection, cis forming the floating edge closed their context.
