Cascading Style Sheet (CSS)
(1) Introduce the CSS
1. Interline style
<div style="
width: 100px;
height: 100px;
background-color: red;
"></div>
Copy the code
2. Page-level CSS
<head>
<title></title>
<style type="text/css">
div{
}
</style>
</head>
Copy the code
3. External CSS files
The interview skills
Expression: Learning — Expression: go through (rehearse many times) speak and practice more (deliberately)
Load the CSS
www.baidu.com DNS resolution — 192.122.222.666
Start a new thread
Download a row and execute it
Execute to CSS file, open a new thread, and download at the same time, called asynchronous loading
Asynchronous — simultaneous synchronous — not simultaneous
(2)CSS selector
1.ID selector (one element — one ID, one to one)
roseOnly darryRing
HTML: < div id = "only" > 123 < / div >Copy the code
CSS: #only{}
Copy the code
2. Class selector (feature selection) — many-to-many
HTML: < div class = "demo" > 123 < / div >Copy the code
CSS: .demo{}
Copy the code
demo
<div class="demo demo1">123</div>
<div class="demo ">234</div>
Copy the code
.demo{
background-color: yellow;
}
.demo1{
color: #f40;
}
Copy the code
3. Label selector
<span>123</span>
<div>
<span>234</span>
</div>
Copy the code
span{
color: #f40;
font-weight: bold;
}
Copy the code
4. Wildcard selector
*{} Any, all tags -- whole pageCopy the code
Priority (CSS weight) : 10-1 Difference 256 base
! Important Infinity (can calculate, is different from the math) header styles (tattoo) 1000 Id 100 Class attribute | | pseudo-classes 10 (first, whichever is later) tags | pseudo element 1 wildcard 0
5. Property selector
Instance of a
<div id="only" class="demo">1123</div>
[id]{
background-color: red;
}
Copy the code
Example 2
<div id="only" class="demo">1123</div>
<div id="only1">234</div>
Copy the code
[id="only"]{
background-color: red;
}
Copy the code
6. Pseudo-class selectors
! important div{ background-color: red! important; }Copy the code
7. Derived selector (parent and child selector)
Example 1:
<div>
<span>123</span>
</div>
<span>345</span>
Copy the code
div span{
background-color: red;
}
Copy the code
Example 2: You don’t have to have labels
<div class="wrapper">
<strong class="box">
<em>3454</em>
</strong>
</div>
<div>123</div>
Copy the code
.wrapper .box em{
background-color: red;
}
Copy the code
8. Direct child element selector
div > em{}
Copy the code
Principles of browser kernel
<section> <div> <p> <a href=""> <span></span> </a> </p> <ul> <li> <a href=""> <span> <em>1</em> </span> </a> </li> </ul> </div> <a href=""> <p> <em>2</em> </p> <div></div> </a> </section>Copy the code
Section div ul Li a em {} From right to left to identify faster
9. Side-by-side selectors: Implementation problems that can’t be implemented
Problem: Select the middle div
<div>1</div>
<div class="demo">2</div>
<p calss="demo">3</p>
Copy the code
Div.demo {} weights are calculated, again, overwriting the preceding ones without SpacesCopy the code
Parallel selectors: Implementing problems that cannot be implemented
<div class="classDiv" id="idDiv">
<p class="classP" id="idP">
1
</p>
</div>
Copy the code
<style>
#idDiv p{
background-color: red;
}
/* 100+1 */
.classDiv.classP{
background-color: green;
}
/* 10+10 */
</style>
Copy the code
Plus infinity plus 1 is greater than infinity
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> div#idDiv p.classp {background-color: red! important; } div .classP#idP{ background-color: green! important; } </style> </head> <body> <div class="classDiv" id="idDiv"> <p class="classP" id="idP"> 1 </p> </div> </body> </html>Copy the code
10. Grouping selector — code is highly coupled
<em>1</em>
<strong>2</strong>
<span>3</span>
Copy the code
em,
strong,
span{
background-color: red;
}
Copy the code
.demo1{
background-color: aqua;
}
.demo2{
background-color: black;
}
.demo1,
.demo2{
width: 10px;
height: 10px;
}
Copy the code
(3)CSS code block
font-size: 12px; /* Font-size: 16px; font-weight: bold; /*bold =strong; Background-color: RGB (255,255,255); background-color: RGB (255,255); /* italic = em*/ font-family: arial; R g b 00-ff 00-ff 00-ff 1 2. Every two of the color codes are the same, change the three digits of 3. Color function RGB (0-255(decimal),0-255,0-255); Border: add a box to the container border: 1px solid black border-width:20px; border-style: solid; /* > < /* > < /* > Transparent color: transparentCopy the code
Baidu interview question: Draw bubbles (width and height zero)
div{
width:0px;
height: 0px;
border:100px solid black;
border-left-color: red;
border-right-color: #00f;
border-top-color: green;
}
Copy the code
(4) ADVANCED CSS
Text-align: left; The text is centered horizontally and vertically within the container: Text-indent :2em; text-indent:2em; text-indent:2em; Font-family: arial, arial, sans-serif; font-size: 10.0pt; font-family: arial, sans-serif; </del> <span> </span> <span> <span> </span> <span> <span> /* inline * /} del{text-decoration: none; <span>www.baidu.com</span> span{text-indent: underline; // text-decoration: overline; Color: RGB (0,0,238); } cursor: pointer; /* What style is displayed when the mouse is over */Copy the code
Pseudo-class selector:
<a href="www.baidu.com">www.baidu.com</a>
Copy the code
a:hover{ background-color: red; As [href]} / * : hover {} * /Copy the code
demo
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < p style> a{text-indent: 21.0000pt; text-indent: 21.0000pt; text-indent: 21.0000pt; } a:hover{ text-decoration: underline; background-color: #f40; color:#fff; font-size: 16px; font-weight: bold; font-family: arial; border-radius: 10px; } </style> </head> <body> <a href="www.baidu.com">www.baidu.com</a> <a href="www.taobao.com">www.taobao.com</a> <a href="www.jd.com">www.jd.com</a> </body> </html>Copy the code
(5) Summarize the label
1. Row-level elements, inline elements inline
Feature: Content determines the position of elements. CSS cannot be used to change the width and height
span strong em a del
2. Block level element block
Feature: The width and height of an exclusive row can be changed using CSS
div p ul li ol form address
3. Line-level block element inline-block
Feature: Width and height can be changed depending on the size of the content
<img SRC =""> : Generally only set one width or height and the other equal scale zoomCopy the code
Nothing is absolute:
CSS controls properties and features
span{ display: inline; } div{ display: block; } img{ display: inline-block; } So can change the span{display: block; }Copy the code
Enterprise development projects
N images are grouped together :(actual) – any images with inline will be split with text attributes
Solution 1
< img SRC = "" > < img SRC =" "> < img SRC =" "> < img SRC =" "> a < img SRC =" "> < img SRC =" "> < img SRC =" "> < img SRC =" "> spacing is 4 pxCopy the code
Solution 2
img{
border: 0;
width:100px;
height: 200px;
margin-left: -6px;
}
Copy the code
But: so, actually compress the code: img——- one letter; So margin-left: -6px; It’s embedded. Don’t worry about him
(VI) Company usage (development experience) :
1. Define the function and configure the function
<div class="green size2"></div> <div class="gray size3"></div>Copy the code
.red{
background-color: red;
}
.green{
background-color: green;
}
.gray{
background-color: gray;
}
.size1{
width: 100px;
height: 100px;
}
.size2{
width: 200px;
height: 200px;
}
.size3{
width: 300px;
height: 300px;
}
Copy the code
- Tag birth Defect – Custom tag: tag selector
Initialization tag
a{ text-decoration: none; color:#424242; } ul{ list-style: none; padding: 0; margin:0; } *{/* Initializes all tags */ padding: 0; margin:0; /* < span style = "box-sizing: border-box; color: RGB (50, 50, 50); list-style: none; }Copy the code
Understand the innate values of various labels
(7) Box Model (Everything is a box)
margin + border + padding + (content = width + height)
Copy the code
demo
div{
width: 100px;
height: 100px;
background-color: red;
border: 10px solid black;
padding: 100px;
margin:100px;
}
Copy the code
About the padding: 100 px;
Equivalent to the padding:100px 100px 100px 100px;
Four values clockwise up right down left
Three values: up, left and right, down: left and right are equidistant
Two values: up, down, left and right
Border-width :100px:==100px 100px 100px 100px 100px
Box model calculation:
Visual width :(margin does not count, cannot be seen)
div{
width: 100px;
height: 100px;
background-color: red;
border: 10px solid black;
padding:10px 20px 30px;
margin: 10px 20px;
}
/* 160 160 */
Copy the code
To find the width and height of the viewing area:
body{
margin: 0;
}
#my-defined{
width: 100px;
height: 100px;
padding: 0 100px;
margin: 10px 20px 30px 40px;
border:1px solid orange;
background-color: orange;
padding: 0;
}
Copy the code
Application: Far view: One fast in the middle of one fast
<! DOCTYPE html> <head> <title></title> <link rel="stylesheet" type="text/css" href="mmm.css"> </head> <body> <div class="wrapper"> <div class="box"> <div class="content"> <div class="content1"></div> </div> </div> </div> </html>Copy the code
.content1{
height: 10px;
width: 10px;
background-color: #0f0;
}
.content{
height: 10px;
width: 10px;
padding: 10px;
background-color: #000;
}
.box{
width: 30px;
height: 30px;
background-color: #0f0;
padding: 10px;
}
.wrapper{
width: 50px;
height: 50px;
background-color: #000;
padding: 10px;
}
Copy the code
(8) Position: display position at a certain point
- Absolute – Can be located
div{ position: absolute; /*left: 200px; */ top: 100px; width: 100px; height: 100px; background-color: red; / * right * on the right side of the line distance/bottom / * * /}Copy the code
The body of the margin 8 px; natural
Layer model:
Absolute: one is absolute and the other can be below it, not at the same level (overpass)
<div class="demo"></div>
<div class="box"></div>
Copy the code
*{
margin: 0;
padding: 0;
}
.demo{
position: absolute;
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
.box{
width: 150px;
height: 150px;
background-color: green;
}
Copy the code
Retain his original position position, is also different levels, occupied position does not give another (soul out, corpse take position).
conclusion
Absolute position relative to the nearest positioned parent, and relative to the document position relative to the original position
Location – Reference + have location
Rule of thumb: relative as a reference, absolute position — reduce damage to subsequent elements
DMEO
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> *{margin: 0; padding: 0; } .wrapper{ margin-left: 100px; width: 200px; height: 200px; background-color: orange; } .content{ margin-left: 100px; width: 100px; height: 100px; background-color: black; } .box{ position: absolute; width: 50px; height: 50px; background-color: yellow; } </style> </head> <body> <div class="wrapper"> <div class="content"> <div class="box"> </div> <div> </div> </body> </html>Copy the code
Advertising positioning: fixed position
*{
margin: 0;
padding: 0;
}
div{
position: fixed;
left: 0;
top:300px;
width: 50px;
height: 200px;
background-color: red;
color: #fff;
}
Copy the code
Page center AD + not moving
div{ position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; background-color: red; } But locates the left vertexCopy the code
Document center:
div{ position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; background-color: red; margin-left: -50px; margin-top: -50px; /*margin-left: -10px; Embedded in the viewable window: Position for Fixed is available for <br> validationCopy the code
Fifth ring – the screen is always centered in the center
z-index:0; Default 1: Closer to me – hierarchy
border-radius:50%; Rounded corners
DEMO
<! DOCTYPE html> <head> <title></title> <link rel="stylesheet" type="text/css" href="mmm.css"> </head> <body> <div class="plat"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> <div class="circle5"></div> </div> </html>Copy the code
*{ margin:0; padding: 0; } .circle1, .circle2, .circle3, .circle4, .circle5{ position: absolute; width: 100px; height: 100px; border: 10px solid black; border-radius:50%; } .circle1{ border-color: red; left :0; top: 0; } .circle2{ border-color: green; left:130px; top:0; z-index: 3; } .circle3{ border-color: yellow; left: 260px; top:0; } .circle4{ border-color: blue; left:65px; top: 70px; } .circle5{ border-color: purple; left: 195px; top:70px; } /* Border: 5px solid black; /*border: 5px solid black; */ height: 186px; width: 380px; position: absolute; left: 50%; top:50%; margin-left: -190px; Word-wrap: break-word! Important; "> < span style =" max-width: 100%; /* half */}Copy the code
(9) two-column layout
DEMO
<div class="right"></div>
<div class="left"></div>
Copy the code
*{ margin:0; padding: 0; } .right{ position: absolute; /* right: 0; /* width: 100px; height: 100px; background-color: #fcc; Opacity: 0.5; } .left{ margin-right: 100px; /* height: 100px; background-color: #123; }Copy the code
Class ="left"></div> <div class="right"></div>Copy the code
(10) Two classic bugs
Make up can’t solve
Margin collapse:
The vertical margin parent and child elements are combined, and they take the maximum
demo
<div class="wrapper">
<div class="content"></div>
</div>
Copy the code
*{ margin:0; padding: 0; } .wrapper{ margin-left: 100px; margin-top: 100px; width: 100px; height: 100px; background-color: black; border-top:1px solid red; } .content{ margin-left: 50px; margin-top: 50px; /* Does not go down relative to the parent. */ width: 50px; height: 50px; background-color: green; }Copy the code
A solution that doesn’t work
.wrapper{ margin-left: 100px; margin-top: 100px; width: 100px; height: 100px; background-color: black; border-top:1px solid red; /* Because of the lack of a shed, have this method */}Copy the code
Professional skill
BFC — Block Format Content (block-level formatting context) : Changes the syntax of the box
overflow : hidden; Overflow part hidden – raises a new problem: hidden
demo
*{
margin:0;
padding: 0;
}
.wrapper{
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: black;
overflow: hidden;
}
.content{
margin-left: 75px;
width: 50px;
height: 50px;
background-color: green;
}
Copy the code
Solution: Change the rendering rules of the parent to make the parent BFC
*{
margin:0;
padding: 0;
}
.wrapper{
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: black;
overflow: hidden;
}
.content{
margin-left: 50px;
margin-top: 50px;
width: 50px;
height: 50px;
background-color: green;
}
Copy the code
Select for demand
- Parent plus display: inline-block;
- Parent plus position: absolute;
- Parent plus float: left; Or right
- Parent plus Overflow: hidden
Margin merging
Between the two demo brothers, the vertical margin is merged, one 100, one 200, adding up to only 200
demo
<span class="box1">123</span>
<span class="box2">234</span>
<div class="demo1">1</div>
<div class="demo2">2</div>
Copy the code
*{
margin:0;
padding: 0;
}
.box1{
background-color: red;
margin-right: 100px;
}
.box2{
background-color: green;
margin-left: 100px;
}
.demo1{
background-color: red;
margin-bottom: 200px;
}
.demo2{
background-color: green;
margin-top: 200px;
}
Copy the code
Solution: landing
<span class="box1">123</span>
<span class="box2">234</span>
<div class="demo1">1</div>
<div class="wrapper">
<div class="demo2">2</div>
</div>
Copy the code
*{
margin:0;
padding: 0;
}
.box1{
background-color: red;
margin-right: 100px;
}
.box2{
background-color: green;
margin-left: 100px;
}
.demo1{
background-color: red;
margin-bottom: 200px;
}
.demo2{
background-color: green;
margin-top: 200px;
}
.wrapper{
overflow: hidden;
}
Copy the code
conclusion
Margin collapse: change CSS margin merge: change HTML CSS, however, can not because of the bug HTML structure, the impact is very large do not solve margin merge: mathematical calculation solve, write more pixels
(11) Floating model
Box model Layer model floating model
(float) : Left /right elements take sides
DEMO
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
Copy the code
*{ margin:0; padding: 0; } .wrapper{ width: 300px; height: 300px; border:1px solid black; } .content{ float: left; Color: # FFF; color: # FFF; background-color: black; width: 100px; height: 100px; }Copy the code
If I have more, 1-9, left, becomes 9 in the box; Right, 321, 654, 987
Website Taobao APP display project — Nine squares
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
</div>
Copy the code
*{ margin:0; padding: 0; } .wrapper{ width: 350px; height: 300px; border:1px solid black; } .content{ float: left; Margin-left: 10px; margin-left: 10px; margin-left: 10px; margin-bottom: 10px; color: #fff; background-color: black; width: 100px; height: 100px; }Copy the code
Floating elements create a floating flow (not simply layered). All elements that create a floating flow are invisible to only block-level elements (layered). Elements that create BFC elements and text class attributes (inline attributes) and text are visible to floating elements (unlayered).
Clear floating flow clear:
Phenomenon:
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
Copy the code
*{ margin:0; padding: 0; } .wrapper{ border: 1px solid black; } .content{ float:left; */ color:# FFF; background-color: black; width: 100px; height: 100px; }Copy the code
Plus a p element, the resulting floating flow affects p,
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> *{margin:0; padding: 0; } .wrapper{ border: 1px solid black; } .content{ color:#fff; float:left; background-color: black; width: 100px; height: 100px; } </style> </head> <body> <div class="wrapper"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <p></p> </div> </body> </html>Copy the code
But you can’t use it because you can’t just add HTML, you can’t just add structure
Optimal implementation
Pseudo-element: Element structure exists, not written in HTML, can be manipulated by CSS, there is no HTML structure, implementation of the parent element to cover the subset element
Span ::before{} span::after{} span::before{} span::before{content: "ChengGe"; } false elements are line-level elements, so cannot be widened, display: inline-block; Span ::before{content: ""; display: inline-block; width: 100px; height: 100px; background-color: red; } still not workingCopy the code
Method 1: Because it is block level elements that can clear float, so
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
Copy the code
*{ margin:0; padding: 0; } .wrapper::after{ content: ""; clear: both; } .wrapper{ border: 1px solid black; } .content{ color:#fff; float: left; background-color: black; width: 100px; height: 100px; } can't use So to.wrapper::after{content: ""; clear: both; display: block; } Above is clear float methodCopy the code
Method 2: for all elements that create floating flows, only block-level elements can’t see them, and conversely, BFC elements can see them.
.wrapper{ border: 2px solid red; /*display:inline-block*/ /*position: absolute; */ float: left; /* BFC is triggered */}Copy the code
If content is set to float: left — > The parent cannot wrap it because the parent is block-level, block-level elements cannot see floating elements
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<p></p>
</div>
Copy the code
*{
margin:0;
padding: 0;
}
.wrapper{
border: 1px solid black;
}
.content{
color:#fff;
background-color: black;
width: 100px;
height: 100px;
}
p{
border-top:10px solid green;
clear : both;
}
Copy the code
Border-top :0px solid green; It’s wrapped. No matter how many, it’s spread out at the last element
But where position is set: absolute; And float: left/right; Internally convert the element to inline-block — resulting in width and height determined by the content
Demonstrate the demo
<span>123</span>
Copy the code
*{ margin:0; padding: 0; } span{ position: absolute; Convert the interior to inline-block width: 100px; height: 100px; background-color: red; }Copy the code
The float before the newspaper layout is used for: text surround images
img{ float: left; / /*margin-right:10px*/ width: 20px; }Copy the code
Write a standard navigation bar
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> *{margin:0; padding: 0; color: #424242; font-family: arial; } .nav{ list-style: none; } a{ text-decoration: none; }.nav. list-item/* space */{float: left; margin:0 10px; height: 30px; line-height: 30px; /* border: 1px solid black; */ } .nav .list-item a{ padding: 0 5px; color: #f40; font-weight: bold; /* height: 30px; /* height: 30px; display: inline-block; /* border-radius: 15px; } .nav .list-item a:hover{ background-color: #f40; color: #fff; } /* Clear the floating stream here so it doesn't have any impact on the rest of the stream -- everything written after it will be placed behind it */. Nav ::after{content: ""; display: block; clear: both; } < / style > < / head > < body > < ul class = "nav" > < li class = "list - item" > < a href = "#" > Tmall < / a > < / li > < li class = "list - item" > < a Href = "#" > bargain < / a > < / li > < li class = "list - item" > < a href = "#" > Tmall supermarket < / a > < / li > < / ul > < / body > < / HTML >Copy the code
(12) Text overflow processing
Overflow the container and make a display
1. Single-line text
< P >Web front-end development of HTML+CSS zero basic teaching, suitable for students who want to start front-end development. </p>Copy the code
*{
margin:0;
padding: 0;
color: #424242;
font-family: arial;
}
p{
width: 300px;
height: 20px;
line-height: 20px;
border:1px solid black;
}
Copy the code
Realize a line of dozen: three sets
(1) Lost the newline function: white-space: nowrap; (2) The overflow part cannot be displayed: overflow: hidden; (3) 填 空 : text-overflow: ellipsis;Copy the code
2. Multi-line text
Handwritten multi-line truncation: overflow is hidden
< P >Web front-end development of HTML+CSS zero basic teaching, suitable for students who want to start front-end development. Web front-end development of HTML+CSS zero basic teaching, suitable for the students who want to start front-end development </ P >Copy the code
*{
margin:0;
padding: 0;
color: #424242;
font-family: arial;
}
p{
width: 300px;
height: 40px;
line-height: 20px;
border:1px solid black;
overflow: hidden;
}
Copy the code
How to ensure that two lines, the rest of the text hidden: height and line-height multiple
div{ width: 200px; height: 200px; border:1px solid black; Background-image: url(address); background-size: 200px 200px; } background-size: 100px 100px; 4. background-repeat: no-repeat; background-repeat: repeat-x; // background-position: x y; Pick your spot. Background-position: left top/center;Copy the code
Taobao case to achieve network speed is not good, show the text
<a href="www.taobao.com" target="_blank_"></a>
Copy the code
*{ margin:0; padding: 0; } a{ display: inline-block; text-decoration: none; color: #424242; width: 190px; height: 90px; border:1px solid black; Background-image: url(address); background-size: 190px 90px; }Copy the code
Large site, network speed is not good, only display HTML – how to achieve only HTML images instead of text: remove CSS, the same display; CSS does not affect images
Method one:
<a href="www.taobao.com" target="_blank_">Copy the code
a{ display: inline-block; text-decoration: none; color: #424242; width: 190px; height: 90px; border:1px solid black; Background-image: url(address); background-size: 190px 90px; text-indent: 190px; /* First indent container width */ white-space: nowrap; /* overflow: hidden; }Copy the code
Method 2
The box has three parts, plus the background color, the padding changes color, and the background image can also be loaded on the padding, but the content can’t be written on the padding. So CSS has no text
Taobao implement
<a href="www.taobao.com" target="_blank_">Copy the code
*{ margin:0; padding: 0; } a{ display: inline-block; text-decoration: none; color: #424242; width: 190px; height: 0px; padding-top: 90px; border:1px solid black; Background-image: url(address); background-size: 190px 90px; }Copy the code
(13) Tips for Taobao project
Row-level elements can only nest row-level elements Block-level elements can nest any element (p special) (p tags cannot nest block-level elements)
Don’t allow 1
<p>
<div></div>
</p>
Copy the code
Do not allow 2
<a href="">
<a href=""></a>
</a>
Copy the code
Duing: Technical, information articles in-depth IT consulting
1. White space on both sides of Taobao: the screen is reduced, the white space is reduced, and the content remains unchanged
<div class="wrapper">
<div class="content"></div>
</div>
Copy the code
<! Margin :0; max-width: 100%; padding: 0; } .wrapper{ height: 30px; background-color: #123; } .content{ margin:0 auto; /*auto: adaptive */ width: 1200px; height: 30px; background-color: #0f0; }Copy the code
Text class attribute
Inline block Inline-block Inline inline-block -- Text element: Any element that is inline has the text characterCopy the code
Eg: <span>123</span><span>234</span> and <span>123</span><span>234</span> differ by one text separator imageCopy the code
position : absolute; float : left/right; Once one is set, the element internally converts to display: inline-block;
<span> </span> </div>Copy the code
*{
margin:0;
padding: 0;
}
span{
font-size: 50px;
}
Copy the code
Inside a line of text, align the bottom of the text, same with the text image but:
<span>123</span>345 <! -- If span has text in it, align it with the bottom of the text; if span has no text, align it with the content -->Copy the code
*{
margin:0;
padding: 0;
}
span{
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
Copy the code
Adjust alignment line
vertical-align: 10px;
Copy the code
(14) Actual combat projects of the company
Professor Key post bar project
<div> </div>Copy the code
*{ margin:0; padding: 0; } div{ padding: 10 10px; width: 200px; line-height: 12px; height: 12px; font-size: 12px; Background: linear - gradient (to) color: rgba (255255255,0.8); div::before{ content:""; display: inline-block; width: 12px; height: 11px; background-image: url(); background-size: 100% 100%; margin-right: 5px; /*vertical-align: -1px; } div::after{content: ""; display: inline-block; background-size: 100% 100%; Width: 6.5 px; Height: 11.5 px; float: right; /*margin-top: 3px; */ background-image: url(); }Copy the code
Interview questions:
Alibaba pen test
<div class="wrapper">
<img src="" class="img">
<p class="content1">wenzi</p>
<p class="content2">wenzi</p>
</div>
Copy the code
*{ margin:0; padding: 0; } .wrapper{ width: 320px; /* border: 2px solid black; */ } .wrapper .img{ width: 100px; height: 100px; float: left; } .wrapper:hover{ width: 400px; } .content1{ font-size: 20px; line-height: 20px; height: 40px; overflow: hidden; color: #333; margin-bottom: 8px; } .content2{ font-size: 12px; color: #666; The line - height: 1.2 em. }Copy the code