Scribd
Upload
16 views127 pages

2 CSS面试真题-127页

Uploaded by

puerem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views127 pages

2 CSS面试真题-127页

Uploaded by

puerem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 127





content padding border margin

1
content

boreder

padding backgrou
nd

margin

2
1 <style>
2 .box {
3 width: 200px;
4 height: 100px;
5 padding: 20px;
6 }
7 </style>
8 <div class="box">
9
10 </div>

3
240px

CSS

W3C



width/height padding border

width padding

4


width/height padding border



1 box-sizing: content-box|border-box|inherit:

5
1 <style>
2 .box {
3 width: 200px;
4 height: 100px;
5 padding: 20px;
6 box-sizing: border-box;
7 }
8 </style>
9 <div class="box">
10
11 </div>





6
BFC

BFC

BFC


BFC


BFC BFC



7
1 <style>
2 p {
3 color: #f55;
4 background: #fcc;
5 width: 200px;
6 line-height: 100px;
7 text-align:center;
8 margin: 100px;
9 }
10 </style>
11 <body>
12 <p>Haha</p >
13 <p>Hehe</p >
14 </body>

p 100px margin
margin

BFC margin

8
p BFC p BFC
margin

1 <style>
2 .wrap {
3 overflow: hidden;// BFC
4 }
5 p {
6 color: #f55;
7 background: #fcc;
8 width: 200px;
9 line-height: 100px;
10 text-align:center;
11 margin: 100px;
12 }
13 </style>
14 <body>
15 <p>Haha</p >
16 <div class="wrap">
17 <p>Hehe</p >
18 </div>
19 </body>

9


10
1 <style>
2 .par {
3 border: 5px solid #fcc;
4 width: 300px;
5 }
6
7 .child {
8 border: 5px solid #f66;
9 width:100px;
10 height: 100px;
11 float: left;
12 }
13 </style>
14 <body>
15 <div class="par">
16 <div class="child"></div>
17 <div class="child"></div>
18 </div>
19 </body>

BFC .par BFC

1 .par {
2 overflow: hidden;
3 }

11


1 <style>
2 body {
3 width: 300px;
4 position: relative;
5 }
6
7 .aside {
8 width: 100px;
9 height: 150px;
10 float: left;
11 background: #f66;
12 }
13
14 .main {
15 height: 200px;
16 background: #fcc;
17 }
18 </style>
19 <body>
20 <div class="aside"></div>
21 <div class="main"></div>
22 </body>

12
.aslide main

BFC

main BFC

1 .main {
2 overflow: hidden;
3 }

BFC .aside .aside

13




14


meta viewport

1 <meta name="viewport" content="width=device-width, initial-scale=1, maximum


-scale=1, user-scalable=no”>

15


CSS3 if

@Media

1 @media screen and (max-width: 1920px) { ... }

1 @media screen (min-width: 375px) and (max-width: 600px) {


2 body {
3 font-size: 18px;
4 }
5 }



height width

16


vw vh vw
1vw



rem html font-size 16


px 1rem = 16px

font-size

1 @media screen and (max-width: 414px) {


2 html {
3 font-size: 18px
4 }
5 }
6
7 @media screen and (max-width: 375px) {
8 html {
9 font-size: 16px
10 }
11 }
12
13 @media screen and (max-width: 320px) {
14 html {
15 font-size: 12px
16 }
17 }

css script

17
1 //
2 function init () {
3 //
4 var width = document.documentElement.clientWidth
5 // 10
6 document.documentElement.style.fontSize = width / 10 + 'px'
7 }
8
9 //
10 init()
11 //
12 window.addEventListener('orientationchange', init)
13 //
14 window.addEventListener('resize', init)

rem width

UI element ui antd





18






19


1 <style>
2 .father{
3 width:500px;
4 height:300px;
5 border:1px solid #0a3b98;
6 position: relative;
7 }
8 .son{
9 width:100px;
10 height:40px;
11 background: #f0a238;
12 position: absolute;
13 top:0;
14 left:0;
15 right:0;
16 bottom:0;
17 margin:auto;
18 }
19 </style>
20 <div class="father">
21 <div class="son"></div>
22 </div>

margin auto



