May 30, 2021 Article blog
Standard box model: width, width, content, border, padding, margin, lower version IE box model: width, content, border, padding, margin
The parsing mode of the box model used to control elements defaults to the standard box model of content-boxcontext-box:W3C, and the height/width property of the setting element refers to the high/wide border-box:IE traditional box model of the content section. The height/width property of the setting element refers to the height/width of the border-padding-content section
CSS selectors: id selectors (#myid), class selectors (.myclassname), label selectors (div, h1, p), adjacent selectors (h1 plus p), sub-selectors (ul > li), offspring selectors (li a), wildcard selectors (s), property selectors (a(rel,""""""""""""
Inheritable properties: font-size, font-family, color
Non-inheritable styles: border, padding, margin, width, height
Priority (proximity principle): !important > .id> class > tag)!important is higher than inline priority
Element Selector: 1class Selector: 10id Selector: 100 Element Label: 1000!important declares the highest style priority if the conflict is evaluated. I f the priority is the same, select the style that appears last. Inherited styles have the lowest priority.
p:first-of-type Select the first element that belongs to its parent element p:last-of-type Select the last element that belongs to its parent element p:only-of-type Select the unique element p:only-child that belongs to its parent p:nth-child(2) Select the disabled state of the second child element that belongs to its parent element: enabled :d isable form control. : Checked radio box or check box is selected.
div：border: 1px solid red; m
argin: 0 auto; h
eight: 50px;
width: 80px;
Floating element centered up and down: border: 1px solid red; f
loat: left; p
osition: absolute; w
idth: 200px; h
eight: 100px; l
eft: 50%; t
op: 50%;
margin: -50px 0 0 -100px;
Absolute positioning left and right center: border: 1px solid black; p
osition: absolute; w
idth: 200px; h
eight: 100px; m
argin: 0 auto; l
eft: 0;
right: 0;
inline (default) - inline none - hidden block - block display table - table display list-item - item list inline-block
static (default): arranged according to the normal document flow; relative (relative positioning): does not separate from the document flow, refers to its own static position through top, bottom, left, right positioning; absolute positioning): reference from its closest parent element is not static through top, bottom, left, right positioning; fixed positioning: fixed reference pairs like visual windows.
RGBA and transparency-background-image background-origin (content-box/padding-box/border-box)-size-background-repeatword-wrap (line break for long indivisible words)word-wrap:break-word text shadow: text-shadow: 5px 5px 5px #FF0000; (Horizontal shadow, vertical shadow, blur distance, shadow color) font-face property: Define your own font fillet (border radius): The border-radius property is used to create a fillet border picture: border-image: url (border.PNG) 30 30 30 Round Box Shadow: Box-Shadow: 10px10px5px # 888888 Media Query: Define Two Sets of Css, with Different Properties When the Browser's Size Changes
The purpose of this layout model is to provide a more efficient way to lay out, align, and allocate space for entries in containers. I n the traditional layout, the block layout arranges blocks vertically from top to bottom, while the inline layout is arranged horizontally. E lastic box layouts do not have such intrinsible orientation restrictions and can be operated freely by developers. Trial scenario: The elastic layout is suitable for mobile front-end development and is perfectly supported on Android and ios.
First, you need to set the width and height of the element to 0. Then style the border.
width: 0; h eight: 0; b order-top: 40px solid transparent; b order-left: 40px solid transparent; b order-right: 40px solid transparent; border-bottom: 40px solid #ff0000;
The first real word: three pieces of height and width are OK; C enter; the following two pieces do not wrap with float or inline-block; and position them centered with margin adjustment. The second full-screen word layout: the div above is set to 100%, the div below is 50% wide, and then use float or inline to make it unwrouted.
The labels of different browsers do not default to margin and padding. * {margin:0; p adding:0; I E6 bilateral distance bug: After the block property label floats, and in the case of a horizontal margin, the margin is displayed in IE6 larger than the setting. h ack：display:inline; T urn it into in-line properties. P rogressive identification gradually excludes locality from the population. F irst, cleverly use the "9" tag to separate IE browsers from all situations. Next, separate IE8 from IE7 and IE6 again using the "plus" so that IE8 is recognized independently.
(background-color:#f1ee18;/all identification/.background-color:#00deff;9; / IE6, 7, 8 recognition / . . background-color: #a200ff;/IE6, 7 identification/_background-color:#1e0bd1;/IE6 identification/'Set a smaller height label (usually less than 10px) that exceeds its own setting height in IE6, IE7. h ack: set overflow:hidden for labels that exceed height; O r set the line heightline-height to be less than the height you set. U nder IE, you can get custom properties using the method of getting regular properties, or you can get custom properties using getAttribute(), and under Firefox, you can only get custom properties using getAttribute(). W orkaround: Get custom properties uniformly through getAttribute(). B y default, text less than 12px will be forced to appear at 12px by adding the Chrome Chinese interface, by adding the CSS property -webkit-text-size-adjust:none; s ettle. T he over style does not appear after the hyperlink access, and the hyperlink style that has been clicked on no longer has over and active. The workaround is to change the order in which CSS properties are arranged: L-V-H-A (love hate): a:link a:visited . . . .
Because of browser compatibility issues, the default values for some labels are different from browser to browser, and if CSS is not initialized, there will often be differences in page display between browsers.
Either way, find the element whose ancestor element, the most recent position value, is not static, and then judge:
If this element is an inline element, the containing block is the smallest rectangle of the padding box (except for margin, border area) that can contain the first and last inline box generated by the element; If none of them can be found, it is the initial containing block.
supplement:
static (default)/relative: Simply put, the content box of its parent element (i.e., remove the padding part) absolute: find the nearest element that is positioned as //relative: its containing block is all root element (html/body)
When an element's visibility property is set to a collapse value, it behaves the same as hidden for a typical element.
In chrome, there is no difference between using collapse values and using hidden. Firefox, opera and IE, there is no difference between using collapse values and using display:none.
display:none does not display the corresponding elements, no longer allocate space in the document layout (backflow and redrawing) visibility:hidden to hide the corresponding elements, in the document layout still retain the original space (redraw)
The display property specifies the type of box that the element should generate, the position property specifies the type of positioning of the element, and the float property is a layout that defines in which direction the element floats. S imilar to the priority mechanism: position:absolute/fixed has the highest priority, there are them when float does not work, display value needs to be adjusted. Float or absolute-positioned elements can only be block elements or tables.
The BFC specifies how the internal Block Box is laid out. P ositioning scenario: The internal Box is placed one by one vertically. T he distance in the vertical direction of Box is determined by margin, and the margins of two adjacent Box that belong to the same BFC overlap. T he left side of the martin box for each element is in contact with the left side of the box containing the block border box. T he area of the BFC does not overlap with the float box. B FC is an isolated, separate container on a page where child elements do not affect external elements. W hen calculating the height of a BFC, floating elements also participate in the calculation. BFC can be triggered by meeting one of the following conditions
The value of the root element, that is, the value of htmlfloat that is not none (default) overflow is not the value of the visible display is the value of inline-block, table-cell, table-captionposition is absolute or fixed
A floating element touches a border that contains it or a border that stays with a floating element. B ecause floating elements are not in the document flow, the block box of the document flow behaves as if the floating box does not exist. F loating elements float on the block box of the document flow. Problems with floating:
The height of the parent element cannot be held open, and non-floating elements (inline elements) that affect the same level as the parent element and floating elements follow if the previous element floats, the element before the element also needs to float, otherwise it affects the structure of the page display. How to clear floats:
Parent div defines height after the last floating element fills the div label and adds the styleclear:both. T he parent label that contains the floating element adds the style overflow to hidden or auto. Parent div defines zoom
Wraps a layer of container outside the coincident element and triggers the container to generate a BFC. example:
.aside { margin-bottom: 100px; w idth: 100px; h eight: 150px; b ackground: #f66; } .main { margin-top: 100px; h eight: 200px; b ackground: #fcc; . T he BFC property has now been triggered. }
Automatically becomes display:block
Media queries allow you to define different css for media of different sizes and sizes to fit the display of the appropriate device.
Page loading top-down Is, of course, loading styles first. After writing the body label because the browser parses the HTML document line by line, foUC phenomenon (i.e. page flicker problem caused by style failure) may occur under windows IE when parsing to the style sheet written at the end (outreach or writing on the style label) causes the browser to stop rendering, wait for loading and re-render after parsing the style sheet is complete
Avoid overconsumption Avoiding descendant selectors Avoid chain selectors Using compact syntax to avoid unnecessary namespaces avoiding unnecessary duplication of names that represent semantics. A good class name should be to describe what he is and not like what to avoid! important, you can select other selectors to refine the rules as much as possible, and you can merge duplicate rules in different classes
The resolution of the CSS selector is resolved from right to left. I f a left-to-right match is found to be non-compliant and needs to be backtracked, a lot of performance is lost. I f you match from right to left, find all the far right nodes first, and for each node, look up for its parent node until the root element is found or a matching rule meets the criteria, ending the traversal of the branch. T he performance of the two matching rules varies greatly because right-to-left matches filter out a large number of ineligible far right nodes (leaf nodes) in the first step, while left-to-right matching rules waste the performance of failed lookups. O nce the CSS parsing is complete, the parsed results need to be analyzed together with the contents of doM Tree to create a Render Tree that will eventually be used for drawing. When you set up Render Tree (the "Attachment" process in WebKit), the browser determines what kind of Render Render Tree is generated for each element in the DOM Tree based on the resolution results of the CSS (Style Rules).
Use even number bodies. E ven number numbers are relatively easy to proportionally relate to other parts of the web design. W indows comes with a dot matrix symmetry (Chinese-easy-to-synth) that starts with Vista with only 12, 14, 16 px-sized dot arrays, while 13, 15, 17 px uses a smaller point. (i.e. each word takes up 1 px more space, but the dot matrix doesn't change), so it's slightly sparse.
When to use margin:
When you need to add a blank space on the outside of the border, you don't need a blank space between the two boxes connected up and down the background color, and you need to cancel each other out. When to use padding:
You need to add a blank space on the inside of the border that requires the background color to be connected up and down the blanks of the two boxes, which you want to sum up. C ompatibility issues: In IE5 IE6, when you specify margin for a float box, the margin on the left can become twice as wide. Solve by changing padding or specifying the display:inline of the box.
When you set the width of an element as a percentage, it is calculated relative to the width of the parent container, but for properties that represent vertical distance, such as padding-top, padding-bottom, margin-top, margin-bottom, and so on, when you set them as a percentage, they are also based on the width of the parent container, not the height.
Principle: a bit like carousel, the overall elements have been arranged, assuming there are 5 full-screen pages to display, then the height is 500%, just 100%, the rest can be through transform y axis positioning, can also be achieved through margin-top:overflow:hidden; transition:all 1000ms ease;
Responsive Web design is a site that is compatible with multiple terminals, rather than making a specific version for each terminal. T he basic principle is to detect different device screen sizes through media queries. The head of the page must have a meta-declared viewport.
Parallax Scrolling creates stunning 3D effects by keeping the background moving slower than the foreground as the web page scrolls down.
CSS3 implementation advantages: short development time, performance and development efficiency is better, the disadvantage is not compatible with the lower version of the browser jQuery implementation by controlling the scroll speed of different layers, calculate the time of each layer, control the scrolling effect. Pros: Compatible with all versions, good and bad for performance control: developed to require high plug-in implementation for producers such as: parallax-scrolling, compatibility is very good
Single colon (:) for CSS3 pseudoclasses, double colons (: :) for CSS3 pseudo-elements. : :before is the existence of a child element that defines a pseudo-element before the body content of the element. D oes not exist in dom, only in pages. : before and :after are two pseudo-elements that have emerged in CSS 2.1. Initially, the prefix of pseudo-elements used a single colon syntax, but as the Web evolved, in the CSS3 specification, the syntax of pseudo-elements was modified to use a double colon to become :before::after
Line height refers to the height of a line of text, specifically the distance between the baselines between two lines of text. T he height and line-height properties that play a high role in CSS are height and line-height, and the height property is not defined, and ultimately its performance must be line-height. V ertical centering of single lines of text: Setting the line-height value to a value of the same size as height enables vertical centering of a single line of text, but you can actually delete height. Multi-line text centered vertically: The display property needs to be set to inline-block.
p{font-size:10px; - webkit-transform:scale(0.8); //0.8 is the scale
-webkit-font-smoothin g doesn't work under the window system, but it does work on IOS devices -webkit-font-smoothing: antialiased is optimal and smooth grayscale.
37. What happens when the CSS property overflow property defines the content of the overflow element content area?
When the parameter is scroll, a scroll bar must appear. W
hen the argument is auto, a scroll bar appears when the contents of the child element are larger than the parent element. W
hen the argument is visible, the overflow appears outside the parent element.
When the argument is hidden, the overflow is hidden.
Most displays have a default frequency of 60Hz, which means 60 refreshes in 1 second, so theoretically the minimum interval is 1/60 x 1000ms . . . 16.7ms.
The arrangement of line boxes is affected by the middle blanks (carriage spaces) and so on, because spaces also belong to the characters, these white spaces will also be applied styles, occupy space, so there will be intervals, the character size is set to 0, there will be no spaces. Solution:
You can write all the code in a row of floating li floats:left in ul with font-size:0 (not supported by Google);