CSS common skills and experience summary two

How do I fill an entire page with an element?

method:
 
Html,body{height:100%;margin:0;}
#test{height:100%;}How do I make an element 10 pixels from the bottom right, left, and right sides of the window?
method:
 
Html,body{height:100%;margin:0;}
Html{_padding:10px;}
#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}How to remove the dotted box of the hyperlink?
method:
 
a{outline:none;}IE7 and earlier browsers do not support the offline attribute, you need to use js's blur() method to achieve, such as
 
How is the container transparent and the content opaque?
method 1:
 
.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.inner{width:200px;height:200px;margin-top:-200px;}
 
I am opaque content
The principle is that the container layer is level with the content layer, the container layer is set to transparency, and the content layer is overlaid on the container layer by negative margin or position absolute positioning.
 
Method 2:
 
.outer{width:200px;height:200px;background:rgba(0,0,0,.2);
Background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}
 
 
I am opaque content
 
Advanced browsers use rgba color values directly; IE browsers allow containers to be positioned relative to each other while defining container transparency.
 
How to make the entire page horizontally centered?
method:
 
Body{text-align:center;}
#test2{width:960px;margin:0 auto;text-align:left;}Defining the body's text-align value to center will enable IE5.5 to be centered too
 
Why is the background color of the container not displayed? Why can't the container adapt to the content height?
method:
 
Clear the float, please refer to Article 9 on this page.
Usually such a situation is caused by the fact that there is no clearing of the float, so the first time you think about whether there is a place where the floating is not cleared.
 
How to make a 1 pixel thin border table?
 
method 1:
 
#test{border-collapse:collapse;border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}
 
 
 
 
Name Joy Du
Age 26
 
Method 2:
 
#test{border-spacing:1px;background:#ddd;}
#test tr{background:#fff;}
 
 
 
 
Name Joy Du
Age 26
IE7 and earlier browsers do not support the border-spacing property, but can be replaced by the table's tag property cellspacing.
 
How to make the page text line spacing always maintain the tone of n times the font size?
 
method:
 
Body{line-height:n;} Note, don't add n units. Know More: How to keep the page text line spacing at the same time as the font size of n times the font size
 
What is the difference between the standard mode and the quirky mode in the Quirks mode?
 
method:
 
In standard mode: Element width = width + padding + border
In weird mode: Element width = width
For related information, please refer to the CSS3 property box-sizing
 
Several Methods and Advantages and Disadvantages of Changing Words
Idea 1: Use the negative value of text-indent to move the content out of the container
 