20
1 <style>
2 .father {
3 position: relative;
4 width: 200px;
5 height: 200px;
6 background: skyblue;
7 }
8 .son {
9 position: absolute;
10 top: 50%;
11 left: 50%;
12 margin-left:-50px;
13 margin-top:-50px;
14 width: 100px;
15 height: 100px;
16 background: red;
17 }
18 </style>
19 <div class="father">
20 <div class="son"></div>
21 </div>

21
transform



22
1 <style>
2 .father {
3 position: relative;
4 width: 200px;
5 height: 200px;
6 background: skyblue;
7 }
8 .son {
9 position: absolute;
10 top: 50%;
11 left: 50%;
12 transform: translate(-50%,-50%);
13 width: 100px;
14 height: 100px;
15 background: red;
16 }
17 </style>
18 <div class="father">
19 <div class="son"></div>
20 </div>

translate(-50%, -50%)

margin



display:table-cell display: inline-block vertica


l text-align

23
1 <style>
2 .father {
3 display: table-cell;
4 width: 200px;
5 height: 200px;
6 background: skyblue;
7 vertical-align: middle;
8 text-align: center;
9 }
10 .son {
11 display: inline-block;
12 width: 100px;
13 height: 100px;
14 background: red;
15 }
16 </style>
17 <div class="father">
18 <div class="son"></div>
19 </div>



24
1 <style>
2 .father {
3 display: flex;
4 justify-content: center;
5 align-items: center;
6 width: 200px;
7 height: 200px;
8 background: skyblue;
9 }
10 .son {
11 width: 100px;
12 height: 100px;
13 background: red;
14 }
15 </style>
16 <div class="father">
17 <div class="son"></div>
18 </div>

css3 flex

flex



25
1 <style>
2 .father {
3 display: grid;
4 align-items:center;
5 justify-content: center;
6 width: 200px;
7 height: 200px;
8 background: skyblue;
9
10 }
11 .son {
12 width: 10px;
13 height: 10px;
14 border: 1px solid red
15 }
16 </style>
17 <div class="father">
18 <div class="son"></div>
19 </div>

gird flex







26




27




Ant Design



github

28


29
1 <style>
2 .box{
3 overflow: hidden; BFC
4 }
5 .left {
6 float: left;
7 width: 200px;
8 background-color: gray;
9 height: 400px;
10 }
11 .right {
12 margin-left: 210px;
13 background-color: lightgray;
14 height: 200px;
15 }
16 </style>
17 <div class="box">
18 <div class="left"> </div>
19 <div class="right"> </div>
20 </div>



1 <style>
2 .box{
3 display: flex;
4 }
5 .left {
6 width: 100px;
7 }
8 .right {
9 flex: 1;
10 }
11 </style>
12 <div class="box">
13 <div class="left"> </div>
14 <div class="right"> </div>
15 </div>

30
flex

flex align-items: stretch;

align-items: flex-start





html

31
1 <style>
2 .wrap {
3 background: #eee;
4 overflow: hidden; <!-- BFC -->
5 padding: 20px;
6 height: 200px;
7 }
8 .left {
9 width: 200px;
10 height: 200px;
11 float: left;
12 background: coral;
13 }
14 .right {
15 width: 120px;
16 height: 200px;
17 float: right;
18 background: lightblue;
19 }
20 .middle {
21 margin-left: 220px;
22 height: 200px;
23 background: lightpink;
24 margin-right: 140px;
25 }
26 </style>
27 <div class="wrap">
28 <div class="left"> </div>
29 <div class="right"> </div>
30 <div class="middle"> </div>
31 </div>

32


33
1 <style>
2 .container {
3 position: relative;
4 }
5
6 .left,
7 .right,
8 .main {
9 height: 200px;
10 line-height: 200px;
11 text-align: center;
12 }
13
14 .left {
15 position: absolute;
16 top: 0;
17 left: 0;
18 width: 100px;
19 background: green;
20 }
21
22 .right {
23 position: absolute;
24 top: 0;
25 right: 0;
26 width: 100px;
27 background: green;
28 }
29
30 .main {
31 margin: 0 110px;
32 background: black;
33 color: white;
34 }
35 </style>
36
37 <div class="container">
38 <div class="left"> </div>
39 <div class="right"> </div>
40 <div class="main"> </div>
41 </div>

