Box model
1. The thin line border of the table
border-collapse: collapse means that the adjacent borders are merged together
2. The box border will affect the size of the box.
Solution: One is to measure the size of the box without measuring the border, and the other is to include it when measuring For the border, use the width/height to subtract the border
3. The padding will affect the size of the box.
Solution: In order to ensure that the size of the box and the rendering are the same, let the width/height subtract the extra margin size. The
advantage is: The number of words in a navigation bar is not the same, we don’t need to give the width of each box, we just give the padding value directly.
But if the box itself does not specify the width/height, the padding will not support the size of the box
4. Block level box level Centering needs to meet two conditions. One is that the box must specify the width, and the left and right margins of the box are set to auto. The
common writing method is
margin-left：auto;margin-right:quto;
margin:auto;
margin:0 auto;
5. In-line elements and in-line block elements are horizontally centered.
Add text-align: center to the father.
6. Outer margin collapse
Outer margin collapse, also known as margin merge, refers to two adjacent (siblings or parent-child relationships) in the normal flow The margins of block-level elements are combined into a single margin, but only the upper and lower margins will collapse, and this problem will not occur in the left and right margins. (The merge of the vertical outer margins of adjacent block elements)
1. Parent-child relationship (define the upper border for the parent element or define the upper inner margin for the father or add overflow: hidden to the father)
2. Sibling relationship (solution: only one Add margin value to the box)
If there are margin-top and margin-buttom at the same time, one positive and one negative will be added together, the two negative ones will take the largest absolute value, and the two positive ones will take the largest value
7. Clear the inner and outer margins
Web page elements have many default inside and outside screenwriters, and different browsers have different defaults, so we must first know the inside and outside margins of the page before laying out
*{
padding 0；
margin:0:}
Note: In order to take care of compatibility, try to set only the left and right margins, not the top and bottom margins (even if it is set, it will not have a good effect), but it is enough to convert to block-level and inline elements.
8. Rounded border
border-radius: length; (this is an abbreviation)
Direct writing: border-radius: 1, 2, 3, 4
two values, the three values can
be written separately or border-top The
principle of -letf-radius is that the intersection of the circle and the border forms a rounded corner. The
parameter can be in the form of a number or a percentage.
If it is a square, set it to half of the width or height, or write it directly as 50%.
If it is a rectangle, set it to half of the height. You can do
9. Box shadow
box-shadow:h-shadow v-shadow blur spread color inset
h-shadow: required, the position of the horizontal shadow, negative values are allowed (positive values go to the right, negative values go to the left)
v-shadow: required, the position of the vertical shadows, negative values are allowed.
blur: optional, blur distance
spread: optional, the size of the shadow
color: the color of the shadow
inset: change the outer shadow (outset) to the inner shadow The
default is the outer shadow, but if it is an outset, no need to write, it will not work
and the shadow box Will not take up space, and will not affect the arrangement of other boxes.
Application, when passing through the box, set the shadow
10. Text shadow
box-shadow:h-shadow v-shadow blur color
Page layout ideas
1. Confirm the layout of the
page (viewable area) 2. Analyze the row modules in the page and the column modules of
each row module 3. The column modules of each row are often floating layout, first determine the size of the undivided columns, and then determine The position of the column
4. To make an HTML page, there is a structure first, followed by a style. The structure is always the most important
1. Attention to the navigation bar: In
actual development, we will not use link a directly, but use li to include the link. Use
: The structure of li+a is clearer.
If you use a directly, search engines can easily recognize that there are stacked keywords. The suspicion, there is a risk of being downgraded by search engines, which will affect the website ranking. The
navigation bar can not give the width, and other text can be added after it. Because the text is not the same, it is best to add padding to the left and right links to open the box instead of specifying width
2. The button has a border and needs to be removed
. 3. There will be a gap in the middle of the block element, and it needs to be floated.
4. If the box added to the parent element does not fit in a row, you can adjust the margin-right to make the last parent The margin-right of the element's child elements exceeds
float
All elements can be floated. Floating elements have the characteristics of inline block elements. If they are converted to floating elements, there is no need to set block and inline-block, just set the width and height to
clear the float.
display: table
This element will be displayed as a block-level table (similar to
Clear float
Why clear float① The
parent has no height. ② The child box floats. ③ If the following layout is affected, we should clear the float.
Clear float is the essence: After clearing the influence brought by floating, floating and clearing, the father of the box will automatically detect the height of the sub-box, it will not affect the flow of the following standard
policy is closed floating, floating impact will be limited to the Father elements inside
: extra labeling, double pseudo-elements, pseudo-elements, overflow
additional labeling law, also known as wall, is a W3C recommended.
The extra tag method adds an empty tag at the end of the floating element. E.g Or other labels (e.g.,
etc.).
Advantages: easy to understand, easy writing
disadvantages: add a number of meaningless tag, structured poor
Note: The requirement of this new, empty tag must be block-level element.
You can add an overflow attribute to the parent and set its attribute value to hidden, auto, or scroll.
The child does not teach, the father, the note is add the code to the parent element
advantages: code is simple
Disadvantages: can not display overflow section
: after extra label manner is an upgraded version of the law. It also adds
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {/* IE6, 7 exclusive*/
*zoom: 1;
}
advantages: no increase labels, simpler structure
disadvantages: take care of the low version of the browser
represents the website: Baidu, Taobao, Netease
double pseudo-element, the parent element is added
.clearfix: the before, .clearfix: the After {
Content: "";
the display: Table;
} .clearfix: {After
Clear: both; .clearfix {}
* Zoom:. 1;
}
advantages: code more concise
disadvantages: Low care version of the browser
on behalf of Web site: millet, Tencent