box model, box-sizing
The box model consists of: content+padding+border+margin;
in the standard box model, the width and height set for the element in css are the content width and height.
Under the weird box model: the width and height set for the element in css=content width/ High+padding+border
box-sizing can determine the box model
| attribute value | box model |
|---|---|
| box-sizing:content | W3C |
| box-sizing: border-box; | weird |
CSS3 new features, pseudo-classes, pseudo-elements, anchor pseudo-classes
The difference between pseudo-classes and pseudo-elements:
The difference between the two is whether there are abstract elements generated;Examples of pseudo-classes – Anchor pseudo-classes, which are pseudo-classes of the a tag, to express its different states without generating any elements
a:link means unvisited link
a:visited indicates a visited link
a:hover when the mouse moves over the link
a:active means the selected link
Example of pseudo-element: it will generate a virtual element, and can set content and style for this element
:first-line:first-letter:after:before
How to hide an element in css
Set the opacity to 0, set the visibility to hidden, set the display to none, or set the position to absolute and set the position to the invisible area; or set the width and height to 0, and many other methods
How to achieve horizontal and vertical centering
1.使用定位
```
.parent{
position:relative;
}
.child{
position:absolute;
top: 50%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%);
}
```
2. 使用css3的flex
```
.parent{
display:flex;
justify-content:center;
align-items:center;
}
```
3. 将子元素转为'inline-block',利用父元素可以设置行内元素水品那个居中的'text-align:center'来进行水平居中；在html中再创造出一个与子元素同级的行内元素，利用'vertical-align:center'进行垂直居中
html:
```
<div class="parent">
<span></span>
<div class="child">hello</div>
</div>
```
css
```
.parent{
width: 300px;
height: 400px;
text-align: center;
border: 1px solid #000;
}
.child{
display: inline-block;
vertical-align: middle;
}
.parent span{
width: 0;
height: 100%;
vertical-align: middle;
display: inline-block;
}
```
Talk about position, display
display property value: none, inline, block, inline-block
position property value: static, relative, absolute, fixed
Problems and solutions caused by floating elements? Absolute positioning and relative positioning, the display value after the element is floated
Problems caused by floating elements: Since the element is floated out of the document flow, it will cause the collapse of the parent element and also affect the structural position of the element behind the element.
How to solve it? As long as the BFC is triggered and an isolated space is created, the impact of floating can be solved. For
details please see my blog post.
Talking about BFC—the low-key tycoon of CSS
After the element is floated, even if it is an inline element, in essence, its dispaly property has been made block, that is, it can set the width and height properties like a block-level element.
Relative positioning: Moves an element from its position in the normal flow, and this movement does not affect the position of surrounding elements, they are still in the position they were in the normal flow.
Absolute positioning: position: absolute; out of the normal flow, which means that it does not affect the position of any surrounding elements (like directly ignoring the space it occupies). The position of an element with absolute positioning is relative to the nearest positioned ancestor, or if there is no positioned ancestor, its position is relative to the original containing block.
The difference between link and @import importing css
In addition to the difference in writing, the biggest difference is that the link will be loaded and rendered together with the DOM structure, while @import can only render the page after the DOM structure is loaded.
Explain the flexbox of css3 and the applicable scenarios
The purpose of this layout model is to provide a more efficient way to lay out, align, and allocate space for items in a container. This layout also works when the item size is unknown or dynamic.
display:flex;justify-content:center;align-items:center;For example, if the element is centered, it only needs to be declared in the parent element css
Achieve uniform distribution between items:
.flex-container { display: flex; justify-content: space-around; }etc
grid layout
If there is such a page layout: a three-column layout with fixed width on both sides and an adaptive middle,
it can be easily realized by using the grid layout
.parent {
width: 100%;
display: grid;
grid-template-rows: 200px; /*行的高度*/
grid-template-columns: 300px auto 300px; /*列的宽度*/
}Because of compatibility problems, chrome only supports 57 or above, so it is not commonly used.
What are the ways to implement a two-column layout?
1. Use float and margin to combine:
2. Use grid layout
3. Use position:absolute with margin to achieve
4. Use display: flex to achieve
css dpi
dpi: is the number of pixels per inch
Do you know the difference between attribute and property?
The Chinese translation of property and attribute are very similar in meaning,
but property is an attribute in the DOM and an object in JavaScript; in object-oriented thinking, the member of the encapsulated class used to represent the state of the object is property;
Attribute is a feature on the HTML tag. In the object-oriented programming of the tag language, its object state member property,= is packaged as an attribute, but not all attributes are properties.
For example, the checked state of the checkbox, its state value in the tag can determine the selected state; while the checked in js can be used as a property object, using true or false to determine the state
How to implement flow layout, how to implement responsive layout
Streaming layout: adapting browser web pages according to percentages, has a big defect: the width and height of elements are different under different screens, but the problem and the picture are still in px and will not change, it looks like There are inconsistencies.
Responsive layout: According to the media query technology of CSS3, media query is the core of responsive design. It can communicate with the browser in advance and give the browser a suitable layout.
mobile layout
Use rem layout.: rem is the unit of css, which is calculated proportionally according to the value of the font-size of the font of the root element, that is, the html element.
Whether the padding percentage is relative to the parent width or its own width
The percentage of margin and padding is calculated relative to the width of the parent element