34


1 <style>
2 .left,
3 .right,
4 .main {
5 height: 200px;
6 line-height: 200px;
7 text-align: center;
8 }
9
10 .main-wrapper {
11 float: left;
12 width: 100%;
13 }
14
15 .main {
16 margin: 0 110px;
17 background: black;
18 color: white;
19 }
20
21 .left,
22 .right {
23 float: left;
24 width: 100px;
25 margin-left: -100%;
26 background: green;
27 }
28
29 .right {
30 margin-left: -100px; /* */
31 }
32 </style>
33
34 <div class="main-wrapper">
35 <div class="main"> </div>
36 </div>
37 <div class="left"> </div>
38 <div class="right"> </div>

35


<table> display: table

36
1 <style>
2 .container {
3 height: 200px;
4 line-height: 200px;
5 text-align: center;
6 display: table;
7 table-layout: fixed;
8 width: 100%;
9 }
10
11 .left,
12 .right,
13 .main {
14 display: table-cell;
15 }
16
17 .left,
18 .right {
19 width: 100px;
20 background: green;
21 }
22
23 .main {
24 background: black;
25 color: white;
26 width: 100%;
27 }
28 </style>
29
30 <div class="container">
31 <div class="left"> </div>
32 <div class="main"> </div>
33 <div class="right"> </div>
34 </div>



37
flex

1
2 <style type="text/css">
3 .wrap {
4 display: flex;
5 justify-content: space-between;
6 }
7
8 .left,
9 .right,
10 .middle {
11 height: 100px;
12 }
13
14 .left {
15 width: 200px;
16 background: coral;
17 }
18
19 .right {
20 width: 120px;
21 background: lightblue;
22 }
23
24 .middle {
25 background: #555;
26 width: 100%;
27 margin: 0 20px;
28 }
29 </style>
30 <div class="wrap">
31 <div class="left"> </div>
32 <div class="middle"> </div>
33 <div class="right"> </div>
34 </div>

display:flex;

100% flex:1

38


1 <style>
2 .wrap {
3 display: grid;
4 width: 100%;
5 grid-template-columns: 300px auto 300px;
6 }
7
8 .left,
9 .right,
10 .middle {
11 height: 100px;
12 }
13
14 .left {
15 background: coral;
16 }
17
18 .right {
19 background: lightblue;
20 }
21
22 .middle {
23 background: #555;
24 }
25 </style>
26 <div class="wrap">
27 <div class="left"> </div>
28 <div class="middle"> </div>
29 <div class="right"> </div>
30 </div>

flex

39




Html

1 <div id="box">
2 <div class="one">
3 <p class="one_1">
4 </p >
5 <p class="one_1">
6 </p >
7 </div>
8 <div class="two"></div>
9 <div class="two"></div>
10 <div class="two"></div>
11 </div>

css

40
1 :link
2 :visited
3 :active
4 :hover
5 :focus
6 :first-child

1 :first-letter
2 :first-line
3 :before :
4 :after :

1 [attribute] attribute
2 [attribute=value] attribute=value
3 [attribute~=value] attribute value
4 [attribute|=value] attribute value

CSS3

41
1 :first-of-type
2 :last-of-type
3 :only-of-type
4 :only-child
5 :nth-child(n)
6 :nth-last-of-type(n)

7 :last-child
8 :root HTML
9 :empty
10 :enabled
11 :disabled
12 :checked
13 :not(selector) <selector>

1 [attribute*=value] attribute value


2 [attribute^=value] attribute value
3 [attribute$=value] attribute value


CSS

1 #nav-global > ul > li > a.nav-link

42
A B C D

A B C D (0, 1, 1, 3)

!important


css

1 font:
2 font-family:
3 font-weight:
4 font-size:
5 font-style:
6 font-variant:

43
1 text-indent
2 text-align
3 line-height
4 word-spacing
5 letter-spacing
6 text-transform
7 direction
8 color

1 visibility

1 caption-side
2 border-collapse
3 border-spacing
4 empty-cells
5 table-layout

