1, css3 elastic box
1.CSS3 elastic box is a layout method to ensure that elements have appropriate behavior when the page needs to adapt to different screen sizes and device types.
An elastic box consists of a flex container and a flex item.
Elastic containers are defined as elastic containers by setting the value of the display property to flex or inline flex.
The elastic container contains one or more elastic child elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
width: 100%;
height: 300px;
background: lightgray;
}
.flex-item {
margin: 10px;
background: goldenrod;
}
.flex-item-l,
.flex-item-r {
flex: 25%;
}
.flex-item-c {
flex: 50%;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item flex-item-l">1</div>
<div class="flex-item flex-item-c">2</div>
<div class="flex-item flex-item-r">1</div>
</div>
</body>
</html>
2. flex attribute of CSS
The flex attribute allows the child elements of all elastic box model objects to have the same length and ignore their internal contents
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.flex-container {
width: 100%;
background-color: cadetblue;
display: flex;
}
.flex-item {
background-color: brown;
margin: 1px;
flex: 1;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">
1
</div>
<div class="flex-item">
2
</div>
<div class="flex-item">
3
</div>
</div>
</body>
</html>
3. order attribute of CSS
The order attribute sets the order of the elastic box object elements. The default value is 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.flex-container {
height: 200px;
width: 300px;
display: flex;
border: 2px brown solid;
}
.flex-item {
width: 40px;
height: 40px;
}
.flex-item1 {
order: 2;
background-color: chartreuse;
}
.flex-item2 {
order: 3;
background-color: coral;
}
.flex-item3 {
order: 1;
background-color: darkkhaki;
}
.flex-item4 {
order: 4;
background-color: hotpink;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item flex-item1">
1
</div>
<div class="flex-item flex-item2">
2
</div>
<div class="flex-item flex-item3">
3
</div>
<div class="flex-item flex-item4">
4
</div>
</div>
</body>
</html>
4. Flex direction attribute
The flex direction attribute specifies the position of the elastic child element in the parent container
flex-direction: row | row-reverse | column | column-reverse
row: horizontal arrangement from left to right (left alignment), the default arrangement.
Row reverse: reverse the horizontal arrangement (right alignment, from the back to the front, and the last item is in the front.
column: vertical arrangement.
Column reverse: reverse the vertical arrangement, from the back to the front, and the last item is at the top.
5. Justify content attribute
The justify content attribute is applied to the elastic container to align the elastic items along the main axis of the elastic container
justify-content: flex-start | flex-end | center | space-between | space-around
6. Align items attribute
Align items sets or retrieves the alignment of elastic box elements in the direction of the side axis (longitudinal axis)
align-items: flex-start | flex-end | center | baseline | stretch
2, bootstrap grid system
Rows must be placed within the. container class to obtain proper alignment and padding.
Columns create gaps between column contents by padding. The padding is negative by the outer margin on. rows, indicating the row offset of the first and last columns.
A grid system is created by specifying twelve available columns that you want to span.
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
3, bootstrap rotation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rotation</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- Rotation( Carousel)index -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Rotation( Carousel)project -->
<div class="carousel-inner">
<div class="item active">
<img src="images1/3.jpg" alt="First slide" style="width: 400px;height: 300px;margin: auto;">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images1/4.jpg" alt="Second slide" style="width: 400px;height: 300px;margin: auto;">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images1/5.jpg" alt="Third slide" style="width: 400px;height: 300px;margin: auto;">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Rotation( Carousel)Navigation -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
4, css multimedia query
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* When the page width is less than 600px, the box will be hidden */
@media screen and (max-width:600px) {
.zz {
display: none;
}
}
</style>
<body>
<div class="zz" style="background-color: brown;height: 100px;width: 100px;">
111
</div>
</body>
</html>