布局方式
PC端-三栏布局
圣杯
* {
margin: 0;
padding: 0;
}
body {
font-size: 50px;
/* 设置body的最小宽度 */
min-width: 620px;
/* 设置body的最大宽度 */
max-width: 1000px;
}
header,
footer {
width: 100%;
height: 100px;
background-color: tan;
text-align: center;
line-height: 100px;
}
/* center,left,right都浮动 */
.left,
.right,
.center {
float: left;
height: 400px;
text-align: center;
line-height: 400px;
}
/* 清除浮动 */
.clearfix::after {
clear: both;
display: block;
content: "";
}
/* 左右两侧宽度固定 */
.left,
.right {
width: 200px;
}
/* center宽度为100% */
.center {
width: 100%;
background-color: teal;
}
/* left通过margin-left为负值(-100%),移动到center最左边 */
.left {
margin-left: -100%;
background-color: thistle;
/* leftt相对定位,移动到相应的位置。位移量为自身的宽度。 */
position: relative;
left: -200px;
}
/* right通过margin-left为负值(自身的宽度),移动到center的最右边。 */
.right {
margin-left: -200px;
background-color: tomato;
/* right相对定位,移动到相应的位置。位移量为自身的宽度。 */
position: relative;
right: -200px;
}
/* 最外层div添加一个padding,padding的宽度为left,right的宽度 */
.clearfix {
padding: 0px 200px;
}
<header>header</header>
<div class="clearfix">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
总结:
1.在主体内部外面嵌套了一个div
2.center在结构上靠前
3.center,left,right都浮动
4.清除浮动
5.center宽度为100%,left,right宽度固定
6.left通过margin-left为负值(-100%),移动到center最左边
7.right通过margin-left为负值(自身的宽度),移动到center的最右边。
8.center的内容会被left,right遮盖
9.最外层div添加一个padding,padding的宽度为left,right的宽度。
10,left,right相对定位,移动到相应的位置。位移量为自身的宽度。
圣杯:外盒子的padding+left right的相对定位
双飞翼
* {
margin: 0;
padding: 0;
}
body {
font-size: 50px;
/* 设置body的最小宽度 */
min-width: 620px;
/* 设置body的最大宽度 */
max-width: 1000px;
}
header,
footer {
width: 100%;
height: 100px;
background-color: tan;
text-align: center;
line-height: 100px;
}
/* 让left right center浮动 */
.left,
.right,
.center {
float: left;
height: 400px;
text-align: center;
line-height: 400px;
}
/* 左右两侧宽度固定 */
.left,
.right {
width: 200px;
}
/* center宽度为100% */
.center {
width: 100%;
background-color: teal;
}
/* 设置left的margin-left为负值(-100%),移动到center最左边 */
.left {
margin-left: -100%;
background-color: thistle;
}
/* 设置right的margin-left为负值(负的自身宽度),移动到center的最右边。 */
.right {
margin-left: -200px;
background-color: tomato;
}
footer {
clear: both;
}
/* 为这个div添加一个margin,左右margin的值为left right的宽度。 */
.home {
margin: 0 200px;
}
<header>header</header>
<div class="center">
<div class="home">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<footer>footer</footer>
总结:
1.center在结构上靠前
2.center,left,right都浮动
3.center宽度为100%,left,right宽度固定
4.left通过margin-left为负值(-100%),移动到center最左边
5.right通过margin-left为负值(自身的宽度),移动到center的最右边。
6.在center中添加一个div,将内容写在这个div中
7.为这个div添加一个margin,左右margin的值为left right的宽度。
双飞翼布局:子盒子的margin
弹性盒子
* {
margin: 0;
padding: 0;
}
body {
font-size: 50px;
/* 设置body的最小宽度 */
min-width: 620px;
/* 设置body的最大宽度 */
max-width: 1000px;
}
header,
footer {
width: 100%;
height: 100px;
background-color: tan;
text-align: center;
line-height: 100px;
}
/* 将home设置为弹性盒子 */
.home {
display: flex;
width: 100%;
height: 400px;
font-size: 50px;
line-height: 400px;
text-align: center;
}
/* left right 固定宽度 */
.left,
.right {
width: 200px;
background-color: brown;
}
/* 调整顺序,left:1 center:2 right:3 */
.left {
order: 1;
}
.center {
order: 2;
}
.right {
order: 3;
}
/* center不设置宽度 , 将center设置为 flex-grow: 1; */
.center {
flex-grow: 1;
background-color: cadetblue;
}
<header>header</header>
<div class="home">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
1.添加一个最外层的div home
2.将home设置为弹性盒子
3.left right 固定宽度 center不设置宽度
4.将center设置为 flex-grow: 1;
5.调整顺序,left:1 center:2 right:3
视口
分辨率
分辨率:屏幕中像素的数量 , PC端常见的分辨率 :1920*1080。
手机分辨率一般比较高。
问题:
如果用手机的真实分辨率去呈现网页,网页整体看起来会特别小。
苹果,乔布斯在推出iPhone4的时候,为了让页面完整显示在手机上,推出了视口这个概念,让手机浏览器默认为980px。 当前这个980就是视口的宽度。
视口分类
- 布局视口 网页的宽度
- 视觉视口 用户可以看到的网站的区域
- 理想视口 视觉视口=布局视口
eg:
<!-- 让不同的设备自适应理想视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 自定义视口的宽度 -->
<meta name="viewport" content="width=300px">
不同的移动设备因为分辨率,屏幕尺寸等问题,造成视觉视口不同,那么理想视口也会不同。
移动端
移动端布局:
1.响应式
2.分别开发两套代码
媒体查询
设备
- 屏幕:PC 、手机端
- 打印机
- 屏幕阅读器
尺寸
常见尺寸 320-420之间
布局
响应式网页:同一个网页,在不同的条件下,使用不同的样式。
rem/百分比:等比例缩放。
min-width/max-width
使用min-width时,通常将小的条件放在前面。
使用max-width时,通常将大的条件放在前面。
实现方式
内嵌式
格式:
@media 设备名 逻辑关键词(and or not)(条件){
样式;
}
eg:
/* 设备是屏幕设备 宽度小于等于1500px */
@media screen and (max-width:1500px) {
body {
background-color: brown;
}
}
/* 设备是屏幕设备 宽度大于等于1200px */
@media screen and (min-width:600px) {
body {
background-color: cadetblue;
}
}
外链式
通过link标签引入样式,再通过media属性设置样式引用的条件。
格式:
<link rel="stylesheet" href="css/m1.css" media="screen and (max-width:1200px)">
逻辑关键字
- and ,满足多个条件
- , ,多个条件中满足一个条件
- not ,逻辑非 只要不满足条件就会生效
逻辑或
/* 使用,隔开条件 */
/* 打印设备 或者 宽度大于等于1200px */
@media print ,(min-width: 1200px) {
h1{
color: brown;
}
}
逻辑非
@media not screen {
h1{
color: brown;
}
}
设备方向
orientation 属性可以定义设备的方向
- portrait 竖屏设备 , 高度大于宽度
- landscape 横屏设备, 宽度大于高度
常见的查询特性:
- orientation : landscape(横屏设备)、portrait(竖屏设备 )
- width :设备的宽度
- height :设备的高度
- min-width : 最小宽度
- max-width :最大宽度
- min-height :最小高度
- max-height :最大高度
eg:横屏设备并且宽度大于580时,背景色为红色。
@media screen and (orientation:landscape) and (min-width:580px) {
body {
background-color: brown;
}
}