1 list-style-type
2 list-style-position
3 list-style

1 quotes

44
1 cursor







45
css


css



display none

1 .hide {
2 display:none;
3 }

display:none



visibility hidden

46
1 .hidden{
2 visibility:hidden
3 }



opacity

1 .transparent {
2 opacity:0;
3 }



margin border padding height width


overflow:hidden

47
1 .hiddenBox {
2 margin:0;
3 border:0;
4 padding:0;
5 height:0;
6 width:0;
7 overflow:hidden;
8 }



1 .hide {
2 position: absolute;
3 top: -9999px;
4 left: -9999px;
5 }



1 .hide {
2 clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
3 }



display:none visibility:hidden

48

display: none visibility: hidden opacity: 0





49




css

overflow hidden

white-space:nowrap overflow:hidden text-overflow


ellipsis

text-overflow

text-overflow overflow:hidden white-space:nowrap

1 <style>
2 p{
3 overflow: hidden;
4 line-height: 40px;
5 width:400px;
6 height:40px;
7 border:1px solid red;
8 text-overflow: ellipsis;
9 white-space: nowrap;
10 }
11 </style>
12 <p
</p >

50






css

51
1 <style>
2 .demo {
3 position: relative;
4 line-height: 20px;
5 height: 40px;
6 overflow: hidden;
7 }
8 .demo::after {
9 content: "...";
10 position: absolute;
11 bottom: 0;
12 right: 0;
13 padding: 0 20px 0 10px;
14 }
15 </style>
16
17 <body>
18 <div class='demo'> </div>
19 </body>

overflow: hidden

word-break: break-all



css css

52
1 <style>
2 p {
3 width: 400px;
4 border-radius: 1px solid red;
5 -webkit-line-clamp: 2;
6 display: -webkit-box;
7 -webkit-box-orient: vertical;
8 overflow: hidden;
9 text-overflow: ellipsis;
10 }
11 </style>
12 <p>
13
14
15 </p >

webkit CSS PC webkit


webkit

word-wrap: break-word

javascript css

