Legend of the box model, part of the more complex thought content, wrote a separate chapter, but when looking at part of the padding encountered a very strange phenomenon CSS, through continuous testing, and finally get a relatively close to the "truth" explanation of this strange phenomenon before the test, some of the first padding features a brief introduction, finally, to explain the problem.
Size of block elements 1.padding
padding a padding box model (also called intra-up), in CSS, box-sizing default is content-box, so the use of padding increases the size of the element, e.g. {width: 60px; padding: 0 20px }, if for no other interference CSS, content-box width at this time is 60 * 2 + 20 = 100. In order to facilitate the rapid completion of the design control page draft framework to build, we tend to get directly to the element of the aspect, regardless of how much padding, or the width and height you need to get through the calculations affect the development efficiency. Therefore, we will set to box-sizing border-box, so that another job fixed width, will not affect the size of the container with padding. In fact in most cases it does, but there is a special case you should know is that when the value is large enough padding, padding + content> width when, as in the following case:
<style>
.box{
display:block;
width:80px;
padding:0 60px;
box-sizing:border-box;
}
</style>
At this time, padding> width, then the final element is 120px width, 80px instead, is an element for the block to the performance characteristics in terms of, for inline elements, there will be some details need to be described by practice.
Size and inline elements 2.padding
Here first correct a misconception, padding inline elements only affect the horizontal direction, it will not affect the vertical direction. Such knowledge is very one-sided, while the behavior of inline elements entirely by the vertical direction and the line-height vertical-align (CSS2.1, flex CSS3 layout of content) effect, did not change visually the vertical two lines pitch, but we just need to do a little test to inline elements plus the background color can be found, inline elements space in the vertical direction will be affected by the padding.
<div><span class="havePad">hello</span><span class="havePad">world</span></div>
<style type="text/css">
body{
margin: 40px;
}
.havePad{
padding: 20px;
border: 1px solid #ccc;
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)
We can see, padding will affect the size of inline elements, but when you add the parent container to overflow: auto when the parent container will appear in the scroll bar, which also confirms the above point of view, it is similar to the "vertical padding inline elements useless "argument is clearly incorrect. Well, know this feature later, we can use it to do it? The most common effect is to increase the hit area element, for example a text link in the article, by default, these links hit area by the font-size font size control, this time we just increase his down padding, it can be "no click to increase the visual layout area without being affected, "the.
3.padding percentage value
Padding with different properties margin, padding is not supported by a negative value, and the percentage of padding high performance slightly different width, padding percentage value either horizontal or vertical direction, relative to the width are calculated parent container because CSS is the default horizontal flow, so the width value remains in effect. percentage calculation based on the width of the padding features may be implemented based on some specific features. Authors cited the example of a fixed head figure, when the web development needs of a head of FIG across the entire screen, if highly customized, may result in a lower resolution screen images are compressed ineffective, this time you can use a high percentage of wide padding to achieve a fixed head of FIG aspect ratio are calculated based on the width of the features. code show as below
<style>
.box{
position:relative;
padding:10% 50%;
}
.box > img{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
</style>
Percentage padding attributes including performance-linked elements is slightly different, the following will be showing the percentage of padding of inline elements in some of the special attributes of CSS through a strange phenomenon.
4.padding strange percentage values including performance-linked elements
Gives some strange CSS code when the author explored the impact padding percentage for inline elements, the following will be a step by step guide you to explore the strange events of CSS. We are interested can test themselves locally. code show as below:
<div class="box">
<span class="span">一二三四</span>
</div>
<style type="text/css">
body{
margin: 0;
padding: 300px;
}
.box{
width: 400px;
height: 100px;
background: green;
}
.span{
line-height: 40px;
padding: 50%;
background: gray;
}
</style>
The result is shown below (here, a picture will be clearer so do not directly use HTML code)
Produced two more strange styles in the results:
(1) "a" word missing
(2) generates a "pentagon"
Text describes the problem, "CSS is difficult to explain many phenomena, due to its performance is often the result of the entry into force of multiple properties with multiple rules, such as in this case, although almost useless practical value, but for our in-depth understanding of inline elements World helpful. " About This problem arises, I extracted a clearer explanation of the three. This will help you understand how CSS is acting.
- For inline element, which padding is automatically broken line.
- padding area will wrap together with the content.
- Cascading Style has coverage, the same level pattern, which is> the former.
Now I'll explain a little bit of all three points, before that, we can be clear, that is, the percentage of the value of padding is calculated based on the width of the parent element, in this case, padding values are down about 400px * 50 % = 200px. (About padding: 50% and padding, including performance-linked elements please pay attention to review and summarize some of the padding on the basis of this chapter.) So the final width of the inline elements = padding value width of inline elements content of about +. To be sure, this certain width> width of the parent element, so the element will automatically line break is not surprising. So far, we have taken a small step forward. We can see that the "four" is the word, it is really for the trip.
This time, we need to do a little change, we have the background color inline elements removed, and see what happens.
当我们把background去掉之后，发现“一”其实就在二三的前面，只是好像被背景色给覆盖了。这里我们就需要用到作者给出的的第二个和第三个解释了，首先，由于“四”换行了，导致“四”后面的padding-right区域会随着内容一起换行。而"一二三"的宽度是padding-left + 3个字的宽度，而"四"换行之后的宽度是padding-left+1个字的宽度，这个时候padding-left和padding-right宽度抵消，由于层叠样式的覆盖性，层级相同的样式，后来的"四"携带着换行的padding正好覆盖了前面一行一个文字长度的区域，导致正好一个"一"字被覆盖了，同时，由于上面的二三的宽度是多出来的部分，下面的四由于padding换行也多出一个字的高度，因此正好产生了右下角的空白区。至此，我们已经解决了，"一"去哪儿了以及右下角空白部分的问题。
看似上面提出的两个问题都解决了，但我仍然不满足，再提出一个问题
（3）为什么是"四"换行，而不是"三四”,也不是"二三四"。
要解决这个问题，我们得往这个内容区多加一些字看看，最终我将字添加到一二三四五六七八九十一二三四，才发现最后两个字"三四"换行了。
由于有两个字换行，因此遮住了开头的"一二"，这正好印证了我之前的说法，同时我也提出一个什么时候字会换行的猜想，根据第二章讲到的元素包裹性的内容，我猜测，当内容区未将要超出父容器的宽度减padding-left时，content部分的最后一个子会自动换行，同时宽度自适应，当内容即将要超出父容器的宽度减padding-left时，content多余的部分会换行。这里仅根据元素包裹性提出一个猜想，有更好的说明的欢迎指正。