百分比布局：
标准流和浮动：
1width，padding，margin父盒子内容宽比值
2 height父盒子内容高的比值
3 border不能使用百分数
内减盒模型
盒子设置width,height，再设置padding，border盒子的占有区域变大，内容区域不变。这种称为外扩盒模型
css3增加的属性，内减盒模型
盒子设置width,height，再设置padding，border盒子的占有区域不变，内容区域变小。
width:盒子的占有宽度
height:盒子的占有高度
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;
}
如何写响应式布局
通过视口决定 当用户拉伸浏览器时 可以自行设置不同的css文件加载
<!-- 视口大于或者等于1200 p均分 01.css--> 当视口大于等于1200加载第一个css
<link rel="stylesheet" type="text/css" href="css/01.css" media="screen and (min-width: 1200px)">
<!-- 视口小于1200px 同时大于 700px p独占一行 -->
<link rel="stylesheet" type="text/css" href="css/02.css" media="screen and (max-width: 1199px) and (min-width: 700px)">
<!-- 视口小于700 p改变颜色 加载03.css-->
<link rel="stylesheet" type="text/css" href="css/03.css" media="screen and (max-width: 699px)">
媒体查询
css3不需要借助js也可以实现媒体查询。
同一个html网页根据视口不同，显示不同的样式（加载不同的css）
外链式实现媒体查询：
screen:屏幕
media:媒体
min-width: 最小值，视口大于或者等于该值加载这个css
max-width:最大值，视口小于或者等于该值加载这个css
<!-- 视口大于或者等于1200 p均分 01.css-->
<link rel="stylesheet" type="text/css" href="css/01.css" media="screen and (min-width: 1200px)">
<!-- 视口小于1200px p独占一行 -->
<link rel="stylesheet" type="text/css" href="css/02.css" media="screen and (max-width: 1199px)">
媒体查询可以划分多个段口：使用and链接
<!-- 视口大于或者等于1200 p均分 01.css-->
<link rel="stylesheet" type="text/css" href="css/01.css" media="screen and (min-width: 1200px)">
<!-- 视口小于1200px 同时大于 700px p独占一行 -->
<link rel="stylesheet" type="text/css" href="css/02.css" media="screen and (max-width: 1199px) and (min-width: 700px)">
<!-- 视口小于700 p改变颜色 加载03.css-->
<link rel="stylesheet" type="text/css" href="css/03.css" media="screen and (max-width: 699px)">
IE8不认识media，“留活口”
<!-- 留活口 所有视口都会加载该css -->
<!-- 大于等于1200px加载01.css -->
<link rel="stylesheet" type="text/css" href="css/01.css">
<!-- 小于1200px加载04.css -->
<link rel="stylesheet" type="text/css" href="css/04.css" media="screen and (max-width: 1199px)">
嵌入式布局
/*清除默认样式*/
* {
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>
---------------------
【转载，仅作分享，侵删】
作者：前端小99
原文：https://blog.csdn.net/qq_41328247/article/details/88724799
版权声明：本文为博主原创文章，转载请附上博文链接！
|
|
收藏
淘帖
踩
奈斯，感谢分享
