A width of the adaptive
Syntax: width: 100%;
Note: The default width a) a bulk element 100%
Width b) when the element is set to 100% width, to inherit the parent element
c) the width is generally used to achieve an adaptive effect banner
Second, highly adaptive
Syntax: height: auto; (equivalent to the height of the element is not provided)
Third, minimum height, maximum height, the minimum width, the maximum width
1. Minimum height
Syntax: min-height: numerical units;
Note: do not recognize IE6 min-height attribute solution is as follows:
A program: min-height: 100px; _height: 100px;
Option II: min-height: 100px; height: auto important; height:! 100px;
2. Maximum height
Syntax: max-height: numerical units;
3. The minimum width
Syntax: min-width: numerical units;
NOTE: When a block element disposed min-width attribute, the need to convert the block elements display: inline-block;
4. The maximum width
Syntax: max-width: numerical units;
Note: The above four properties in IE6 and does not recognize the following versions of browsers
Fourth, the height of the collapse of the problem (several common clear float method)
Description: When the highly adaptive parent element, the child element sets float, leading to the parent element height is 0, the problem referred to collapse height
Solutions are as follows:
1. Option One
Give the parent element a fixed height
Disadvantages: can not achieve highly adaptive, flexible enough (not recommended)
2. Option II
The parent element is provided to overflow: hidden;
Advantages: simple, highly adaptive parent element may
Disadvantage: when the child has a positioning properties, since the parent element set overflow: hidden; part other than the parent element will be hidden container
3. Option III
Add an empty div at the end of the child element, and set the style:
.clear{clear:both;height:0; overflow:hidden;}
Note: a) This div is only the height of collapse solve the problem, need not be displayed in the browser, so set height: 0;
B) does not recognize IE6 10px less than the container, so to add overflow: hidden; compatible to IE6
Pros: All browsers support
Cons: add a meaningless div in the web page, the code will result in redundancy
4. Option IV
Height collapse solve problems through pseudo-elements (universal clear float method)
父元素:after{
content:".";
display:block;
height:0;
overflow:hidden;
clear:both;
visibility:hidden;
}
The syntax of pseudo-elements: Note
Selector: before {content: "";} before the child element added to a pseudo-element
Selector: after {content: "";} to add a dummy element after the sub-elements
Pseudo-element is inline elements
Five elements hidden in two ways invisible (display: none; and visibility: hidden differences)
1.display:none;
The element is hidden, the space is not preserved; (invisible, intangible)
2.visibility:hidden;
The element is hidden, reserved space; (invisible, tangible)
Note: display: none; and overflow: hidden; difference
display: none let completely hidden elements are not displayed, overflow: hidden; overflow element is to allow partially hidden invisible, no overflow part of the normal display
Sixth, highly adaptive window
首先，要设置窗口的高度自适应
html,body{height:100%;}
然后，给元素设置
div{height:100%;}
注：窗口高度自适应适用于屏幕窗口没有内容body为0或内容不满一屏的情况下使用
七、内联元素水平居中设置
如果被设置水平居中的元素是文本，图片等内联元素时，通过给父元素设置text-align:center;实现
八、定宽块状元素水平居中设置
满足定宽，块状元素两个条件的元素，将左右margin设置为auto即可实现元素在水平方向上居中显示
注：a）当给元素设置了float后，左右为auto将会失效
b) 当给元素设置了absolute和fixed后，左右auto将会失效
九、不定宽块状元素水平居中设置
1.给父元素设置以下样式
a）给父元素设置display:table; 将元素转换为表格形式
b) 给父元素设置左右margin为auto
2.给父元素设置：text-align:center;
给子元素设置: display:inline-block;
十、元素在屏幕窗口水平垂直都居中
1.定宽高元素在屏幕窗口水平垂直都居中
元素{
width:value;
height:value;
position:fixed;
left:50%;
top:50%;
margin-left:-width/2 "px";
margin-top:-height/2 "px";
}
2.不定宽高元素在屏幕窗口水平垂直都居中
元素{
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
Eleven, variable width and height of the child element in the parent element both horizontally and vertically centered
1. a program (to be given height, vertically centered or highly stretched filled parent element)
Parent elements {position: relative;}
{Subelements
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
2.方案二
{Parent element
display:table-cell;
text-align:center;
vertical-align:middle;
}
NOTE: display: table-cell; converting element is in the form of table cells
3. The conversion sub-element rows within the block width and height adaptive element, disposed at the same level sub-element full height of the parent element and the reference element row block. Sibling child elements by providing vertical-align: middle; vertically. Compatible with IE8 and later.
More professional front-end knowledge, make the [2048] ape www.mk2048.com