Percentage layout:
Standard flow and float:
1width, padding, margin width ratio of the content of the parent box
2 height higher content ratio of the parent box
3 border percentage can not be used
-
Save the box model
Box set width, height, and then set the padding, border box occupied area becomes large, the same content area. Such extended box model called
css3 properties increase, the Save Box Model
Box set width, height, and then set the padding, border area occupied the same box, the content area becomes smaller.
width: width of the box occupies
height: the height of the box occupied
box-sizing: border-box;
1 .box2 {
2 /*通栏*/
3 width: 100%;
4 height: 200px;
5 background-color: #eee;
6 }
7 .box2 p {
8 float: left;
9 /*width:占有宽度 一定是内减盒模型*/
10 width: 50%;
11 height: 100%;
12 background-color: orange;
13 padding: 20px;
14 border: 1px solid #000;
15 box-sizing: border-box;
16 }
17 .box2 p:last-child {
18 background-color: lightblue;
}
How to write a responsive layout
Viewport determined by stretching the browser when the user can set different css file self-loading
| <! - viewport 1200 P greater than or equal average 01.css -> When the viewport than or equal to a first load 1200 css | |
| <link rel="stylesheet" type="text/css" href="css/01.css" media="screen and (min-width: 1200px)"> | |
| <! - while the viewport is smaller than 1200px 700px p is greater than its own line -> | |
| <link rel="stylesheet" type="text/css" href="css/02.css" media="screen and (max-width: 1199px) and (min-width: 700px)"> | |
| <! - viewport change color loading is less than 700 p 03.css -> | |
| <link rel="stylesheet" type="text/css" href="css/03.css" media="screen and (max-width: 699px)"> |
Media Inquiries
css3 js can be achieved without the aid of media queries.
Depending on the same html page viewport display different patterns (load different css)
Outside chain implement media queries:
screen: Screen
media: media
min-width: the minimum value, the viewport loading greater than or equal to the value of this css
max-width: the maximum value, the viewport less than or equal to the value of this load css
|
Media inquiries can be divided into multiple segments ports: use and links
|
IE8不认识media，“留活口”
|
嵌入式布局
/*清除默认样式*/
* {
padding: 0;
margin: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.box {
width: 100%;
overflow: hidden;
}
/*媒体查询 and连接视口*/
@media screen and (min-width: 1200px) {
p {
float: left;
width: 50%;
height: 200px;
background-color: green;
}
.no2 {
background-color: orange;
}
}
/*小于1200px 更改样式*/
@media screen and (max-width: 1199px) {
.box p {
width: 100%;
height: 200px;
background-color: red;
}
.box .no2 {
background-color: lightblue;
}
}
</style>
</head>
<body>
<div class="box">
<p>1</p>
<p class="no2">2</p>
</div>
</body>