table of Contents
1. Inheritance
Inherited: There are certain attributes in css can be inherited, such as color, text-xxx, line-height, font-xxx, letter-spacing, word-spacing can be inherited, but some properties are not inherited as border: 1px solid green;
2. css in weight
Inherited attribute weight value of about 0
Weight comparison rules:
- If you check the label:
- 1. Number Number Selector: id tag class, who large higher its priority, if as large as the latter will overwrite the foregoing properties
- 2. Select the Properties tab for priority to be greater than the property is inherited, they are not comparable
- 3. The same is inherited property
- 1. The description of the past who, who's a higher priority
- 2. As described in the past, this time to return to the number of the number of selectors
! Important attribute which sets the current weight is infinite, but the big priority of inline style
Note:! Important to write in front of the semicolon
Use! Important is a bad habit, it should be avoided because it severely undermines the right to compare values inherent in the rules of the style sheet, making it more difficult to debug bug.
3. Common Format typesetting
3.1 font properties
1. fonts
grammar:
/*网页中的文字设置字体为微软雅黑*/
body{font-family:"Microsoft Yahei"}2. Alternate font
grammar:
body{font-family:'Microsoft Yahei','宋体','黑体';font-size: 14px}Fonts can have numerous alternative, then the browser to resolve this code, it is parsed from left to right, if there is no Microsoft elegant black, then go to Times New Roman, the last bold.
3. Font Size
Font size units: px, em, rem, general browser default font size is 16px.
grammar:
boy{font-size: 20px;}px is absolute units, also known as fixed size, regardless of how many in the size of the screen is always the current size
em relative units, relative to the current font size of the box
.box{
font-size: 20px;
/*1em = 20px*/
width: 20em;
height: 20em;
background-color: red;
}rem relative units, relative to the root element (html) font size
html{
font-size: 40px;
}
.box{
/*1rem = 40px 1px = 0.025rem */
/*1 : 0.025 = 400 : ?*/
font-size: 12px;
width: 20rem;
height: 20rem;
background-color: red;
}4. Font Style
norma default, set to Normal text font
italic Italic font
oblique italic font
grammar:
{font-style: italic;}5. font weight
normal normal font weight, the default is equivalent to a digital value 400
bold bold font weight, corresponding to a digital value 700
lighter thinner than normal font font
bolder than thicker bold font, a digital value corresponding to 900
Digital values: 100 to 900, in the range: 100,200,300,400,500,600,700,800,900
grammar:
{font-weight: 700;}3.2 text attributes
1. The text decoration
none no text modifications
underline underline text
Crossed the overline text
through the line-through line of text,You can simulate strikethrough。
grammar:
#box p:hover{
text-decoration: underline;
}2. Text Indent
grammar:
#box2{
/*字体大小*/
font-size: 20px;
/*设置文本缩进*/
text-indent: 2em;
}3. The text spacing, word spacing English
#box2{
/*字体大小*/
font-size: 20px;
/*设置文字之间的间距*/
letter-spacing: 2px;
/*设置英文单词之间的间距*/
word-spacing: 10px;
}4. text alignment
left left
center center
right right
justify aligned at both ends of the English language only
grammar:
{text-align: center;}4. Floating layout float
4.1 Introduction float
Floating is a very important page layout in a property. Then float the beginning of this property was originally designed for text pages surround effect.
Example: If two div display in a row, how to do, say some students may use display attributes, ah, they set to inline-block. However, you will find that there is a gap between the two div boxes, only this point gap in the end how much it is, if we calculate the entire width of the box model in a row, then they calculate whether it's accurate? So the display method is wrong, then we use the float property, floating elements can be implemented side by side.
4.2 float property
none said they did not float, before explaining all the HTML tags default does not float
left left floating
right floating right
inherit inherit the parent element of float property
grammar:
box{
float: left;
}4.3 floating phenomenon
1. We said before the float is designed to do, "text surround effect." So if we look at the floating box set, what will happen?
1. The flow from standard documents, representing the position not on the page, i.e., "off standard"
2. Generate 'characters surround' effect, the original intention of setting the float property
3. "welt" phenomenon: to set up a floating box, the box will find floating side, if can not find the edge of the floating box, will be affixed to the side of the parent element, if found, will be attached to the floating side of the box on
The reason welt phenomena occur:
- When a float element, it will be moved out of the normal flow of the document, and then pan left or right, until the translation has been encountered in which the border of the container or float across the additional element of a border
4. contraction effect
- In the absence of a provision of the floating box, the box is to occupy an entire row, then the floating once set width is the content of the box.
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 800px;
margin: 100px auto;
height: 400px;
border: 1px solid #000;
}
.child1{
/*width: 200px;*/
height: 400px;
background-color: red;
float: left;
}
.child2{
/*width: 300px;*/
height: 200px;
background-color: green;
float: right;
}
</style>
<body>
<div class="father">
<div class="child1">mjj</div>
<div class="child2">wusir</div>
</div>
</body>
</html>2. Standard document flow
Refers to the document flow element layout process layout elements will default automatically back left, flow from top to bottom arrangement.
That is not to make any page layout control, HTML browser the default layout, this layout from left to right, from top to bottom, a bit like flowing water effect, we called 流式布局.
3. Floating problems caused by:
Not calculated floating element height, the height of the box not afford to support the parent
4.4 Clear floating way
1. The parent element is added to a fixed height
- Question: inflexible, difficult to maintain the late
- Application: the same years navigation
2. interior law
Add back to the last element of a floating empty block-level tag and the tag attribute is set clear: both;
Problem: too redundant the
<style> .clear{ clear: both; } </style> <div class="father clearfix"> <div class="child1">mjj</div> <div class="child2">wusir</div> <div class="clear"></div> </div>
3. Clear pseudo-element method (recommend the use)
Add a class to the parent element
.clearfix::after{
content:'';
display: block;
clear: both;
/*在content:'有内容的时候'; 上面三行代码 + 下面两行代码*/
/*visibility: hidden;*/ /*把内容隐藏*/
/*height: 0;*/ /*内容隐藏后的高度设置为0*/
}4.overflow: hidden; (common)
When a content element of the box is too large to accommodate overflow CSS attribute defined what to do.
default properties visible, visible
hidden content will be trimmed, and beyond what is hidden, invisible
scroll content will be trimmed, the browser displays scroll bars so you can view content
auto decided by the browser, if the content is pruned, it will display a scroll bar
inherit specified values overflow property inherited from the parent element
When an element is set overflow: hidden | auto | after scroll property, it will form a BFC region, we call it as a block-level formatting context . BFC's just a rule, it is very important to locate floating, floating locate and remove the floating element will only apply to the same BFC.
Floating will not affect the layout of other elements of the BFC, and only Clear Clear float floating BFC same elements in front of it.
Summary: As long as we let the parent box area BFC formed, it will clear the impact brought by the floating element in the region.
Since overflow: hidden; BFC after formation region formed BFC region, its internal layout rules
when calculating the height of the BFC, the floating elements are also involved in the calculation.
Note: Be careful of overflow: hidden; its own intention
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
/*overflow: visible;!*默认可见*!*/
overflow: hidden;
/*overflow: scroll;*/
/*overflow: inherit;*/
}5.BFC
1.BFC defined
BFC (Block formatting context) literally translated as "block level format context." It is an independent rendering area, only to participate in Block-level box, which specifies how the interior of the Block-level Box layout, and has nothing to do with the outside of this area.
2.BFC layout rules
- 1. Box will be inside the vertical direction, disposed one behind.
- 2.Box vertical distance is determined by the margin. Box of two adjacent belong to a margin of overlap occurs with BFC
- 3. Each of the left margin box element, comprising the left block border box in contact (for a left to right format, or vice versa). The same is true even if there are floating.
- 4.BFC region does not overlap with the float element.
- 5.BFC is a separate container isolated on the page, inside the container does not affect child elements to the outside elements. And vice versa is also true.
- 6. When calculating the height of the BFC, the floating elements are also involved in the calculation `
3. Which element generates BFC
- 1. The root element
- 2.float property is not none
- 3.position is absolute or fixed
- 4.display为inline-block
- 5.overflow not visible