HTML/CSS
1. How to draw a triangle using css?
Method 1: use border to draw triangles (can be isosceles or right angles)
Do not set the width and height of the box element, set the borders for the four directions respectively, but the colors are transparent (set the unwanted colors as transparent). If you set the border color in one direction, such as border bottom, a triangle with the triangle facing upward will be drawn.
#traingle { width: 0; height: 0; border: 100px solid transparent; border-bottom: 100px solid #ccc; }
You cannot set colors for margin and padding. Margin has no background color and is completely transparent. Margin can change the top, bottom, left and right margins of elements separately. You can also change all attributes at once, and padding follows the background color (background color can include content, inner margin and border area).
Method 2: use linear gradient
Achieve a 45 degree gradient, then change its color from gradient to two fixed colors, and finally make one of the colors transparent.
#traingle { width: 100px; height: 100px; background:linear-gradient(45deg,black,black 50%,red 50%,red 100%) }
Method 3: use transform:rotate and overflow:hidden
Select a rotation center to rotate, and then intercept the desired part with overflow:hidden
2. Briefly describe the priority mechanism of css3 selector? (CSS weight and its introduction method)
When the weights of css selection rules are different, the one with high weight takes precedence; When the weights of css selection rules are the same, the later defined rules take precedence; css attribute followed by! When important, unconditional absolute priority;
(1) Weight
We divide the particularity into several levels. Each level represents a kind of selector. The value of each level is the number of selectors it represents multiplied by the weight of this level. Finally, the special value of the selector is obtained by adding the values of all levels.
(2) Introduction mode
Interline style (add style attribute to label directly)
<div style="background: red;">inline style </div>
The internal style sheet (embedded style) writes the style label on the head label
<html>
<head>
<title>Internal style sheet</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
</style>
</head>
<body></body>
</html>
The external css file is imported with the link tag (in the head tag) and the address is written in the href attribute.
<link rel="stylesheet" type="text/css" href="..."/>
Import style
<style type = test/css>
@import url("The name of the external style sheet");
</style>
3. Please write down the meaning of 1rem, 1em, 1vh, 1px and
1rem: inherit the font size of the root element
1em: inherit the font size of the parent element
1vh: the (vw) width and (vh) height of the window, equivalent to 1% of the screen width and height
1px: relative length unit. Pixel PX is relative to the resolution of the display screen
4. Label all functions Reference 1Reference 2
Setting the herf property can be used as hyperlinks and anchors (a common function of returning to the top can be realized by returning to the top) Call or email and protocol qualifier
5. Horizontal and vertical centering of unknown width and height elements (scheme and comparison) – horizontal and vertical centering of content?
Method 1: it is realized by locating and transform ing attributes
Idea: the sub element is absolutely positioned, 50% from the top and 50% from the left, and then use css3 transform:translate(-50%; -50%)
Advantages: it can be used in the browser of webkit kernel
Disadvantages: IE9 is not supported, and the following transform attributes are not supported
<style>
.parent{
width:100%;
height:400px;
background:#666;
position:relative;
}
.children{
position:absolute;
top:50%;
left:50%;
background:red;
transform:translate(-50%,-50%);
}
</style>
Method 2: use elastic box by using flex layout
Idea: use css3 flex layout
Advantages: simple and fast
Disadvantages: poor compatibility. For details, see: http://caniuse.com/#search=flex
<style>
.parent{
width:100%;
height:400px;
background:#666;
display:flex;
align-items:center;
justify-content:center;
}
.children{
background:red;
}
</style>
Method 3: through the table attribute, the main principle is to set the parent element as table and the child element as table cell, and use the table attribute to center the child element vertically and horizontally
Prepare a parent element with known width and height. The child elements are nested. The parent element is set to table, absolute positioning, and the child element is set to table cell. Then set the vertical align of the child element to middle to center it vertically, and text align to center to center it horizontally.
Advantages: the parent element can dynamically change the height (the characteristics of the table element)
Disadvantages: not supported under IE8
<style>
.parent{
display:table;
width:100%;
height:400px;
background:#666;
}
.children{
display:table-cell;
vertical-align:middle;
text-align:center;
background:red;
}
</style>
Original text: Add link description
Comparison of various schemes: Method 3: using table does not work for pictures,
Method 4: Add link description
Idea: use an empty label span, set its vertical align baseline as the middle, and set it as inline block with a width of 0
Disadvantages: a useless empty tag is added. Display: inline blockie 6 and 7 are not supported (add: _zoom1;*display:inline).
Of course, you can also use pseudo elements to replace the span tag, but IE support is not good, but this is a later word
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Unknown width and height elements are centered horizontally and vertically</title>
</head>
<style>
.parent2{
height:300px;
width: 300px;
text-align: center;
background: #FD0C70;
}
.parent2 span{
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
zoom: 1;/*BFC*/
*display: inline;
}
.parent2 .child{
display: inline-block;
color: #fff;
zoom: 1;/*BFC*/
*display: inline;
}
</style>
<body>
<div class="parent2">
<span></span>
<div class="child">hello world-2</div>
</div>
</body>
</html>
How many Git commands are you familiar with?