1 p {
2 position: relative;
3 width: 400px;
4 line-height: 20px;
5 overflow: hidden;
6
7 }
8 .p-after:after{
9 content: "...";
10 position: absolute;
11 bottom: 0;
12 right: 0;
13 padding-left: 40px;
14 background: -webkit-linear-gradient(left, transparent, #fff 55%);
15 background: -moz-linear-gradient(left, transparent, #fff 55%);
16 background: -o-linear-gradient(left, transparent, #fff 55%);
17 background: linear-gradient(to right, transparent, #fff 55%);
18 }

53
1 $(function(){
2 //

3 $('p').each(function(i, obj){
4 var lineHeight = parseInt($(this).css("line-height"));
5 var height = parseInt($(this).height());
6 if((height / lineHeight) >3 ){
7 $(this).addClass("p-after")
8 $(this).css("height","60px");
9 }else{
10 $(this).removeClass("p-after");
11 }
12 });
13 })



54
svg css



1 <style>
2 .border {
3 width: 50px;
4 height: 50px;
5 border: 2px solid;
6 border-color: #96ceb4 #ffeead #d9534f #ffad60;
7 }
8 </style>
9 <div class="border"></div>

border 50px

55
width height

56
1 .border {
2 width: 0;
3 height: 0;
4 border-style:solid;
5 border-width: 0 50px 50px;
6 border-color: transparent transparent #d9534f;
7 }

border

1 .border {
2 width: 0;
3 height: 0;
4 border-style:solid;
5 border-width: 0 50px 50px;
6 border-color: transparent transparent #d9534f;
7 position: relative;
8 }
9 .border:after{
10 content: '';
11 border-style:solid;
12 border-width: 0 40px 40px;
13 border-color: transparent transparent #96ceb4;
14 position: absolute;
15 top: 0;
16 left: 0;
17 }

57
1 .border:after {
2 content: '';
3 border-style: solid;
4 border-width: 0 40px 40px;
5 border-color: transparent transparent #96ceb4;
6 position: absolute;
7 top: 6px;
8 left: -40px;
9 }



58
1 .box {
2 /* */
3 width: 0px;
4 height: 0px;
5 /* */
6 border-top: #4285f4 solid;
7 border-right: transparent solid;
8 border-width: 85px;
9 /* */
10 margin: 50px;
11 }

59




60
61

css



background-attachment fixed

62
css

1 section {
2 height: 100vh;
3 }
4
5 .g-img {
6 background-image: url(...);
7 background-attachment: fixed;
8 background-size: cover;
9 background-position: center center;
10 }

63
1 <style>
2 div {
3 height: 100vh;
4 background: rgba(0, 0, 0, .7);
5 color: #fff;
6 line-height: 100vh;
7 text-align: center;
8 font-size: 20vh;
9 }
10
11 .a-img1 {
12 background-image: url(https://images.pexels.com/photos/109749
1/pexels-photo-1097491.jpeg);
13 background-attachment: fixed;
14 background-size: cover;
15 background-position: center center;
16 }
17
18 .a-img2 {
19 background-image: url(https://images.pexels.com/photos/243729
9/pexels-photo-2437299.jpeg);
20 background-attachment: fixed;
21 background-size: cover;
22 background-position: center center;
23 }
24
25 .a-img3 {
26 background-image: url(https://images.pexels.com/photos/100541
7/pexels-photo-1005417.jpeg);
27 background-attachment: fixed;
28 background-size: cover;
29 background-position: center center;
30 }
31 </style>
32 <div class="a-text">1</div>
33 <div class="a-img1">2</div>
34 <div class="a-text">3</div>
35 <div class="a-img2">4</div>
36 <div class="a-text">5</div>
37 <div class="a-img3">6</div>
38 <div class="a-text">7</div>



64
transform perspective

3D

65
1 <style>
2 html {
3 overflow: hidden;
4 height: 100%
5 }
6
7 body {
8 /* 3D */
9 perspective: 1px;
10 transform-style: preserve-3d;
11 height: 100%;
12 overflow-y: scroll;
13 overflow-x: hidden;
14 }
15 #app{
16 width: 100vw;
17 height:200vh;
18 background:skyblue;
19 padding-top:100px;
20 }
21 .one{
22 width:500px;
23 height:200px;
24 background:#409eff;
25 transform: translateZ(0px);
26 margin-bottom: 50px;
27 }
28 .two{
29 width:500px;
30 height:200px;
31 background:#67c23a;
32 transform: translateZ(-1px);
33 margin-bottom: 150px;
34 }
35 .three{
36 width:500px;
37 height:200px;
38 background:#e6a23c;
39 transform: translateZ(-2px);
40 margin-bottom: 150px;
41 }
42 </style>
43 <div id="app">
44 <div class="one">one</div>
45 <div class="two">two</div>

66
46 <div class="three">three</div>
47
</div>



67

css

css3 css CSS1/2 CSS3

CSS3


css3





css3

68




background-clip background-origin backgroun


d-size background-break





border
padding content border-origin

padding-box padding

69




background-break





word-wrap: normal|break-word



text-overflow



text-shadow

70


 

css3 rgba hsla


transition CSS

1 transition CSS ( ease) ( 0)

1 transition-property: width;
2 transition-duration: 1s;
3 transition-timing-function: linear;
4 transition-delay: 2s;



transform

71
transform-origin (x,y,z):(50%,50%,
0)




css3

72

css3 flex Grid





css



73


transition

timing-function

display:none<->display:block

74
1 <style>
2 .base {
3 width: 100px;
4 height: 100px;
5 display: inline-block;
6 background-color: #0EA9FF;
7 border-width: 5px;
8 border-style: solid;
9 border-color: #5daf34;
10 transition-property: width, height, background-color, border-w
idth;
11 transition-duration: 2s;
12 transition-timing-function: ease-in;
13 transition-delay: 500ms;
14 }
15
16 /* */
17 /*transition: all 2s ease-in 500ms;*/
18 .base:hover {
19 width: 200px;
20 height: 200px;
21 background-color: #5daf34;
22 border-width: 10px;
23 border-color: #3a8ee6;
24 }
25 </style>
26 <div class="base"></div>



transition

transform inline block

75
1 <style>
2 .base {
3 width: 100px;
4 height: 100px;
5 display: inline-block;
6 background-color: #0EA9FF;
7 border-width: 5px;
8 border-style: solid;
9 border-color: #5daf34;
10 transition-property: width, height, background-color, border-width
;
11 transition-duration: 2s;
12 transition-timing-function: ease-in;
13 transition-delay: 500ms;
14 }
15 .base2 {
16 transform: none;
17 transition-property: transform;
18 transition-delay: 5ms;
19 }
20
21 .base2:hover {
22 transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px
, 25px);
23 }
24 </style>
25 <div class="base base2"></div>



animation

76
CSS

@keyframes

1 @keyframes rotate{
2 from{
3 transform: rotate(0deg);
4 }
5 to{
6 transform: rotate(360deg);
7 }
8 }

from to

77
1 @keyframes rotate{
2 0%{
3 transform: rotate(0deg);
4 }
5 50%{
6 transform: rotate(180deg);
7 }
8 100%{
9 transform: rotate(360deg);
10 }
11 }

1 animation: rotate 2s;





78

Grid

flex

display:grid/inline-grid

79
1 <div class="container">
2 <div class="item item-1">
3 <p class="sub-item"></p >
4 </div>
5 <div class="item item-2"></div>
6 <div class="item item-3"></div>
7 </div>

.container .item
p

grid-column


Grid

80


display grid display inline-grid



grid-template-columns grid-template-rows

1 .wrapper {
2 display: grid;
3 /* 200px 200px 200px */
4 grid-template-columns: 200px 200px 200px;
5 grid-gap: 5px;
6 /* 50px 50px */
7 grid-template-rows: 50px 50px;
8 }

repeat()

1 .wrapper {
2 display: grid;
3 grid-template-columns: repeat(3,200px);
4 grid-gap: 5px;
5 grid-template-rows:repeat(2,50px);
6 }

repeact

81
grid-template-columns: repeat(auto-fill, 200px)

grid-template-columns: 200px 1fr 2fr

minmax(100px, 1fr) 100px 1fr

grid-template-columns: 100px auto 100px



grid-row-gap grid-column-gap grid-gap

grid-row-gap: 10px

grid-column-gap: 20px

grid-gap: 10px 20px



1 .container {
2 display: grid;
3 grid-template-columns: 100px 100px 100px;
4 grid-template-rows: 100px 100px 100px;
5 grid-template-areas: 'a b c'
6 'd e f'
7 'g h i';
8 }

a i

82
1 grid-template-areas: 'a a a'
2 'b b b'
3 'c c c';

a b c



grid-auto-flow

column

83


justify-items align-items

1 .container {
2 justify-items: start | end | center | stretch;
3 align-items: start | end | center | stretch;
4 }

84
place-items align-items justify-items



justify-content align-content

1 .container {
2 justify-content: start | end | center | stretch | space-around | space-be
tween | space-evenly;
3 align-content: start | end | center | stretch | space-around | space-betw
een | space-evenly;
4 }

85


grid-auto-rows grid-auto-columns

 

86
1 <style>
2 #container{
3 display: grid;
4 grid-template-columns: 100px 100px 100px;
5 grid-template-rows: 100px 100px 100px;
6 }
7 .item-1 {
8 grid-column-start: 2;
9 grid-column-end: 4;
10 }
11 </style>
12
13 <div id="container">
14 <div class="item item-1">1</div>
15 <div class="item item-2">2</div>
16 <div class="item item-3">3</div>
17 </div>

grid-column

87


grid-area

1 .item-1 {
2 grid-area: e;
3 }

grid-template-areas



justify-self justify-items

align-self align-items

1 .item {
2 justify-self: start | end | center | stretch;
3 align-self: start | end | center | stretch;
4 }


Grid
Grid

88
Grid




Flexible Box flex

flex container

flex item

89
flex-
direction


flex



90
1 .container {
2 flex-direction: row | row-reverse | column | column-reverse;
3 }



flex-wrap

1 .container {
2 flex-wrap: nowrap | wrap | wrap-reverse;
3 }



91
flex-direction flex-wrap row nowrap

1 .box {
2 flex-flow: <flex-direction> || <flex-wrap>;
3 }



1 .box {
2 justify-content: flex-start | flex-end | center | space-between | space
-around;
3 }

92


1 .box {
2 align-items: flex-start | flex-end | center | baseline | stretch;
3 }

93


1 .box {
2 align-content: flex-start | flex-end | center | space-between | space-a
round | stretch;
3 }

94
order

flex-grow
flex-shrink

flex-basis

flex

95
align-self



1 .item {
2 order: <integer>;
3 }



flex-wrap: nowrap;
flex-grow

1 .item {
2 flex-grow: <number>;
3 }

flex-grow

flex-grow

96
flex-grow

 

1 .item {
2 flex-shrink: <number>; /* default 1 */
3 }

flex-shrink

flex-shrink

flex-shrink



flex-grow flex-shrink

auto wid
th width/height

97
1 .item {
2 flex-basis: <length> | auto; /* default auto */
3 }

width height



flex flex-grow flex-shrink flex-basis 0 1 auto

1 .item {
2 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
3 }

flex:1 flex:auto flex-basis:0 flex-basis:auto

flex-grow flex-shrink

auto



align-items

auto align-items stretch

98
1 .item {
2 align-self: auto | flex-start | flex-end | center | baseline | stretch;
3 }


flex
flex

flex



99

css css

css

css css





CSS

100
css px



pt



javaScript window.screen.width/ window.screen.height

101
dpr



JavaScript window.devicePixelRatio

102
dpr 1px CSS 3px CSS 3
px



103





px % em

CSS3
rem vh vw vm


css

104


px px

px px



1em = 16px

font-size css body font-size 62.


5% 16px*62.5% = 10px

12px = 1.2em 10px = 1em px


em

105
1 <div class="big">
2 14px=1.4rem<div class="small"> 12px=1.2rem</div>
3 </div>

1 <style>
2 html {font-size: 10px; } /* 16px*62.5%=10px */
3 .big{font-size: 1.4rem}
4 .small{font-size: 1.2rem}
5 </style>

.big font-size .small font-size



font-size

font-size html font-size: 62.5%

1 html {font-size: 62.5%; } /* 16px*62.5%=10px */



vh

106
vw vh %



font-size
1em

root em html





107




zoom

zoom

108
1 <style type="text/css">
2 .span1{
3 font-size: 12px;
4 display: inline-block;
5 zoom: 0.8;
6 }
7 .span2{
8 display: inline-block;
9 font-size: 12px;
10 }
11 </style>
12 <body>
13 <span class="span1"> 10px</span>
14 <span class="span2"> 12px</span>
15 </body>

Zoom



chrome webkit transform:scale()

scale span

109
1 <style type="text/css">
2 .span1{
3 font-size: 12px;
4 display: inline-block;
5 -webkit-transform:scale(0.8);
6 }
7 .span2{
8 display: inline-block;
9 font-size: 12px;
10 }
11 </style>
12 <body>
13 <span class="span1"> 10px</span>
14 <span class="span2"> 12px</span>
15 </body>



1 html { -webkit-text-size-adjust: none; }

chrome 27

110

Zoom

-webkit-transform:scale()

-webkit-text-size-adjust




HTML

111
DOM DOM

DOM color background-color





112
getComputedStyle





offsetTop



113
class

position fixed absolute

table table table

position: fixed/absolute

transform opacity filters


JavaScript

JavaScript DocumentFragment

1 const el = document.getElementById('el')
2 for(let i=0;i<10;i++) {
3 el.style.top = el.offsetTop + 10 + "px";
4 el.style.left = el.offsetLeft + 10 + "px";
5 }

offset

1 // offsetLeft offsetTop
2 const el = document.getElementById('el')
3 let offLeft = el.offsetLeft, offTop = el.offsetTop
4
5 // JS
6 for(let i=0;i<10;i++) {
7 offLeft += 10
8 offTop += 10
9 }
10
11 // DOM
12 el.style.left = offLeft + "px"
13 el.style.top = offTop + "px"

114
1 const container = document.getElementById('container')
2 container.style.width = '100px'
3 container.style.height = '200px'
4 container.style.border = '10px solid red'
5 container.style.color = 'red'

1 <style>
2 .basic_style {
3 width: 100px;
4 height: 200px;
5 border: 10px solid red;
6 color: red;
7 }
8 </style>
9 <script>
10 const container = document.getElementById('container')
11 container.classList.add('basic_style')
12 </script>

display: none

1 const container = document.getElementById('container')


2 container.style.width = '100px'
3 container.style.height = '200px'
4 container.style.border = '10px solid red'
5 container.style.color = 'red'

115
1 let container = document.getElementById('container')
2 container.style.display = 'none'
3 container.style.width = '100px'
4 container.style.height = '200px'
5 container.style.border = '10px solid red'
6 container.style.color = 'red'
7 ...
8 container.style.display = 'block'

 

 
Css

Css Css

Css

 

Css Css

Css

116
Css

 
Css

 

Css Compass
Css LESS Css Scss

.sass scss

 

SASS Css
Ruby SASS

SASS Css SASS


Scss

 

Stylus Css Node.js Node


Css

Stylus Css
SASS/LESS

 

117
 

1 .box {
2 display: block;
3 }

1 .box
2 display: block

1 .box
2 display: block

 

118
1 .a {
2 &.b {
3 color: red;
4 }
5 }

 

less @ :

1 @red: #c00;
2
3 strong {
4 color: @red;
5 }

sass less @

1 $red: #c00;
2
3 strong {
4 color: $red;
5 }

stylus $ ;
=

stylus @

1 red = #c00
2
3 strong
4 color: red

119
 

Css js

sass

1 $color: black;
2 .scoped {
3 $bg: blue;
4 $color: white;
5 color: $color;
6 background-color:$bg;
7 }
8 .unscoped {
9 color:$color;
10 }

1 .scoped {
2 color:white;/* */
3 background-color:blue;
4 }
5 .unscoped {
6 color:white;/* */
7 }

sass

less stylus javascript

120
1 @color: black;
2 .scoped {
3 @bg: blue;
4 @color: white;
5 color: @color;
6 background-color:@bg;
7 }
8 .unscoped {
9 color:@color;
10 }

1 .scoped {
2 color:white;/* */
3 background-color:blue;
4 }
5 .unscoped {
6 color:black;/* */
7 }

 

Mixins

Mixins

less ClassA Class


@

121
1 .alert {
2 font-weight: 700;
3 }
4
5 .highlight(@color: red) {
6 font-size: 1.2em;
7 color: @color;
8 }
9
10 .heads-up {
11 .alert;
12 .highlight(red);
13 }

1 .alert {
2 font-weight: 700;
3 }
4 .heads-up {
5 font-weight: 700;
6 font-size: 1.2em;
7 color: red;
8 }

Sass mixins @mixinn mixin


$

122
1 @mixin large-text {
2 font: {
3 family: Arial;
4 size: 20px;
5 weight: bold;
6 }
7 color: #ff0000;
8 }
9
10 .page-title {
11 @include large-text;
12 padding: 4px;
13 margin-top: 10px;
14 }

stylus Css
Mixins

1 error(borderWidth= 2px) {
2 border: borderWidth solid #F00;
3 color: #F00;
4 }
5 .generic-error {
6 padding: 20px;
7 margin: 4px;
8 error(); /* error mixins */
9 }
10 .login-error {
11 left: 12px;
12 position: absolute;
13 top: 20px;
14 error(5px); /* error mixins $borderWidth 5px */
15 }

 

Css

scss less stylus

123
1 @import './common';
2 @import './github-markdown';
3 @import './mixin';
4 @import './variables';




css css

css

css



124


css
html

css html css css

CSS

css



CSS CSS

css

1 // link
2 const myCSS = document.createElement( "link" );
3 myCSS.rel = "stylesheet";
4 myCSS.href = "mystyles.css";
5 // header
6 document.head.insertBefore( myCSS, document.head.childNodes[ document.head.
childNodes.length - 1 ].nextSibling );

media screen all

1 <link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.med


ia='all'">

125
1 <link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='styl
esheet'">



webpack gulp/grunt rollup css



css #markdown .content h3



box-shadow border-radius filter :nth-c


hild



link @import

@import

@import

126
index.css @import url("reset.css")

index.css reset.cs
s




css http css

127

You might also like