CSS notes, Han shunping css notes
CSS writing sequence:
1. position attributes (position, top, right, z-index, display, float, etc)
2. Size (width, height, padding, margin)
3. text series (font, line-height, letter-spacing, color-text-align, etc)
4. background (background, border, etc)
5. Others (animation, transition, etc)
// Represents all the current label wildcards (compatible with any browser that opens the page with a margin of 0 ). Currently, normalize.css is the most commonly used file. It is a customizable CSS file that makes all elements displayed by the browser more consistent and compliant with modern standards. It depends on the differences between the default element styles of browsers and precisely locates the styles to be reset.
-Ms-(Private Attribute); // IE
-Moz-(Private Attribute); // Firefox
-Webkit-(Private Attribute); // Safari and Chrome
-O-(Private Attribute); // Opera
For example:-moz-column-count: 4; (divided into four display blocks) // FirefoxBox 3D model (from external to internal): border (border)> content-padding (padding)> background-image (background image)> background-color (background color)> margin (outer margin) box size = border + outer margin + inner margin + content size in the box the best stability is the height and width of the box itself, we give priority to this. Therefore, in many cases, we will consider using the height residue method and the width residue method instead of padding and margin. Secondly, we only need to consider padding, because padding can also be considered as a special box height and width, and then we will use margin for it. Because margin has the margin merge problem.
Property notes:The most common method for vertical center is to set the parent element to display: table, the child element to display: table-cell, and vertical-align to middle. The content in the child element container is vertically centered. 1em = 16px; // ie cannot adjust px as the unit of the webpage font size, and em has inheritance. (If the body {font-size = 12px ;}# title {font-siez = 2.6em;} is defined, and the id = title is exactly in the body, the font size of id = title is 2.6*16-12 = 29.6px) z-index: 9; // parallel object. The greater the value of this attribute parameter, the attribute is stacked at the top (can be set only when the position attribute is located), and the attribute can only work in the elements with the position attribute defined. Absolute is completely out of the Document Stream, does not occupy any space, does not affect the overall layout and structure, and has no dependency with relative. It is recommended that absolute not be dependent on the parent element to prevent overall changes from collapsing. Use absolute and margin to locate and achieve the best effect, and absolute is followed, if the first element is inline or inline-block, it will be displayed side by side with the position of the previous element even if it is in zero space, and the browser size will not change in the current position. After an element is absolutely positioned, it is separated from the document stream. Its width is calculated based on the width occupied by the element content. In this way, the visual effect is better. It is best to define a width value for the element. The same is true for the float attribute. Its width is calculated based on the width occupied by the element content. Method for displaying single-row overflow text with ellipsis (...): white-space: nowrap; // overflow: hidden for one line of text;
Text-overflow: ellipsis; // beyond... show (more than partial ellipsis show) Reference address: http://jssl915.github.io/overflow.html text-indent:-999px; overflow: Den den; (tips for hiding button text)
You can set the margin and padding values for a block element. The Row Element can only set the padding and margin values in the horizontal direction. There is a gap between the elements in the row. The reason is: line breaks, tabs, and spaces. Solution: 1. the element is written as a line (the code format is not standard and is not recommended). 2. set the parent container font-size: 0; the solution for inserting img images in li: parent container font-size: 0 or img {vertical-align: bottom/top; display: block;} the height is not adaptive. When the height of the inner object changes, the outer height cannot be adjusted automatically, especially when the inner object uses margin or padding.
Solution: Add overflow: hidden to the parent DIV. You need to set the border for the parent div. Of course, you can set the border to transparent. Add padding to the parent DIV, or at least add padding-top; after visibility is hidden, still occupying space (high efficiency, not commonly used)
After the display is hidden, it does not occupy space (low efficiency, often used). display: block (block element), inline (in-Row Element), and inline-block (in-Row Element ); // convert the line element into a block element and add contentEditable = "true" to the box. The box will become an editable text box. Ul li: nth-child (1) // when the first son in Father li is 0, except for the RGB color value 0%, it must follow the percent sign, in other cases, the Unit "px" is not followed ". The clear area is an additional interval added above the margin of the element. Any floating element is not allowed to enter this range. This means that when the clear attribute is set for an element, its margin does not change. To ensure that there is a certain space between the top of a clear element and the bottom of a floating element, you can set a bottom margin for the floating element itself. Upper and lower adjacent ordinary elements, the upper and lower margins, are not simple addition, but the large margin value. This phenomenon is called the margin overlap. If it is not a common element, the margins of the adjacent elements are added. The outer margin merge only appears on the block-level element. The floating element does not merge with the adjacent element, and the absolute positioning element does not merge with the adjacent element, inline block-level elements do not produce margin merge. The vertical-align attribute only has an effect on the element in the row and does not have any effect on the element at the block level. Align = "abbsmiddle" // insert an image and text so that the image and text are vertically centered without using list-style-image to define the list item tag symbol, instead of using background-image, and positioning through background-position. When the child element is an absolute positioning element and the position value of the parent container is static, add height: inherit to the child element. If the height of the container changes, the absolute positioning element is still highly adaptive. If the page is complex, avoiding the use of position: relative will save you a lot of trouble in the confusion of z-index level coverage. Attachment address: http://www.zhangxinxu.com/wordpress/2015/02/different-height-100-height-inherit/ The hexadecimal value of Web security color is 0, 3, 6, 9, C, F, so #693, #0C6, # F0F are examples of Web security colors. The abbreviated form of the hexadecimal color value is that the browser will take each digit and copy it into two digits. For example, # F00 is equivalent to # FF0000. The fixed-width DIV cannot automatically wrap text in Chinese and English. The solution is: word-break: break-all; or word-wrap: break-word. The difference is as follows: 1. word-break: break-all; The content will automatically wrap when it reaches a fixed width. If there is a long English word at the end of the line, it will be truncated. Invalid for FF. 2. word-wrap: break-word; if the end width of the row a is insufficient to display the entire word, it will automatically put the entire word in the next row B, rather than truncate the word in line. If the entire row of B is less than one word width, the word is truncated to an alignment. Valid for FF and IE. 3. to process long English line breaks in a table: table-layout: fixed; word-wrap: break-word; advantages and disadvantages: word-break: break-all can perfectly align the text, it looks neat, but the word is cut off by 100%. It is easy to decrease the word-wrap: break-word is more user-friendly, but it will be uneven at the end of the line. The first three values of the font attribute can be in any order, but the last two values are much stricter. Font-size and font-family should not only use this order (font-size before, font-family after) as the last two values in the declaration, but must have these two values in the font declaration, this is clear. If one of the attributes is missing, the entire rule is invalid. Setting overflow: hidden in table td Does not work. You can simply add the table-layout: fixed attribute. To remove the default page scroll bar, add overflow: hidden. Position: absolute; left: 0; right: 0; top: 0; bottom: 0; effect and width: 100%; height: 100%; position: absolute; left: 0; top: 0; same, equivalent to full screen stretching occupies the current visible window. If no color is set for the border of an element (including select and input) (provided that border-style is set for the border), color will affect the border color around the element. The percentages of the top, bottom, left, and left margins of the child element are equal to the width of the parent element. If the background-position is set as a percentage, the horizontal value must appear first; otherwise, the actual effect is incorrect. When an element in a row overlaps with a floating element, its border, background, and content are displayed on the floating element. When a block element overlaps with a floating element, its border and background are displayed under the floating element ", while the content is displayed on the floating element. Style planning of a label (avoid over-design): a {color: # 06C; text-decoration: none;} a: hover {color: # F90; text-decoration: underline ;}. normal a {color: #666 ;}. normal a: hover {color: #000 ;}. list a: visied {color: #969 ;}
