Home > Developer > Web Develop
First, Text properties
1.text-align:cnter Text Center
2.line heigth Vertical Center: Row height, and height correspondence
3. Set the distance between the picture and the text: vertical-align
4.text-decoration:none Remove Hyperlink Underline
5. If you change the color of the a tag, it will be fixed on the a label, sometimes with inheritance.
Because the level of inheritance is very low, if a tag is set to a style, it is not inherited by the father.
6. First Line indent: text-indent:30px
7.font-style:oblique or italic .... (Set the font style to italic)
Second, background properties
">background-image:url (' 11.jpg '); Background Image Link
Background-repeat:repeat-x; X-axis Tiling
Background-repeat:no-repeat; Do not repeat
background-position:400px 200px Adjusts the position of the background (from left.) From right)
Background-position:center:center; Center background
Shorthand:
Background:url (' 11.jpg ') no-repeat Center;
Small yellow Man in the background debugging eyes
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Background Processing </title>
<style>
. c1{
width:100px;
height:100px;
border:1px solid red;
Background:url ("xhr.jpg") -206px-29px;
/* On that page, right-click to check, Debug */
/*background-position:center; */
/* Positioning */
}
</style>
<body>
<div class= "C1" >
</div>
</body>
1 <! DOCTYPE html> 2Three, Border properties
Common Properties
Shorthand: border:1px soild red;
Deshed: Dashed Line
Only One Direction is added: border-right:1px soild red;Iv. List Properties
Remove the logo in front of the list: UL Li{list-style:none;}
Remove the spaces in front of the list: ul{padding:0}
The above two lines can also be written in the following line
Remove the gap above the box: *{margin:0; padding:0;}<! DOCTYPE html>V. Display Properties
Display Properties
1. Set block-level labels to inline tags: disply:inline;
2. Set the inline tag to block-level label: Disply:block;
3. Inline block-level tags: like block-level can be set to a long-width, or as inline as in a row display: Display:inline-block;
4.display:none; Don't want to let the user see the hidden (very important one property)
5.visibility:hiddon is also hidden.Note the difference from Visibility:hidden:
Visibility:hidden: You can hide an element, but the hidden element still needs to occupy the same space as it did before it was hidden. That is, although the element is hidden, it still affects the layout.
Display:none: You can hide an element, and hidden elements do not occupy any space. That is, the element is not only hidden, but also the space that the element originally occupies will disappear from the page layout.
<! DOCTYPE html>
The problem of the collapse of the margin
1, Brother Div:
The margin-bottom of the above div and the margin-top of the div below will collapse, which will take the maximum value of the upper and lower margin as the display value.2. Parent-Child Div:
If there is no border,padding,inlinecontent in the parent Div, the margin of the child div is searched upward until a label is found that includes one of the border,padding,inline content, then press this div Make margin;Workaround
Workaround both of these will change the structure 1. Plus padding 2. Plus border does not change the structure 3.overflow:hidden<! DOCTYPE html>
The results after processing
Overflow problem
overflow example <! DOCTYPE html>
Ways to resolve overflows
The method of solving overflow overflow:auto;
Overflow:hidden;
Overflow:scoll; #加上滚动条Seven, clear floating
Clear syntax:
Clear:none | Left | Right | Both
1.clear:left clears the float on the left.
2.clear:both: Guaranteed no floating on either sideAttention:
Sort of a label when it is a row of labels
If the previous one is floating, stick to the previous
If the previous is not floating, it remains vertically unchanged from the previousEight, float parent collapse problem
Float it is not completely detached, it is semi-detached. Like text wrapping is implemented with float. Float is not covered with text
Half-detached, the words to squeeze past.Float Collapse <! DOCTYPE html>Solution Solutions
Solution 1.<div style= ' clear:both ' ></div> can also not add div 2. Using after . header:after{ Content: ""; #内容为空 display:block; #块级标签 clear:both; #清楚浮动的功能 } name of the contract: Clearfix . clearfix:after{ Content: ""; #内容为空 display:block; #块级标签 Clear:both; #清楚浮动的功能 (can do a function of automatic switching) }After solving the problem
<! DOCTYPE html>Ix. position (positioning) properties
Four properties of position
1.static: Default location
2.fixed: Completely out of document flow, fixed positioning (with Visual window as reference)
3.relative: Relative positioning (referring to its own position), without leaving the document flow, without jacking up, will keep its position. You can use top left for positioning
4.absolute: Absolute positioning: Out of the flow of the document (refer to the positioning of the parent label, if it is not found to be found by body)
Note: Set the positioning label to absolute and set his parent label to the anchor label (relative)Field Example ( make a style that returns to the top.) No matter you pull the scroll bar, he will fix the position and add one to it .
Fixed position <! DOCTYPE html>
Relative position, absolute position example
=============== first Parent no location, <! DOCTYPE html>
<!--parent has positioning--><!--================--><! DOCTYPE html>
Ten, the difference between float and position
FLOAT: Semi-detached document flow position: Full out-of-document flowWeb Front end "fourth" CSS property operations
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
