One page layout
#1. What is the layout of a webpage? Layout
can be understood as typesetting. The text editing tools we know all have their own typesetting methods, such as word, nodpad++, etc.
The layout of the webpage refers to how the browser tool lays out the elements in the webpage
#2. Three ways of web page layout/typesetting
2.1, standard flow
2.2, floating flow
2.3, positioning flow
Second standard stream
The formatting method of standard flow is also called: document flow/normal flow. The so-called document flow refers to the flow arrangement of elements from left to right and top to bottom during the process of element typesetting.
#1 The browser’s default layout is the standard stream layout
CSS # 2 in the element in three categories: namely,
a block-level
row within
the block-level row
#3 There are two types of typesetting in the standard stream, one is vertical typesetting, the other is horizontal typesetting.
Vertical typesetting. If the element is a block-level element, then it will be vertically typeset and
horizontally typeset. If the element is an inline element or an inline block level Elements, then horizontal layout
Three floating streams
1. Floating stream is a typesetting method that deviates from the standard stream. What is deviating from the document stream? What is half-off the document flow?
1.1 What is out of document flow?
1. Floating elements out of the document flow means
#1, no longer distinguish between inline, block level, and inline block level, no matter what level the element can be horizontally typeset
#2, no matter what level the element can be set width and height
. As mentioned, the elements in the floating stream are very similar to the inline block-level elements of the standard stream.
2. Floating element de-standard document flow means
#1. When an element floats away, then this element looks like it has been deleted from the standard stream. This is the de-standard of floating element
#2. If the previous element floats away, but the next element does not float, then the vertical element will be automatically filled, and the floating element will be overwritten after it is reset.
important point:
1. There is only one typesetting method for floating flow, which is horizontal typesetting. It can only set a left-aligned or right-aligned element. There is no center-aligned, that is, there is no center value.
2. Once the floating stream is used, margin:0 auto; invalid
1.2 So what is half out of the document flow?
Copy code
Breakaway is divided into: half breakaway and complete breakaway,
The complete detachment means that the space that the element originally occupied in the normal document flow will be closed as if the element did not exist.
And it is called semi-detached: because the position of the floating element after floating depends on its position in the standard stream before the float, and it has a certain relationship with the standard stream. For example, the floating element is in the standard stream before floating The second line, then after it floats, it is also in the second line of the floating flow. It will not find the floating elements of other rows to stick to. An example is: the floating flow is a transparent film covered on the standard flow. After floating, it will be thrown from the standard flow onto the floating flow film. His position on this film is still the same direction floating elements on the standard flow position to attach to. The criteria for attaching are:
(1) Who floats first in the same direction, who is in front
(2) Floating left in different directions find floating left, floating right find floating right
1.3 Snapping of floating elements
When the width of the parent element is enough to display all elements, the floating elements will be displayed side by side.
When the width of the parent element is not enough to display all the elements, the floating element will be pasted to the previous element. If it is not enough, the previous element will be pasted.
Until it is pasted to the left of the parent element, it will be displayed on this line regardless of whether the width is sufficient
1.4 Floating element word surrounding phenomenon
No floating text, pictures, hyperlinks and other elements will give place to floating elements and surround them
1.5 Floating stream layout exercise
#Note: How to lay out web pages in enterprise development
#1. Use standard flow layout for vertical layout, and use floating flow layout for horizontal direction
#2. Layout
from top to bottom #3. Layout from outside to inside
#4. Horizontal The direction can be divided into one left and one right, and then further layout on the left and the right
1.6 The height of floating elements (also known as parent collapse)
#1. In the standard stream, the height of the content can support the height of the parent element
#2. In the floating stream, the floating element cannot support the height of the parent element. When the child elements float, the father’s The height of the content becomes 0, and the parent element seems to be collapsed, so it is also called parent collapse
1.7 Clear float
Clear floating method 1:
Set a height for the father of those floating child elements
#1. Note:
In enterprise development, such a fixed height limit will make the page operation inflexible, not recommended!
Clear floating method two:
clear: none | left | right | both
Note: The clear attribute must be set in the block-level and non-floating element
#1, value:
none: default value. Floating objects are allowed on both sides
left: floating objects on the left are not allowed
right: floating objects on the right are not allowed
both: floating objects on the left and right are not allowed
#2. Grasp two points:
1. Elements are loaded sequentially from top to bottom and from left to right.
2. Clear: left; works on itself without affecting other elements. Once there is a floating element on the left, switch to the next line to ensure that the left element is not floating, and solve the parent collapse problem based on this.
#Note 1:
Elements are loaded sequentially from top to bottom and left to right. When the element on the right has not been loaded yet, clear: right is useless
#Note 2:
The disadvantage of this method is that when we add the clear attribute to an element, the margin-top attribute of this attribute may become invalid. Therefore it is not recommended to use clear directly
Partition wall method
#1. Exterior wall method
2.1 Add an additional block-level element between the two boxes
2.2 Set clear: both; attributes for this additional block-level element.
Note: The
exterior wall method allows the second box to use margin-top Attributes The
exterior wall method does not allow the first box to use the margin-bottom attribute, so we usually use the height of the wall as a substitute for margin
在企业开发中可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法
#2. Inner wall method
3.1 Add an extra block-level element at the end of all sub-elements in the first box.
3.2 Set clear: both; attributes for this extra block-level element.
Note: The
inner wall method can make the second one The box uses the margin-top attribute. The
interior wall method allows the first box to use the margin-bottom attribute
内墙法也可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法
#3. What is the difference between interior wall law and exterior wall law?
1. The outer wall method cannot support the height of the first box, while the inner wall can
2、在企业开发中清除浮动，内墙法与外墙法都不常用，因为添加一个无用的墙
在前端开发中推崇结构与样式分离，而隔墙法需要添加大量的没有意义的空标签div
The fourth
method of clearing floats The essential principle is the same as the inner wall method, but we should use CSS to control the style when we use the CSS pseudo-element selector, which conforms to the front-end development idea
#I, detailed usage.
header:after {<- ---Add content at the end of the element with the class name "clearfix";
content: "."; <----The content of "." is just an English period. You can also not write.
display: block; <----The added element is converted to a block-level element.
clear: both; <----Clear the left and right floats.
visibility: hidden; <----Visibility is set to hidden. Note that it is different from display: none;.
visibility: hidden; still occupies space, just can't see it;
line-height: 0; <---- line height is 0;
height: 0; <---- height is 0;
font-size:0; < ----The font size is 0;
}
.header { *zoom:1;} <----兼容ie6,否则伪类选择器只能在谷歌浏览器中生效，其余没用
整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
<div class="header"></div>
#II、必须要写的是下面这三句话
content: '.';
display: block;
clear: both;
#III、新浪首页清除浮动的方法，也是采用伪元素
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
#1, review the pseudo-element selector (the new element selector in CSS3) The function of the
pseudo-element selector is to add a child element before the content of the
specified tag or add a child element after the content of the specified tag
#2. Format: Add sub-elements to the front and back of the specified tag.
Tag name::before{ attribute name: value; }
标签名称::after{
属性名称：值；
}
Five ways to clear floats:
overflow: hidden, but in fact it has other uses besides clearing floats
#1、可以将超出标签范围的内容裁剪掉
#2、清除浮动
#3、可以通过overflow：hidden，让里面的盒子设置margin-top属性后，外面的盒子不被顶下来，这样就不用为外边的盒子添加边框了
Four positioning flow
1. Relative positioning is to move relative to your previous position in the standard stream
Format:
position: relative
Need to be used with the following four attributes
top: 20px;
left: 30px;
right: 40px;
bottom: 50px;
1.1 Points to note about relative positioning
Copy code
#1 In relative positioning, the positioning attribute in the same direction can only use one
top/bottom, only one
left/right, only one
#2 Relative positioning does not deviate from the standard stream, and will continue to be in the standard stream Occupy a space
#3 Since the relative positioning does not deviate from the standard stream, the relative positioning distinguishes block-level, inline, and intra-line block-level elements
#4 because the relative positioning does not deviate from the standard stream, and relatively positioned elements It will occupy the position in the standard stream, so when setting margin/padding
and other attributes for relatively positioned elements , it will affect the layout of the standard stream. That is, setting marin or padding for relatively positioned tags is based on the original position of the tag Based on offset
1.2 Application scenarios of relative counterpoint
#1, used to fine-tune the elements
#2, use with the absolute positioning learned later
2. Absolute positioning refers to positioning relative to the body or an ancestor element in a positioning stream
2.1 Reference point for absolute positioning
Copy code
#1. By default, all absolutely positioned elements, regardless of ancestor elements, will use body as the reference point
#2. If an absolutely positioned element has an ancestor element, and the ancestor element is also a positioning stream, then the absolutely positioned element will use the ancestor element of the positioning stream as the reference point
2.1 As long as it is the ancestor element of the absolutely positioned element
2.2 The ancestor must be a positioning flow. The positioning flow here refers to absolute positioning, relative positioning, and fixed positioning (only static positioning in the positioning flow does not work)
2.3. If an absolutely positioned element has an ancestor element, and multiple elements in the ancestor element are positioning streams, then this absolutely positioned element will take the ancestor element of the nearest positioning stream as the reference point
2.1 Points to note about absolute positioning
#1. Absolutely positioned elements are out of the standard flow, so absolutely positioned elements do not distinguish between block-level elements/inline elements/inline block-level elements
#2, if an absolutely positioned element uses the body as a reference point, it is actually Use the width and height of the first screen of the webpage as the reference point, instead of the width and height of the entire webpage as the reference point, it will be positioned relative to the body and will scroll with the scrolling of the page
#3. An absolutely positioned element will ignore the ancestor element Padding
2.3 Absolute positioning horizontally centered
#1. Note that when a box is absolutely positioned, margin: 0 auto; let the box itself be centered
#2. If you want to center an absolutely positioned box itself, you can use left: 50%; margin-left:-element width Half px;
2.4 Application scenarios of absolute positioning
#1, used to fine-tune the elements
#2, use with relative positioning
. Generally, relative positioning and absolute positioning appear together in enterprise development, and they are rarely used separately ===> the son is the father
, so why use the son and the father Look at the picture below
3. Fixed positioning
Copy code
#1. Fixed positioning (similar to absolute positioning, and highly similar to the
background ) . The background-attachment: fixed; allows the picture to not scroll with the scroll bar
and fixed positioning can make a certain An element does not scroll with the scroll bar
#2. Note
1. Fixed positioning means positioning relative to the browser window. How the page scrolls, the position of this box does not change.
2. Fixed positioning elements are separated from the standard stream and will not occupy the space in the standard stream.
3. Fixed positioning is the same as absolute positioning. In-line, block-level, and intra-block-level are not distinguished.
4. E6 does not support fixed positioning.
Fixed positioning application scenarios
Web page couplet ads,
page header banner (penetration effect)
4. Static positioning
#1. What is static positioning?
By default, the position attribute of the element in the standard stream is equal to static, so static positioning is actually the default standard stream
5, z-index
Copy code
#1, z-index attribute: used to specify the coverage relationship
1.1 of the positioned element , z-index value indicates who is pressing whom. The larger value covers the smaller value.
1.2、只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝
对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
1.3、z-index值没有单位，就是一个正整数。默认的z-index值是0。
1.4、如果大家都没有z-index值（默认所有元素z-index值为0），或者z-
index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了
的元素，永远能够压住没有定位的元素。
#2. Note: From the parent phenomenon (the father is counseled, and the son is useless) the
parent element does not have a z-index value, then the z-index of the child element is larger, who covers the
z-index value of the parent element Same, then whose z-index of the parent element is bigger, who covers who