1, CSS three features
CSS has three characteristics: cascading, inheritance and priority.
- Lamination
Under the same selector
Style conflict: proximity override.
Styles do not conflict: does not affect.
<style>
div {
color: red;
font-size: 12px;
}
div {
/* The text color is overwritten with pink, and the font size is not affected */
color: pink;
}
</style>
- Inheritance
The child label will inherit some styles of the parent label (mainly text styles), such as text color and font size.
<div>
<p>Dragon born dragon, chicken born chicken, mouse born child can make holes</p>
</div>
<style>
/* p Inherit div style */
div {
color: pink;
font-size: 14px;
}
</style>
- priority
<!--
Same selector type: proximity principle
Different selector types: see selector weight(!important[10000] > Inline style [1000] > ID Selector [100] > class/Pseudo class selector [10] > Element selector [1] > Inherit [0] > wildcard)
Note: the composite selector will have the problem of weight superposition (addition). Although the weights will be superimposed, there will never be carry.
In the following example: Yes!important，Inline style, ID Selector, class selector, element selector specifies the text color. According to weight!important Is the highest priority, so it is displayed in pink.
-->
<div class="test" id="demo" style="color: purple">You look good with a smile</div>
<ul class="nav">
<li>unfaithful man</li>
<li>Big elbow</li>
<li>Pig tail</li>
</ul>
<style>
.test {
color: red;
}
div {
color: pink!important;
}
#demo {
color: green;
}
/* compound selector */
/* ul li Weight 1 + 1 = 2 */
ul li {
color: green;
}
/* .nav li Weight 10 + 1 = 11 */
.nav li {
color: pink;
}
</style>
2, Box model
- Four elements of box model: border border, content, padding inner margin and margin outer margin.
- frame
Three border attributes: border width thickness, border style border style, and border color border color. The border affects the actual size of the box.
<style>
div {
width: 300px;
height: 200px;
/* border-width The border thickness is generally px */
border-width: 5px;
/* border-style Border style: solid solid line border dashed dotted line border dotted dotted line border*/
border-style: solid;
border-color: pink;
/* The compound writing of borders has no order */
border: 5px solid pink;
/* border-top */
border-top: 5px solid pink;
/* bottom */
border-bottom: 10px dashed purple;
/* border-left */
border-left: 10px dotted blue;
/* border-right */
border-right: 10px dashed orange;
}
</style>
Rounded border is the intersection of circle / ellipse and border to form a rounded effect. It is written as follows:
3. Circular approach:
<div class="yuanxing"></div>
4. Rounded rectangle:
<div class="juxing"></div>
5. You can set different fillets:
<div class="radius"></div>
<style>
/* Circle: radius = half width and height */
.yuanxing {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
border-radius: 50%;
}
/* Rounded rectangle: radius = half height */
.juxing {
width: 300px;
height: 100px;
background-color: pink;
border-radius: 50px;
}
/* Different fillets: clockwise( ↖️ ↗️ ↘️ ↙️) */
.radius {
width: 200px;
height: 200px;
border-radius: 10px 20px 30px 40px; */
border-radius: 10px 40px; */
/* ↖️ */
border-top-left-radius: 20px;
}
</style>
- padding
The inner margin also affects the size of the box. If the box itself does not write the width/height attribute, padding will not support the box at this time.
<!-- padding-top, padding-bottom, padding-left, padding-right -->
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding-left: 20px;
padding-top: 30px;
/* Compound writing */
/* 1.Upper right lower left */
padding: 5px;
/* 2.Up, down, left and right */
padding: 5px 10px;
/* 3.Upper right lower left */
padding: 5px 10px 20px;
/* 4.Upper right lower left clockwise */
padding: 5px 10px 20px 30px;
}
</style>
- Margin
The distance between boxes.
<!-- margin-top, margin-bottom, margin-left, margin-right -->
<!-- margin Compound writing rules and padding agreement -->
<style>
.header {
width: 900px;
height: 200px;
background-color: pink;
/* The block level box is horizontally centered and aligned. The box must have a width specified!! */
margin: 0 auto;
}
</style>
The outer margin merging problem is divided into two categories:
1) Vertical outer margin merging of adjacent block level elements: only one of them can be added with outer margin.
<div class="damao">Big hair</div>
<div class="ermao">twenty fen</div>
<style>
.damao, .ermao {
width: 50px;
height: 50px;
background-color: pink;
}
/* Merge into: max. 200px. It's not the sum of the two */
.damao {
margin-bottom: 100px;
}
.ermao {
margin-top: 200px;
}
</style>
2) The vertical outer edge of nested block level elements collapses from the parent element. When the outer margin of the child element is greater than that of the parent element, the parent element will collapse. There are three solutions.
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* Method 1. Define a transparent border for the parent element */
border: 1px solid transparent;
/* Method 2. Set the upper and inner margins for the parent element */
padding: 1px;
/* Method 3. (common) add overflow: hidden for the parent element */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
3, Shadow
- Box shadow
Box shadows do not take up space and do not affect the arrangement of other boxes.
<style>
div:hover {
/* box-shadow: Horizontal position, vertical position, blur distance (virtual and real), size, color, Inner Shadow (insert) - > Default outer shadow outlet, but cannot be written, which will invalidate the shadow */
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
</style>
- Text shadow
Text shadow has fewer size and internal shadow attributes than box shadow.
<style>
div {
font-size: 50px;
color: orangered;
font-weight: 700;
/* Horizontal position vertical position virtual and real color */
text-shadow: 5px 5px 8px rgba(0, 0, 0, .3);
}
</style>
4, float
Traditional web page layout has three ways.
1) Normal flow / standard flow: the tags are arranged in the specified default way, including block level elements, inline elements and inline block elements.
2) Floating: create a floating box and move it to the left / right edge. The most typical application is to arrange and display multiple block level elements in a row.
3) Positioning: elements are free to position the layout.
The first rule of web page layout: [multiple block level elements, standard flow for vertical arrangement and floating for horizontal arrangement]
This chapter is about floating knowledge and usage.
- Floating characteristics
1) Floating elements break away from the standard flow.
The floating element floats to the specified position out of the control of the standard flow;
The floating box no longer retains its original position, and the lower element moves up.
2) Floating elements are displayed in one row, with the top of the element aligned.
If one line cannot fit, the extra boxes will be aligned on another line.
3) Floating elements have the properties of inline block elements.
Any element can float. No matter what mode the element was originally, it has the property of "inline block element" after adding floating. If the inline element is floating, the height and width can be given directly without converting the block level \ inline block element. - Floating layout
1) First arrange the upper and lower positions with the parent elements of the standard flow, and then add floating child elements to arrange the left and right positions.
2) Set the box size first, and then set the box position.
<!--
1. Parent box collocation of floating and standard flow
2. Floating boxes only affect the subsequent standard flow
3. If a child element floats,Other boxes also float,This ensures that these child elements are displayed on one line
-->
<div class="box">
<div class="damao">Big hair</div>
<div class="ermao">twenty fen</div>
</div>
<style>
.box {
width: 900px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 150px;
background-color: red;
}
</style>
- Clear float
The reason for clearing floating is: the parent box has no height; Floating does not occupy position; The box that affects the following standard flow when the parent height is 0. There are four ways to clear floats.
1) Extra label method / partition method [add an empty label at the end of the floating element]
Advantages: easy to understand and write, which is recommended by W3C
Disadvantages: add meaningless labels and poor structure
<div class="box">
<div class="damao">Big hair</div>
<div class="ermao">twenty fen</div>
<!-- This new box must be a block level element, not an inline element -->
<div class="clear"></div>
</div>
<div class="footer"></div>
<style>
/* The parent box has no height and the elements inside float */
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
/* clear label of middle clip */
.clear {
clear: both;
}
/* Standard flow */
.footer {
height: 200px;
background-color: black;
}
</style>
2) Add overflow attribute to the parent [add overflow: hidden; to the floating parent]
Advantages: simple code
Disadvantages: the overflow floating part cannot be solved
/* Change the above code, remove clear, and add the overflow attribute to the parent element */
.box {
overflow: hidden;
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
3) Add after pseudo element to parent
[the upgraded version of the additional labeling method adds an empty box after the floating label through CSS]
/* Copy and paste directly in CSS, and use this kind of name in the parent box to clear the float */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6,7 Proprietary, take care of low version browsers */
.clearfix {
*zoom: 1;
}
4) Add double pseudo element to parent
[an empty box is added in front of and behind the floating label through CSS]
/* Copy and paste directly in CSS, and use this class name. clearfix in the parent box to clear the float */
.clearfix:before,
.clearfix:after {
content: "";
/* Convert to block level elements and display on one line */
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
5, position
- static positioning
Default. Standard flow, no positioning. - relative positioning
Move relative to your original position and keep the original position without departing from the standard flow.
.box1 {
position: relative;
/* Take your original position as the benchmark, 100px from the top and 100px from the left */
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
- absolute positioning
If there is no father or no father positioning, the position positioning relative to the viewing area of the browser; The father has a position, relative to the position of the parent. Absolute positioning departs from the standard flow and does not retain the original position.
<style>
/* Grandpa has a location */
.yeye {
position: relative;
width: 800px;
height: 800px;
background-color: hotpink;
padding: 50px;
}
/* Father has no position */
.father {
width: 500px;
height: 500px;
background-color: skyblue;
}
/* The son is positioned based on his grandfather and the nearest parent element */
.son {
position: absolute;
left: 30px;
bottom: 10px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
- fixed positioning
Fixed to the location of the viewable area of the browser. Break away from the standard flow and do not occupy the original position.
<div class="fixed"></div>
<div class="w">Layout box</div>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
/* How to paste the fixed box on the right side of the layout Center: */
position: fixed;
/* 1. First go half the width of the browser */
left: 50%;
/* 2. Use margin to take half the width of the layout box */
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
- Viscous positioning
It is a mixture of relative positioning and fixed positioning, with poor compatibility (IE does not support it).
<!--
1.Move the element with the browser's visual window as the reference point (fixed positioning property)
2.Viscous positioning occupies the original position (relative positioning characteristics)
3.Must add top bottom left right One of them is valid
-->
<style>
.nav {
position: sticky;
/* When the distance above is 0, it becomes viscous positioning */
top: 0;
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
- Position stacking order
Only positioned boxes have stacking order z-index, and standard flow and floating boxes do not. It is the priority of stacking. 0 is the bottom layer. The larger the number, the higher the layer will hold the bottom layer.
In the following example, the z-index of bear 2 is 2, which is larger than bear 1, so bear 2 is displayed above bear.
<body>
<div class="box xiongda">Xiong Da</div>
<div class="box xionger">Xiong er</div>
</body>
<style>
.box {
/* Both are positioning boxes */
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.xiongda {
background-color: red;
/* Background transparency */
opacity: 0.5;
/* Stacking priority */
z-index: 1;
}
.xionger {
background-color: green;
left: 50px;
top: 50px;
z-index: 2;
}
</style>
6, Show and hide
- display of hidden elements
This method no longer occupies the original position after hiding the element!
display: none hide display: block\inline\inline-block display
- Show visibility of hidden elements
This method occupies the original position after hiding the element!
visibility: hidden hide visibility: visible display
- Show overflow of hidden elements
.peppa {
/* Overflow display */
overflow: visible;
/* Overflow hiding */
overflow: hidden;
/* scroll The overflow part displays the scroll bar. If it does not overflow, the scroll bar is also displayed */
overflow: scroll;
/* auto Scroll bars are displayed only when overflow occurs. Scroll bars are not displayed when overflow does not occur */
overflow: auto;
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
7, Project considerations
- Common picture formats
1) JPG/JPEG: better retention of color information, high definition, more colors, product pictures often use JPG format.
2) GIF: it can store up to 256 colors, so it is usually used to display simple graphics and fonts, but it can save transparent background and animation effects. It is often used for small animation effects of some pictures.
3) Png: a new network graphics format, which combines the advantages of GIF and JPEG. It has the characteristics of rich storage forms and can maintain a transparent background. If you want to cut into pictures with transparent background, use PNG format.
4) PSD: it is a special format for Photoshop. It can store layers, channels, masks and other design drafts. You can copy text directly from above, get pictures, and measure size and distance. - Navigation bar making method
In the actual development, the navigation bar will not be directly labeled with a, but with li containing a, that is, (li+a).
li+a has clearer semantics and is an organized list content.
If you directly use a, the search engine is easy to identify as suspected of stacking keywords (deliberately stacking keywords is easy to be reduced by the search engine), thus affecting the website ranking. - Overall idea of page layout
In order to improve the efficiency of web page production, the layout usually has the following overall ideas:
1) The layout Center (visual area) of the page must be determined, and the measurement design draft can be obtained.
2) Analyze the row module in the page and the column module in the row module, that is, the first criterion of page layout.
3) The column module often needs floating layout. First determine the size of each column, and then determine the position of the column, that is, the second criterion of page layout.
4) Make HTML structure. We follow the principle of structure before style. - CSS attribute writing order
The following sequence is recommended:
1) Layout location attribute: display/position/float/clear/visibility/overflow
2) Self attribute: width/height/margin/padding/border/background
3) Text attribute: color / font / text decoration / text align / vertical align / white space / break word
4) Other attributes: content / cursor / border radius / box shadow / text shadow / background: linear gradient