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
  1. 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

  1. 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

  1. Parent plus display: inline-block;
  2. Parent plus position: absolute;
  3. Parent plus float: left; Or right
  4. 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