1. The inner and outer box element
HTML only two elements, block-level elements and inline elements. Block elements has a characteristic "wraps" are generally used for structure (skeleton), the display peer inline elements can be generally used for content display. It should be noted that the block-level element does not refer to "display: block" elements of the same, inline elements do not just "display: inline" elements. However, these two words in turn said to be possible. It is not referring to the block level elements include: Element "display block / table / list-item" like it? Nor is it!
Here we need to use a common set --display: inline-block to elicit a concept that each HTML tags or elements are included, the outer layers. Inline-block properties is, the "outer box" with the characteristics of inline elements - may be associated with other elements within the display peer, and the "inner box" by the adaptive block-level width of the element characteristics, and height of the container can be provided.
With the concept of inline-block elements inside and outside the box, can be drawn, display: block => display: block-block, he is by the external and internal block-level box consisting of block-level box. display: inline element is the same reason.
2.list-item special "add-box"
display: list-item is the default property li tag, usually appears as a small dot F12 can not be selected, in fact, look them in the list-style property, you will find a lot more than just small dots, as well as 1234 this sort of mark, but because of its disobedience characteristic discipline, we will usually list-style set to none. As we all know, list-style element under the "block elements" list-item but due to its special nature, in addition to a block-level element also "additional box" Name "box labeled" (marker box), specialized to put the dot number of such a tag cartridge, so that all the block elements on the basis of the "main block level box" on, list-item there is an additional special case thereof. About this feature, the individual feels a little like impression, the actual project list-item almost abandoned existence.
3. secret and width: auto
If you do not manually set width, which is set to the default width auto, according to different elements, it will exhibit different characteristics.
- The first is the most common block level elements, such as the default width div, p tag of these elements is 100% of the parent container, here we not discuss height, we can call this characteristic to take full advantage of available space.
- The second characteristic is wrapped with shrink child element of the parent element (here, the original text and shrink wrap, seems not appropriate), the typical representative of floating, absolute positioning, inline-block elements, table of elements, such characteristics back will start one by one, not many go into details here.
- Shrinkage to a minimum, it will most likely appear as a table in the table-layout in auto.
- Beyond the container limit. Parent element at a fixed width, the width of the sub element normally will not exceed the parent element, unless there is some special cases, such as particularly long continuous English word, or inline element is provided with white-space: nowrap .
4. Analysis element encapsulated
Encapsulated elements mentioned in the second point, the analysis Why here say, because in the subsequent talked about floating, positioning time will involve elements of the package properties, and therefore only for understanding some of the concepts here and simple application. First, what is "encapsulated" element, by definition, is wrapped and adaptability, the so-called adaptive, refers to the size of the inner sub-element of the parent container specified width (note that this is not necessarily designated specifically indicated) by his own decision. In other words, the inner sub-element seems to be a max-width: "parent container width" feeling. Of course, when the child elements of the min-width greater than father.width, this criterion does not apply. When the content is about the width of a child element beyond the width of the parent element, it will wrap it sounds normal, in fact, the great use, but in this rule encountered float and absolute positioning time will encounter many seemingly less normal situation, mentioned later, when this part will be described in detail.
5. When using the package elements, centered text characters when there are fewer, more text, left justified content
Using the elements of the package, we can do a simple needs, such as: We want to determine the width of a element within less time text centered text, and text and more time to align text left. In few words, when the outer box element is inline-block inline elements, inline elements block elements may be used in text-align: center center alignment. When the inside width == inline-block element> parent element width will wrap, this time we use block-level elements inside inline-block properties, the inner box to add text-align: left, so that opposing subelements always on the outside of the overall performance of the whole center, and its own performance is the text on the left and the final code is as follows.
<!-- 文字少居中显示，文字多居左显示 -->
<div class="box">
<div class="content">少量文字</div>
</div>
<div class="box">
<div class="content">许多文字许多文字许多文字许多文字</div>
</div>
<style>
.box{
width: 200px;
text-align: center;
background: #1A95FF;
}
.box>.content{
margin:20px 0;
display: inline-block;
text-align: left;
background: #E6A23C;
}
</style>
Since the markdown editor supports tags language, so we can directly preview the final results are as follows (Tip: You can check the following elements to see the CSS styles directly through a browser)
A few words
Many languages of many languages of many languages of many words
Role of the object 6.width value
About four-box model of simple repeat here what, from the inside to the outside are content-box, padding-box, border-box and transparent margin-box. Under normal circumstances, width is to direct action content-box, so that often lead when we add padding and border at the time of the layout, resulting in an overall width and height of the elements increases. If we get a draft from the design width: 100px, padding: 10px, border: 1px elements, ultimately we need width - paddingLeft - paddingRight - boderLelft - borderRight to calculate the content-width. This would be too much trouble. Therefore, CSS provides border-box model to facilitate our development. In fact box-sizing: the role of object is the width of the border-box change. The original width to act only on content-box, after use boder-box, width = padding + border + content.
7.width: 100% in the end is how wide - dynamic calculation of the percentage is how
In fact, in the original text is not only similar to the content of this chapter. First, the question is what is meant, look at an example, if there is a width inline-block characteristics of the parent element is auto, he calculates the width comprises two sub-elements A and B, A percentage of the width of 50%, B the width is 50%, but the contents inside AB not equal, then what would be the practical effect? seeing is believing.
<!-- 百分比计算问题 -->
<div class="f_box">
<span class="box_a">我是A元素</span>
<span class="box_b">我是B元素我是B元素</span>
</div>
<style>
.f_box{
display: inline-block;
height: 100px;
background: #F56C6C;
white-space: nowrap;
}
.box_a{
width:50%;
background: #E6A23C;
display: inline-block;
}
.box_b{
width:50%;
background: #67c23a;
display: inline-block;
}
</style>
Since the markdown editor supports tags language, so we can directly preview the final results are as follows (Tip: You can check the following elements directly through a browser see CSS style) Click to receive free information and courses
I'm A element I B B element is the element I
Cause the above two results is due to the width of the sub-elements are contained in a percentage of the parent element width, so they depend on the width of the width of the parent element obtained by percentage, and the width of the parent element is auto, auto by percentage = NaN. Of course, in the actual calculation, it is not the case, and the width of the parent element has been calculated by the auto. This is in fact the browser with the rendering order of relations, on rendering mechanism, as I have a reason to write an article about your browser's rendering process, of course, people today do not have this so careful, in this case, you just need to know dom content is from top to bottom, from inside to outside to render. You can be understood, when rendered to the parent element when the sub-element width = auto (the percentage is actually dependent on the width of the parent element), so the parent element supreme law follow graphic, A, to B plus the width of the content element region a plus as their final width, with that after the width of the auto obtained again, and the percentage of sub-elements is calculated, the width of the corresponding sub-element came out, in the present embodiment, the content a is relatively small, the width further redundant, and the content of B more often, the excess width of the area.
8.height: 100% sometimes why not take effect?
About height: auto questions here, but more narrative, under normal circumstances, due to the limited width of the browser, so when the design width: auto is much more complicated than height, some people may feel a part of wraps are highly allocated, in fact wrap because the width is not enough leads to highly changing only its manifestations it. For height: auto, as long as the height of each element of the recording, the superposition can, of course, some special properties such as float, laminating and the like problems caused margin, will be described separately later.
The following Laijiangjiang focus, but also height and width of a more obvious difference is the support for the percentage of units. For the width property, even if the parent element is width: auto (Of course, this does not need to show style statement), the percentage value also can support. But the percentage of property height if the parent element is the height to auto, so long as the child element in the flow of the document (such as float, absolute positioning can make elements from the document flow), the percentage value is completely useless.
Why is this so? Because the answer is given in the specification. Original described: If the height of the block does not contain explicit, and the positioning element is not absolute, the calculation is auto. I.e. 100% of the sub-elements * auto = NaN, so the calculation result is invalid. So absolutely positioned elements to use non-height: 100%, to keep to the parent, the parent of the parent to add height: specific values to take effect, but fortunately this situation will not be many.
So why the width can support it? Because it contains the width of the block depends on the width of the element, its behavior is "undefined", that is, different browsers may have different characteristics, but fortunately we all thought a go, the final layout effect in each browser next they are the same. It is in accordance with the block containing the true value is calculated as a percentage of the base.
9.height: 100% difference in absolute positioning elements and the non-performance of absolutely positioned elements
I have already explained in force if the percentage method for non-absolutely positioned elements height, height of the display is a statement of its parent element. So height: 100% in the end is how much of it? We already know the role of the object in the width of the box model in general is content, then the height: 100% is not also refers to the content-height * 100% of it? The answer is, absolutely positioned elements that are not in the child's case, but in absolute positioning elements, calculate the percentage of time will be the parent element of the content-height + padding-height as a base. This is just a note that point, seeing is believing like.
<div class="box">
<div class="child">高度100px</div>
</div>
<div class="box rel">
<div class="child">高度160px</div>
</div>
<style>
.box {
height: 160px;
padding: 30px;
box-sizing: border-box;
background-color: #F56C6C;
}
.child {
height: 100%;
background: #E6A23C;
}
.rel {
position: relative;
}
.rel > .child {
width: 100%;
position: absolute;
}
</style>
Since the markdown editor supports tags language, so we can directly preview the final results are as follows (Tip: You can check the following elements to see the CSS styles directly through a browser)
Height 100px
Height 160px
10.min / max-width / height initialization Research
About min / max-width / height is what to do, can be understood literally, a predetermined maximum and minimum size of the basic element. Commonly used in the adaptive layout scheme. And basic dimensions (width, height) except that the initial value of the min / max-width / height is relatively complex. The OF test, the initial value of the min-width / height is auto, the initial value of max-width / height is none. Let us write two examples to prove why the initial value is auto min- instead of 0, none initial max- instead of auto.
The first is the min-, this case will be very easy to understand, just use the following CSS to prove
<style>
.box{
transtion:min-height .3s;
}
.box:hover{
min-height:300px;
}
</style>
If the min-height defaults to 0, then, when we move the mouse box, there should be continuous 0-300px animations appear, but the fact is that a sudden increase in height, with no transition, so the min-height should be the default auto, of course, you can also write about to prove it.
<style>
.box{
min-height:0px;
transtion:min-height .3s;
}
.box:hover{
min-height:300px;
}
</style>
When declaring min-height is 0, the transition effect appears. So why is not the default auto max- it? Examples of borrowed author, known parent element width is 400px, width child element is 800px, if you do not specify max-width, and he defaults in line with conjecture auto, then the value of max-width should be 400px, then the default value of max-width will cover the value of width, width: 800px will not come into force, and in fact not the case, so we can come to max-width: none conclusions.
11.min > max > !important
Original title and beyond! important, beyond the maximum - Title Dog!
In fact, a coverage problem, CSS-world weight "max" is! Important, right? In fact, there are exceptions, such as today say min-, max-, if you set the width: 100px, and bought him a Insurance important ===> width: 100px important; however encountered a max-width!!: 50px, width of the final value is still 50px,! important failure. When the min-width> max-width time, this time to listen to one? Listen min-width, so remember min> max>! Important can be.
12. The max-height using the principle of the effect of the deployment element to achieve
Expand Collapse "is more common in web operations, before I always used to change the height of the way to do it, although the need to dynamically calculate the height, but also clunky, now there's a better way to let height from a relatively small value becomes the "auto" I used to do that too, found no animation, because auto -.. 0 = NaN, therefore there will not be animated if we make the auto becomes a specific value just fine, as I before value dynamically calculated height mentioned. now we can use max-height adaptive to solve this problem. we just need to set to ensure a high degree greater than the value of the content can be expanded, because the value of max-height ratio is calculated height large value when the height of the element is to calculate the height of the height. Seeing is believing
<!-- 展开效果 -->
<div class="father">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<div class="son">5</div>
</div>
<style>
.father{
max-height: 20px;
overflow: hidden;
transition: 0.5s linear;
/*background: green;*/
}
.father:hover{
max-height: 200px;
/*background: red;*/
}
.son{
height: 20px
}
</style>