<div class=”parent”><div class=”child”></div></div>
Method 1:
<style type=”text/css”>
html,body{height: 100%; }
body{ margin: 0; display: flex; justify-content: center; align-items: center; }
.parent{ display: flex; justify-content: center; align-items: center; }
</style>
Method 2:
html,body{height: 100%; }
body{ margin: 0; display: flex; }
.parent{ border: 1px solid red; display: flex; margin: auto; }
.child{ border: 1px solid blue; margin: auto; }
Method 3:
<style type=”text/css”>
body{ margin: 0; }
.parent{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
</style>
2. Implement the ‘one’ and ‘three’ layouts of dice respectively.
Point layout:
<div>
<span></span>
</div>
<style type=”text/css”>
body{ margin: 0; }
div{width: 200px; height: 200px; border: 1px solid #000; display: flex; justify-content: center; align-items: center; }
span{width: 30px; height: 30px; background: #f00; display: block; border-radius: 50%; }
</style>
Three-point layout
<div>
<span></span>
<span></span>
<span></span>
</div>
<style type=”text/css”>
body{ margin: 0; }
div{width: 200px; height: 200px; border: 1px solid #000; display: flex; justify-content:space-between; padding: 20px; }
span{width: 30px; height: 30px; background: #f00; display: block; border-radius: 50%; }
div span:nth-child(1){ align-self: flex-end; }
div span:nth-child(2){ align-self:center; }
</style>
3. Describe the difference between ~ and + selectors.
1). Adjacent sibling selectors. Select the next element of two adjacent elements that have the same parent element. Syntax: element 1 + element 2 {declaration}
For example 1:
H1 + p {color: red; }
In the HTML:
< h1 > · · · · · · < / h1 >
<p>···· </p> // Can match
< a >… < / a >,
<p>···· </p> // Cannot be matched
For example 2:
Li + li {color: red; }
In the HTML:
<ul>
< li > · · · · · · < / li >
<li>····· </li> // can match, the brother of the previous <li>
<li>····· </li> // can match, the brother of the previous <li>
</ul>
2). Ordinary sibling selector. Select all second elements after the first of two elements that have the same parent element. Syntax: element 1 to element 2 {declaration}
Such as:
H1 ~ p {color: red; }
In the HTML:
< h1 > · · · · · · < / h1 >
<p>···· </p> // Can match
< a >… < / a >,
<p>···· </p> // Can match
<h2>··· <p>···</ P >···</ H2 > // Does not match
4. Briefly describe the effective values of box-sizing and the corresponding rules of box model.
The box-sizing attribute allows you to define specific elements that match an area in a specific way.
Grammar: box – sizing: content – box | border – box | inherit;
1) the box – sizing: content – box; This is the width height behavior specified by CSS2.1. The width and height are applied to the element’s content box, respectively. Draws the inside margins and borders of elements outside the width and height. Is the default value. If you set the width of an element to 100px, the content area of the element will be 100px wide, and the width of any borders and margins will be added to the width of the final drawn element
2) box – sizing: border – box; Any interior margins and borders specified for an element will be drawn within the specified width and height. Tell the browser to understand that the border and margin values you set are contained within width. That is, if you set width to 100px for an element, the 100px will contain the other border and padding, and the actual width of the content area will be width minus border + padding. In most cases this makes it easier to set the width and height of an element.
3) the box – sizing: inherit; ; Specifies that the value of the box-sizing attribute should be inherited from the parent element
5. Will margins of elements in Flex be merged?
Don’t merge
6. Explain the difference between align-items and align-content.
The align-items property applies to all Flex containers and is used to set the default alignment of each Flex element on the cross axis. If you have a multi-line container, there is space between the multi-line and multi-line containers.
Align-content has the same functionality, but the align-content property only works with multi-line Flex containers. One important point is that there is no space between the lines in align-content containers.
Single-row container:
Multi-line container:
7. Briefly describe the use of data: property (how to set, how to obtain); What are the advantages?
Data -*; data-*;
1) Traditional methods
GetAttribute () gets the data-attribute value;
SetAttribute () sets the value of the data-attribute
2) HTML 5 new method
Such as data – href
Href Retrieves the data-href attribute value
Dataset. Href = ‘http://baidu.com’ Sets the data-href property value
The traditional method has no compatibility problem, but it is not elegant and convenient
The new HTML5 approach is elegant and convenient, but it has compatibility issues and can be used for mobile development or projects that don’t support older browsers
Advantages: Custom data makes the page interactive (no need to use Ajax or query the data on the server).
8. Describe the differences between title and H1, B and strong, and I and EM.
1) Difference between title and H1:
Definition: Title is the website title and H1 is the article topic
Title summary site information, can directly tell the search engine and the user this site is about what topic and content, is displayed in the Tab bar of the web page; H1 Highlights the topic of the article, facing the user, and is displayed on the page.
B) strong C) strong D) strong
Visually, THERE is no difference between B and strong. From the semantic analysis of the word, IT can be concluded that B is the short form of Bold, so the meaning conveyed by the B mark is only Bold and has no other functions, while strong means emphasis. So we use this tag to send a message to the browser that emphasizes a paragraph of text. It emphasizes the document logic, not how the browser should display it.
3) The difference between I and EM: Again, I is Italic while EM is emphasizing.
9. What is standard document flow?
Standard document flow: Web pages are parsed in a top-down, left-to-right order derived from standard document flow.
Standard document flow levels, divided into two levels: block-level elements and inline elements;
Block-level elements:
1). Occupy a line that cannot be juxtaposed with any other elements
2). Can accept width and height
3). If you do not set the width, the width will default to 100% of the father, that is, as wide as the father
Inline elements:
1). Side by side with other elements
2). Width and height cannot be set. The default width is the width of the text
10. What is z-index? Can be triggered when the value of position is what?
The z-index property sets the stack order of elements. Stack with higher order elements will always be in a stacked sequence in the front of the lower element, when the content from the document flow is more, and overlap, it is possible to fully display the contents of the other contents were the result of the shade, then we will need to specify which layer in the above, which in the following, z – the index attribute is doing this. Note: Z-index only works on locating elements.
This parameter can be triggered when the value of position is relative, Absolute, fixed, or sticky
11, PC side commonly used layout method
Fixed layout, floating layout, positioning layout, flow layout, elastic layout
12 Layout left 20% middle adaptive 200px right cannot be used positioning
Method 1:
<div class>>left</div>
<div class>>center</div>
<div class>>right</div>
<style type=”text/css”>
body{ margin: 0; display: flex; }
.left{width: 20%; height: 200px; background: red; }
.center{height: 400px; background: blue; flex-grow: 1; }
.right{width: 200px; height: 600px; background: pink; }
</style>
Method 2:
<div class>>left</div>
<div class>>right</div>
<div class>>center</div>
<style>
body{ margin: 0; }
.left{width: 20%; height: 200px; background: red; float: left; }
.center{height: 600px; background: blue; margin-left: 20%; margin-right: 200px; }
.right{width: 200px; height: 400px; background: pink; float: right; }
</style>
Method 3:
<div class>left</div>
<div class>>right</div>
<div class>>center</div>
<style type=”text/css”>
body{ margin: 0; }
.left{width: 20%; height: 200px; background: red; float: left; }
.center{overflow: hidden; height: 400px; background: blue; }
.right{width: 200px; height: 600px; background: pink; float: right; }
</style>