.test1{width:200px;height:50px;text-indent:-9999px;background:#eee url(*.png) no-repeat;}
 
Negative indentation
The advantage of this method is that the structure is simple and not ideal: 1. Due to different usage scenarios, the value of negative indentation may be different, and it is not easy to abstract into a common style; 2. When the element is a link, it is not
 
The dotted line box under IE will become incomplete; 3. If the element is defined as inline level or inline block level, there will be more differences under different browsers.
 
Idea 2: Use display:none or visibility:hidden to hide the content;
 
.test{width:200px;height:50px;background:#eee url(*.png) no-repeat;}
.test span{visibility:hidden;/* or display:none */}
 
Content concealment method
The advantage of this method is that it is compatible and easy to abstract into a common style. The disadvantage is that the structure is more complicated.
 
Idea 3: Use padding or line-height to push the content out of the container;
 
.test{overflow:hidden;width:200px;height:0;padding-top:50px;background:#eee url(*.png) no-repeat;}
.test{overflow:hidden;width:200px;height:50px;line-height:50;background:#eee url(*.jpg) no-repeat;}
 
Exclusion method
The advantage of this method is that the structure is simple and the disadvantages are:
1. Due to different usage scenarios, the value of padding or line-height may be different, and it is not easy to abstract into a common style;
2. To be compatible with IE5.5 and earlier browsers have to hack
 
Idea 4: Use ultra-small font and text full transparency method;
 
.test{overflow:hidden;width:200px;height:50px;font-size:0;line-height:0;color:rgba(0,0,0,0);background:#eee url(*.png) No-
 
Repeat;}
 
Ultra-small font + text full transparency method
The method is simple and easy to use, it is recommended to use
 
Why is only 1 of the margins of 2 adjacent divs in effect?
 
method:
 
.box1{margin:10px 0;}
.box2{margin:20px 0;}
 
Box1
Box2
In this example, the bottom margin of box1 is 10px, and the top margin of box2 is 20px, but the interval between the two on the page is 20px, instead of the expected 10+20px=30px, the result is
 
Choosing the largest margin between the two, we call this mechanism "marginal merging"; the marginal merging does not only occur between adjacent elements, but also between the father and the son.
 
Briefly list a few things to note:
Margin merging only appears on block level elements;
Floating elements do not merge with adjacent elements to create margins;
Absolutely positioned elements do not merge with adjacent elements to create margins;
No margins are merged between inline block level elements;
There will be no marginal merging between root elements (such as between html and body);
A block-level element with the attribute overflow set and a value other than visible will not be merged with its child elements;
 
How do I clear a blank gap that appears a few pixels below the image?
method 1:
 
Img{display:block;}Method 2:
 
Img{vertical-align:top;} In addition to the top value, you can also set to text-top | middle | bottom | text-bottom, even specific values can be
 
Method 3:
 
#test{font-size:0;line-height:0;}#test is the parent element of img
 
How do I make text vertically aligned to a text input box?
method:
 
Input{vertical-align:middle;}How do I make a single line of text vertically centered inside the container?
method:
 
#test{height:25px;line-height:25px;} Just set the line height of the text to be equal to the height of the container.
 
How do I make the hyperlinks have different colors after access and before the access and still retain the hover and active effects after the access?
method:
 
a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}Set the hyperlink style in the order of L-V-H-A, which can be quickly recorded as LoVe (like) HAte (hate)
 
Why can't IE set the color of the scroll bar in Standard mode?
method:
 
Html{
Scrollbar-3dlight-color:#999;
Scrollbar-darkshadow-color:#999;
Scrollbar-highlight-color:#fff;
Scrollbar-shadow-color:#eee;
Scrollbar-arrow-color:#000;
Scrollbar-face-color:#ddd;
Scrollbar-track-color:#eee;
Scrollbar-base-color:#ddd;
} Define the scroll bar color style originally set on the body to the html tag selector.
 
How to make the text overflow boundary not change line to force display in one line?
method:
 
#test{width:150px;white-space:nowrap;}Set the width of the container and white-space to nowrap, the effect is similar to the label
 
How do I make a text overflow boundary appear as an ellipsis?
Method (this method is not supported by Firefox 5.0):
 
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} First you need to set the text to be forced to display in one line, then the overflowed text
 
This is truncated by overflow:hidden, and the truncated text is displayed as an ellipsis in the form of text-overflow:ellipsis.
 
How to make a continuous long string wrap?
 
method:
 
#test{width:150px;word-wrap:break-word;}word-wrap break-word value allows word wrap
 
How to clear the float?
method 1:
 
#test{clear:both;}#test is the next sibling element of the floating element
 
Method 2:
 
#test{display:block;zoom:1;overflow:hidden;}#test is the parent element of the floating element. Zoom: 1 can also be replaced by a fixed width or height
 
Method 3:
 
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}#test is the parent of the floating element
 
How do I define the cursor shape of the mouse pointer to be hand type and compatible with all browsers?
method:
 
#test{cursor:pointer;} If the cursor is set to hand, only IE and Opera will be supported, and the hand is a non-standard attribute value.
 
How do you make a container of known height horizontally and vertically centered on the page?
method:
 
#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}Know More: How to know the height of the container on the page
 
Center horizontally vertically
 
How do I make an image of unknown size horizontally and vertically centered in a container of known width?
method:
 
#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#teSt p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}#test is the grandfather of img, and p is the parent of img. Know More: No
 
How to know the size of the picture horizontally centered vertically
 
How to set the width and height of the span (ie how to set the width and height of the inline element)?
 
method:
 
Span{display:block;width:200px;height:100px;} To make an inline element set to width and height, just define it as a block-level or inline block-level element. So there are so many ways
 
You can set the display property, the float property, or the position property, and so on.
 
How do I define multiple different css rules for an element?
 
method:
 
.a{color:#f00;}
.b{background:#eee;}
.c{background:#ccc;}
 
Test 1
Test 2
Multiple rules are separated by spaces, and only classes can use multiple rules at the same time. The id cannot be used.
 
How to clear the float?
method 1:
 
#test{clear:both;}#test is the next sibling element of the floating element
 
Method 2:
 
#test{display:block;zoom:1;overflow:hidden;}#test is the parent element of the floating element. Zoom: 1 can also be replaced by a fixed width or height
 
Method 3:
 
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}#test is the parent of the floating element
 
How do I define the cursor shape of the mouse pointer to be hand type and compatible with all browsers?
method:
 
#test{cursor:pointer;} If the cursor is set to hand, only IE and Opera will be supported, and the hand is a non-standard attribute value.
 
How do you make a container of known height horizontally and vertically centered on the page?
method:
 
#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}Know More: How to know the height of the container on the page
 
Center horizontally vertically
 
How do I make an image of unknown size horizontally and vertically centered in a container of known width?
method:
 
#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}#test is the grandfather of img, and p is the parent of img. Know More: No
 
How to know the size of the picture horizontally centered vertically
 
How to set the width and height of the span (ie how to set the width and height of the inline element)?
method:
 
Span{display:block;width:200px;height:100px;} To make an inline element set to width and height, just define it as a block-level or inline block-level element. So there are so many ways
 
You can set the display property, the float property, or the position property, and so on.
 
How to disable Chinese input method in text box?
 
method:
 
Input,textarea{ime-mode:disabled;}ime-mode is a non-standard property, only IE and Firefox support when writing this document
 
How to solve the problem that the list-style-image in the list cannot be accurately positioned?
 
method:
 
Instead of using list-style-image to define list item markers, use background-image instead and target by background-position
How to solve the problem of pseudo-objects: before and :after on the input tag?
phenomenon:
 
In writing this entry, in addition to Opera, the input tag uses pseudo-objects in all browsers: before and :after have no effect, even if Opera's performance is equally amazing. Everyone can
 
Try it out. Browser version: IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
How to solve pseudo-objects: before and :after can't define transition and animation problems on Chrome, Safari, Opera?
 
phenomenon:
 
At the time of writing this entry, in addition to Firefox, pseudo objects in all browsers: before and :after cannot define transitions and animation effects. Browser version: IE6-IE10, Firefox6.0,
 
Chrome13.0, Safari5.1, Opera11.51. If this transition or animation effect is necessary, consider using a real object.