Home > Article > Web Front-end > css3 box model note_html/css_WEB-ITnose
css3 box model note_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:05974browse
css3 box model
CSS assumes that each element will generate one or more rectangular boxes, which are called element boxes. There is a content area in the center of each element box. This content area is surrounded by optional padding, borders, and margins. The reason these items are considered optional is that their width can be set to 0, which effectively removes the items from the element box.
In the W3C traditional CSS2.1 box model, the width and height of the content area are controlled by declaring width and height values, and then appending padding and borders, etc., which is usually called For the content box model.
The box model in CSS is divided into two types. The first one is the W3C standard model, and the other is IE’s traditional model. They are similar in that they are models for calculating the size of elements. The difference is that are calculated differently.
W3C’s standard box model
Outer box size calculation (element space size)
element 空间高度 = 内容高度 + 内边距 + 边框 + 外边距element 空间宽度 = 内容宽度 + 内边距 + 边框 + 外边距
Inner box size calculation (element size)
element 高度 = 内容高度 + 内边距 + 边框element 宽度 = 内容宽度 + 内边距 + 边框
IE traditional box model (below IE6, excluding IE6)
Outer box size calculation (element space size)
element 空间高度 = 内容高度(包括了height+padding+border) + 外边距element 空间宽度 = 内容宽度(包括了width+padding+border) + 内边距 + 边框 + 外边距
Inner box size calculation (element size)
element 高度 = 内容高度(包括了height+padding+border)element 宽度 = 内容宽度(包括了height+padding+border)
In other words, the real width of the content in versions below IE6 is width, padding, and border. In terms of inner and outer boxes, the content width of W3C standard browsers is equal to the inner box width of browsers below IE6.
box-sizing
As mentioned earlier, under the IE traditional box model, the border and padding are included in the width and height. In standard browsers, the width and height only include the content width, excluding borders and padding, which adds a lot of trouble to web design processing. For example, we need a 100px element. The element has a 10px padding and a 1px border. Under the W3C standard box model, we must do some additions and subtractions. Finally, the content width is 100-20-2=78px. However, under the IE traditional box model, you only need to declare that the box content is equal to 100px, and the padding and border are automatically included in it. In order to solve this problem, CSS3 adds a box model attribute box-sizing, which can define the size resolution method of the box model in advance.
box-sizing:content-box | border-box | inherit
Content-box: Default value, allowing the element to maintain the W3C standard box model.
Border-box: This value will cause the element to maintain the IE traditional box model.
Inherit: This value causes the element to inherit the box model mode of the parent element.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; background:hsla(360,50%,30%,0.5); padding:10px; border:10px solid red; box-sizing:content-box; }</style></head><body> <div>胸无大志者，必受制于人</div></body></html> Under the default (content-box) standard box model, the box is stretched by the padding and borders.
div{ width:100px; height:100px; background:hsla(360,50%,30%,0.5); padding:10px; border:10px solid red; box-sizing:border-box;} Under the IE traditional box model (border-box), the box size remains unchanged.
Although the parsing mode of the box model in versions below IE6 does not comply with the W3C standard specification, this method is not useless. It also has a good side: no matter if you modify the border or padding size of the element, it will It will not affect the total size of the element box and will not disrupt the overall layout of the page. Under standard browsers, according to the W3C specification for parsing the box model, once the border or padding of an element is modified, it will affect the box size of the element, and the box size of the element will have to be recalculated, thus affecting the entire The layout of the page.
overflow-x and overflow-y
The overflow attribute is a feature in the CSS2.1 specification, and the overflow-x and overflow-y attributes were added in CSS3.
Overflow-x and overflow-y are mainly used to define the effect of horizontal or vertical content overflow.
overflow-x:visible | hidden | scroll | auto | no-display | no-contentoverflow-y:visible | hidden | scroll | auto | no-display | no-content
visible: Default value. Content is not cropped and may appear outside the content box.
hidden: Crops content and does not provide scrolling mechanism.
scroll: Crop content and provide scrolling mechanism.
Auto: Provides a scrolling mechanism if the box overflows.
no-display: If the content does not fit into the content box, delete the entire box.
no-content: Hide the entire content if it does not fit into the content box.
div{ width:200px; white-space:nowrap; overflow-x:scroll;} overflow-x:scorll, adds a scrolling mechanism to the x-axis.
div{ width:100px; height:100px; overflow-y:scroll;} overflow-y:scorll, adds a rolling mechanism to the y-axis.
resize
Used to change the size of elements, the main purpose is to enhance the user experience.
resize:none | both | horizontal | vertical | inherit
None: The user cannot drag the element to change the size.
Both: The user can drag the element and modify the width and height of the element at the same time.
Horizontal: The user can drag the element and only modify the width of the element.
Vertical: The user can drag the element and only modify the height of the element.
Inherit: Inherit the resize attribute value of the parent element.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; overflow-y:scroll; resize:none; }</style></head><body> <div>胸无大志者，必受制于人胸无大志者，必受制于人</div></body></html> When resize is the default value, elements cannot be dragged to change size.
div{ width:100px; height:100px; overflow-y:scroll; resize:both;} When resize is both, a special symbol appears in the lower right corner of the element. Drag it to change the width and height of the element. The following is the effect after dragging:
div{ width:100px; height:100px; overflow:scroll; resize:horizontal;} When resize is horizontal, special symbols also appear, but you can only drag horizontally, that is The size of the width, as shown below is the effect after dragging.
div{ width:100px; height:100px; overflow:scroll; resize:vertical;} riseze为vertical时也一样，但是只能拖动垂直的方向，也就是高度大小，如下是拖动后的效果。
outline
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和border不同，外轮廓线不占用网页布局的空间，不一定是矩形。
outline:[outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
outline-color:定义轮廓线的颜色。
outline-style:定义轮廓线的样式。
outline-width:定义轮廓线的宽度。
outline-offset:定义轮廓线离边框的偏移值。
inherit:元素继承父元素的outline效果。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; border:10px solid; outline:10px solid red; }</style></head><body> <div>胸无大志者，必受制于人胸无大志者，必受制于人</div> <span>胸无大志者，必受制于人</span></body></html> outline的效果与border的效果类似，但却不占据文档流，所以能够覆盖住后边的文本。
css3盒模型完。学习路漫漫，当知晓并非一日之功，中间必有千辛万苦。子曰：吾道一以贯之。就是说要有始有终，贵在坚持啊。