CSS layout
-
Fixed width layout
-
No fixed width layout
-
Responsive layout
Float layout (see more on 05float layout.html)
The float property was originally introduced to allow Web developers to implement a simple layout that consists of an image floating in a column of text, with text wrapped around it to the left or right. You may have read about it in the newspaper pages.
Tips:
Leave some space or the last one without setting width. Or just set max-width.
Float layouts are not responsive
IE 6/7 has a double margin bug
Method 1: For IE 6/7 margin halved
Method 2: add display: inline-block
Vertical-align: bottom;
Float Two-column layout
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
div:nth-of-type(1) {
width: 48%;
float: left;
}
div:nth-of-type(2) {
width: 48%;
float: right;
}
</style>
</head>
<body>
<h1>2 column layout</h1>
<div>
<h2>First column</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit
amet.
</p>
</div>
<div>
<h2>Second column</h2>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor,
sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus.
</p>
</div>
Copy the codeFloat Three-column layout
Float four-column layout
Loat average layout
If the boxes inside the float are larger than the size of the parent box, you can add a box on top of them with a negative margin so that they are evenly distributed across a row.
You can also use the original method of using nth-chlid directly to clear the margins you want to remove. Make sure it’s margin or margin
.image:nth-child(1) {
margin-left: 0;
}
Copy the codeNegative margin cases are as follows:
<style>
.images {
outline: 1px solid red;
width: 800px;
margin-left: auto;
margin-right: auto;
}
.images .image {
height: 200px;
width: 191px;
background-color: bisque;
float: left;
margin-right: 12px;
}
.x {
margin-right: -12px;
}
/* Or simply use nth-chlid to clear the right margin of the last child */
</style>
<body>
<div class="images clearfix">
<div class="x">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</div>
</body>
Copy the codeKnow how to float
Method 1: end with an empty div tag clear:both
<style>
.box {
background: blue;
}
.left {
background: red;
float: left;
height: 100px;
width: 200px;
}
.right {
background: pink;
float: right;
height: 100px;
width: 200px;
}
.clear {
clear: both;
}
</style>
<body>
<div class="box">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clear"></div>
</body>
Copy the codeMethod 2 parent div defines pseudo class :after
.clear{zoom:1; }/* To solve the floating problem of IE6 and IE7 */
.clear:after{
display:block;
clear:both;
content:"";
}
Copy the codeMethod three parent div defines overflow:hidden/auto
Principle:
- You must define width or zoom:1 and cannot define height. When using overflow: Hidden/Auto, the browser automatically checks the height of the floating area.
Disadvantages:
- Overflow :hidden: Cannot be used with position, because overflow sizes are hidden.
- Overflow: Auto: Scroll bars appear when the inner width and height of the parent div exceed.
<style>
.box {
background: red;
overflow: hidden;
}
.left {
background: blue;
float: left;
height: 100px;
width: 40%;
}
.right {
background: pink;
float: right;
height: 100px;
width: 50%;
}
</style>
<body>
<div class="box">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
123
</body>
Copy the codeFlex layout
Flex layout tutorial: Syntax blog (delete infringement)
The container style
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
Spindle flex-direction Spindle once another axis is defined is the cross axis
Flex-direction Controls the flow direction of the item
-
Row goes from left to right
-
Row-reverse goes from right to left
-
Column goes up and down
-
Column-reverse goes from bottom to top
Context-content Specifies the alignment direction of the main axis
- Flex-start is sorted from the beginning of the line. The first elastic element in each line is aligned with the beginning of the line, while all subsequent elastic elements are aligned with the preceding one.
- Flex-end is arranged from the end of the line. The last elastic element of each line is aligned with the end of the line, and the other elements are aligned with the last one.
- The Center flex element is aligned toward the midpoint of each row. The distance from the first element of each line to the beginning of the line is the same as the distance from the last element of each line to the end.
- Space-around allocates the elastic elements evenly on each line. The distance between adjacent elements is the same. The distance between the first element of each line and the distance between the last element of each line and the end of each line will be half the distance between adjacent elements.
- Space-between evenly distributes elastic elements on each line. The distance between adjacent elements is the same. The first element of each line is aligned with the beginning of the line, and the last element of each line is aligned with the end of the line.
Align-content Align-direction when there are multiple lines
- The flex-start element is aligned to the start of the lateral axis.
- The flex-end element is aligned to the end of the lateral axis.
- The center element is centered on the side axis. If the element is higher on the side axis than its container, it spills the same distance in both directions.
The flex – wrap a newline
- Nowrap non-breaking
- Wrap, first line at the top
- Wrap-reverse newline, first line below
<style>
.container {
display: flex;
/* display: inline-flex; * /
border: 1px solid red;
The /* column represents */
flex-direction: row;
/* flex-direction controls the flow direction of the item row from left to right row-reverse from right to left column from up to down column-reverse from down */
/* flex-wrap whether to wrap wrap-revers */
flex-wrap: nowrap;
/* justify-content Specifies the axis alignment */
justify-content: flex-start;
/* align-items */
align-items: flex-start;
/* align-content with multiple lines */
align-content: flex-start;
}
.item {
width: 50px;
border: 1px solid blueviolet;
}
.item-a {
height: 30px;
}
.item-b {
height: 60px;
}
.item-c {
height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="item item-a"></div>
<div class="item item-b"></div>
<div class="item item-c"></div>
</div>
</body>
Copy the codeCenter the Item box vertically
display: flex;
justify-content: center;
align-items: center;
Copy the codeThe item style
Flex layout tutorial: Syntax blog (delete infringement)
6 properties set on item.
order
flex-grow
flex-shrink
flex-basis
flex
align-self
The following quote:
The order attribute defines the order of items. The smaller the value is, the higher the rank is. The default value is 0. It can be positive or negative.
The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space.
The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.
The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.
The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.
Tip: FinishFrog gameMore insight into flex layout
<style>
.container {
display: flex;
border: 1px solid red;
}
.item {
border: 1px solid blue;
width: 150px;
height: 50px;
margin: 0 5px;
}
/* order from smallest to largest */
/* To allocate extra space flex-grow: 0; You don't have to write */
/* Flex-shrink specifies that a box becomes smaller than 0, does not change the size of the box, and that all boxes become thinner than 1. */
/* align-self adds this attribute to the unique */
.item:first-child {
order: 100;
flex-shrink: 1;
}
.item:nth-child(2) {
order: 1;
flex-shrink: 5;
}
.item:last-child {
order: 2;
flex-shrink: 1;
align-self: flex-end;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
Copy the codeThe grid layout
For detailed explanation, see a blog of Ruan Yifeng quoted in the link (deleted from infringement)
display: grid
Grid-template-columns define the column width of each column
The grid-template-rows attribute defines the row height for each row
The grid layout provides the FR keyword (short for fraction, meaning “fragment”) to facilitate the representation of proportional relationships. If the columns are 1fr and 2FR wide, the latter is twice as large as the former. It can also be used with pixels
The grid-row-gap property sets the spacing between rows
The grid-column-gap property sets the interval between columns
The grid-gap attribute is a combination of grid-column-gap and grid-row-gap
The grid-template-areas attribute is used to define grid-area associations for areas on child elements.
Tips:
With grid layout, float, display: inline-block, display: table-cell, vertical-align, and column-* Settings for container child elements (items) are invalidated.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
display: grid;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-template-columns: 60px auto 60px;
grid-template-rows: 100px auto 100px;
grid-template-areas:
"header header header"
"aside main ad"
"footer footer footer";
}
.container> * {border: 1px solid red;
}
.container>header {
grid-area: header;
}
.container>aside {
grid-area: aside;
}
.container>main {
grid-area: main;
}
.container>.ad {
grid-area: ad;
}
.container>footer {
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<header>header</header>
<aside>aside</aside>
<main>main</main>
<div class="ad">sd</div>
<footer>footer</footer>
</div>
</body>
Copy the codeThe CSS positioning
Detailed knowledge: Ruan Yifeng CSS positioning detailed explanation blog (infringement deletion)
The position of the attribute
Tips:
Don’t write z – index: 9999;
Absolute Determines all but static relative to the nearest location element in the ancestor element.
Stop using fixed on mobile.
Static defaults to stay in the document stream
Relative Refers to a position that rises but does not depart from the document flow
Absolute: The reference is non-static in the ancestor
Fixed fixed positioning, positioning base is viewport
Sticky sticky positioning, suitable for navigation
Cascading context
Related links: Click here to create cascading properties. Z-index/flex/opacity/Transform creates a cascading context
Div stratified
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid red;
height: 200px;
position: relative;
}
.a {
position: relative;
z-index: 0;
border: 1px solid red;
}
.a2 {
position: relative;
z-index: 10;
height: 200px;
width: 200px;
background-color: aquamarine;
}
.b2 {
position: relative;
top: -20px;
z-index: 5;
height: 200px;
width: 200px;
background-color: pink;
}
</style>
</head>
<body>
<! Z-index :1/2/3/-1/-2/-3 Create a cascading context -->
<! If a and B do not set z-index, then the cascading context is not created. For a2 and B2, set the z-index to the level of the world in the container. If A and B set z-index, that creates the cascading context. A, A2, and B2 do not participate in the layer comparison of the Container small world -->
<! Container is a small world -->
<div class="container">
<! -- A is a small world
<div class="a">
<div class="a2">The level relative to a is 10</div>
</div>
<! -- B is a small world
<div class="b">
<div class="b2">The level relative to a is 5</div>
</div>
</div>
</body>
Copy the codeCSS animations
Detailed knowledge: Click here
Animation is made up of many still frames.
The animation principles
<style>
.demo {
width: 100px;
height: 100px;
border: 1px solid red;
position: relative;
left: 0;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
<script>
// Animation principle
var n = 1;
var demo = document.querySelector('.demo');
var id = setInterval(function() {
if (n <= 200) {
demo.style.left = n + 'px';
n += 1;
} else {
clearInterval(id); }},1000 / 60)
</script>
Copy the codeBuild a CSS tree according to CSS (CSSOM)
- Combine two trees into one render tree
- Layout (document flow, box model, calculated size and location)
- Paint (to draw border colors, text colors, shadows, etc.)
- Composite (display the picture according to the cascading relationship)
Three update modes
The transform properties
For details: Click here
The displacement of the translate
<style>
.demo {
width: 100px;
height: 100px;
border: 1px solid red;
transition: all 1s linear;
}
.demo:hover {
/* transform: translateX(200px); * /
/* transform: translateY(50px); * /
/* transform: translateZ(-200px); * /
/* transform: translate(20px, 50px); * /
transform: translateX(50%);
/* Shift to the right by 50% */
}
.w {
perspective: 1000px;
/* View 1000px from center */
border: 1px solid red;
}
</style>
</head>
<body>
<div class="w">
<div class="demo"></div>
</div>
Copy the codeCenter tips
{ left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Copy the codeThe zoom scale
<style>
#demo {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 50px;
transition: all 1s linear;
}
#demo:hover {
/ * the transform: scaleX (1.5); * /
/ * the transform: scaleY (1.5); * /
transform: scale(1.5.0.5);
}
</style>
</head>
<body>
<div class="wrapper">
<div id="demo"></div>
</div>
</body>
Copy the codeRotate the rotate
<style>
#demo {
width: 100px;
height: 200px;
border: 1px solid red;
margin: 50px;
transition: all 1s linear;
}
#demo:hover {
transform: rotateZ(45deg);
/* transform: rotate3d(1, 1, 1, 45deg); * /
}
.wrapper {
perspective: 1000px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="demo"></div>
</div>
</body>
Copy the codeTilt skew
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#demo {
width: 100px;
height: 200px;
border: 1px solid red;
margin: 50px;
transition: all 1s linear;
}
#demo:hover {
transform: skewX(15deg);
}
.wrapper {
perspective: 1000px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="demo"></div>
</div>
</body>
Copy the codeThe transition transition
Transition: Indicates the delay of the attribute name duration
transition: left 200ms linear
You can separate two different attributes with commas
transition: left 200ms, top 400ms
You can use all to represent all attributes
transition: all 200ms
<style>
#demo {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 50px;
transition: transform 1s linear;
}
#demo.b {
transform: translateX(200px);
}
#demo.c {
transform: translateX(200px) translateY(100px);
}
</style>
</head>
<body>
<div class="wrapper">
<div id="demo"></div>
<button id=button>start</button>
</div>
</body>
<script>
button.onclick = () = > {
demo.classList.add('b')
setTimeout(() = > {
demo.classList.remove('b')
demo.classList.add('c')},1000)}</script>
Copy the codeCSS Animation optimization
For details: Click here
- Reduce the complexity of the selector; Use class-centric methods, such as BEM.
- Reduce the number of elements whose styles must be computed.
- Avoid layout operations whenever possible
- Avoid forced layout synchronization and layout jitter. The style values are read and then the style changes are made
- Reduce the complexity of drawing
- Reduce drawing area
- Elevates elements that move or fade out
- Do use transform and opacity property changes for animation.
- Use will-change or translateZ to promote moving elements.
- Avoid overuse of promotion rules; Each layer requires memory and administrative overhead.
- Do use transform and opacity property changes for animation.
- Use will-change or translateZ to promote moving elements.
- Avoid overuse of promotion rules; Each layer requires memory and administrative overhead.