display:none/block
visibility:hidden/visible
Difference between the two:
display: none elements, not the location of the original standard flow, the page is not see, but the source code as well as the corresponding label.
visibility: hidden elements, the position occupied by the original standard stream, less than, a corresponding source code in the tag page viewed.
overflow: hidden; or overflow will go beyond the elements of content to hide
3. overflow omitted
Three attributes: overflow, white-space, text-overflow indispensable
.box { width : 200px ; height : 100px ; background-Color : Pink ; overflow : hidden ; White-Space : nowrap ; / * the text set not to wrap * / text-overflow : ellipsis ; / * ellipsis omitted mean text-overflow text overflow * / }
4. cursor style
cursor: default Default | pointer hands | move moved | text text | help Help
The most common is the pointer, move;
Removing text box or text field surrounding wire
outline:none
The images and text alignment
vertical-align: baseline | top | middle | bottom
Usually with middle so that pictures and text are centered in the vertical direction.
You can also use the top, middle, bottom and the bottom of the default picture box to clear the pitch.
The default image with the bottom of the box spacing cleared the way:
vertical-align: top | middle | bottom can also set a picture as block-level elements display: block
6. sprite
1. * * Why use sprite **
-
To reduce the number of requests sent to the server
-
Pages load faster
2. What is a sprite
CSS sprites actually integrate some of the background image of a Web page into a large figure (sprite), however, each page element is usually required only a small sprite in view of different positions, in order to pinpoint the sprite a small map, you need to use the CSS background-image, background-repeat and background-position properties background positioning, the most critical is to use the background-position property accurately positioned.
3. sprite intrinsically
Background image position using the attribute set
7. Fonts icon
1. The drawback of the sprite
1. The increase in the total size of the additional documents, because the sprite is essentially still pictures
2. The extra increase in the number of http requests
3. Zoom distorted
2. Fonts icon of advantages:
1. You can make things with the same picture can do, change transparency, rotation, etc ..
2. However, in fact, is the essence of the text, it can be very casual change color, shadows, transparency, and so on ...
3. itself smaller, but the information carried and not cut.
4. supports almost all browsers
The mobile terminal device necessary medicine ...
8. A sliding door (Learn)
No matter how content changes on both sides of the style or the original style
9. The width and height is provided
A high-wide element may be used in px, may also be used in the form of a percentage, it may also be used em
If the percentage of it, is based on wide parent element for a high percentage of the set.
10. Transition
transition: Transition
To attribute the transition, the transition duration, trajectory, time delay
transform: translate|scale|rotate
It refers to translate movement of the position of the element, such as horizontal or vertical position
The scale refers to the change in the size of the elements, such as width and height, which is a multiple of the parameter, if only one value is written, by showing the width and height are scaled multiples.
It refers to rotate the rotary element