前端之盒模型显隐、定位与流式布局思想
盒模型的显隐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子的显隐</title>
<style type="text/css">
.box, .wrap {
width: 200px;
height: 200px;
background: red;
}
.wrap {
background: orange;
}
/*display: none; 通过控制盒子的显示方式来隐藏盒子*/
/*该隐藏方式在页面中不占位*/
.box {
display: none;
}
/*opacity: 0; 通过控制盒子的透明度来隐藏盒子*/
/*该隐藏方式在页面中占位*/
.box {
/*opacity: 0*/
}
/*注: 一般显隐操作的盒子都是采用定位布局*/
/*悬浮父级显示子级*/
body:hover .box {
display: block;
}
/*将盒子藏到屏幕外: 不能通过盒模型布局, 也不建议通过浮动布局, 可以采用定位布局*/
.box {
/*margin-top: -208px*/
}
</style>
</head>
<body>
<div class="box"></div>
<div class="wrap"></div>
</body>
</html>
定位
相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位布局</title>
<style type="text/css">
/*定位布局的导入*/
/*需求: */
/*1.子级在父级的右下角显示*/
/*2.子级完成布局后,父级做content后,子级不需要重新布局*/
.sup {
width: 300px;
height: 300px;
background: pink;
border: 10px solid black;
}
.sub {
width: 50px;
height: 50px;
background: red;
margin-left: auto;
margin-top: 150px;
}
/*能不能有一种定位, 让盒子可以通过上下左右四个方位均操作自身布局 => 定位布局*/
/*什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式*/
.sup {
display: none;
}
</style>
<style type="text/css">
/*相对定位布局*/
.box {
width: 200px;
height: 200px;
background: pink;
}
.b2 { background: orange }
.b1 {
/*1.设置定位属性，就会打开定位方位*/
position: relative;
/*2.通过定位方位完成布局*/
top: 300px;
left: 300px;
/*bottom: 100px;*/
/*right: 100px;*/
/*margin-top: 200px;*/
/*结论*/
/*1.左右取左,上下取上(eg:left与right共存是,left生效)*/
/*2.left=-right, top=-bottom*/
/*3.参考系: 自身原有位置(不是某一个点,eg: right参考的就是原有位置的右边界)*/
/*4.自身布局后不会影响自身原有位置*/
/*5.不脱离文档流(脱离文档流: 不再撑开父级高度)*/
}
</style>
</head>
<body>
<div class="box b1">1</div>
<div class="box b2"></div>
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位布局</title>
<style type="text/css">
.box {
width: 200px;
height: 300px;
background: orange;
}
.sup {
width: 200px;
height: 200px;
background: pink;
/*position: absolute;*/
}
.sub {
width: 50px;
height: 50px;
background: red;
/*1.开的定位*/
position: absolute;
/*2.采用定位方位完成布局*/
right: 0;
bottom: 0;
}
body {
position: relative;
}
/*注: 一般父级采用的是相对定位布局, 一般情况下,父级不需要脱离文档流*/
/*如果父级需要脱离文档流,用绝对定位父级完成布局,完全可以,不会影响子级相对于自身的布局,但是自身又要需要一个在文档流中的(不脱离文档流中的)定位参考父级 => 父相子绝*/
/*相对定位的应用场景大部分都是辅助于子级的绝对定位*/
.sup {
position: relative;
}
.sub {
/*left: 0;*/
right: 0;
}
</style>
</head>
<body>
<!-- 绝对定位布局一定存在父子关系 -->
<!-- 导入定位布局时,父级设置宽高没?(设置了) 子级呢?(也设置了) => 父级的高度不再依赖于子级 => 子级脱离文档流 -->
<!-- 参考系: 最近的定位父级 -->
<div class="sup">
<div class="sub"></div>
</div>
<!-- <div class="box"></div> -->
<!--
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.父级必须自己设置宽高
3.完全离文档流
-->
</body>
</html>
固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
/*参考系: 页面窗口*/
/*1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左*/
/*2.相对于页面窗口是静止的*/
/*3.完全脱离文档流*/
.box {
width: 200px;
height: 300px;
background: orange;
}
.box {
position: fixed;
top: 200px;
right: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
z-index 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style type="text/css">
.wrap {
width: 200px;
height: 200px;
background: pink;
/*父级做相对定位处理,并不是自己需要用定位完成布局,最主要的原因是辅助于子级完成绝对定位布局*/
position: relative;
}
.box {
width: 75px;
height: 75px;
font: normal 30px/75px "STSong";
text-align: center;
background: cyan;
/*绝对定位需要大家脱离文档流,相互不会影响布局,每个都是独立相对于父级进行布局的个体*/
position: absolute;
/*top: 0;*/
/*bottom: 0;*/
/*left: 0;*/
}
.b1 {
left: 0;
top: 0;
background: red;
}
.b2 {
right: 0;
top: 0;
background: yellow;
}
.b3 {
/*虽然子级脱离了文档流,但是父子关系以及存在,子级获取100%,得到的还是父级对应的值*/
left: calc((100% - 75px) / 2);
top: calc((100% - 75px) / 2);;
background: green;
/*z-index改变显示层级, 显示层级的值为正整数, 值越大,显示层级越高*/
z-index: 1;
}
.b4 {
left: 0;
bottom: 0;
background: blue;
/*z-index: 88889;*/
}
.b5 {
right: 0;
bottom: 0;
background: white;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box b1">1</div>
<div class="box b2">2</div>
<div class="box b3">3</div>
<div class="box b4">4</div>
<div class="box b5">5</div>
</div>`
</body>
</html>
流式布局思想
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流式布局思想</title>
<style type="text/css">
html, body {
margin: 0;
width: 100%;
/*辅助body内部的子级有height流式布局的基础*/
height: 100%;
}
/*流式布局思想: 尽可能不去使用固定属性值*/
/*通过父级来获取相应的属性值*/
.b1 {
width: 100%;
height: 100%;
background: red;
}
.b2 {
/*view-width view-height*/
width: 80vw;
height: 80vh;
background: orange;
/*流式布局限制条件: 流式布局下宽度最大只能放大到800px,最小只能缩小到600px*/
max-width: 800px;
min-width: 600px;
}
html {
font-size: 200px;
}
body {
font-size: 100px;
}
span {
/*设置自身字体时 em = ?px 父级字体的大小*/
font-size: 2em;
display: block;
/*宽高em在自身设置字体大小后,值又会更改为相应大小*/
/*eg: body: 100px => 设置自身字体时em=100px, */
/*自身设置字体大小为2em,自身字体大小为200px => width=2em的em=200px*/
/*结果自身宽度是400pk*/
/*自身非设置字体时使用em单位,em值取自身字体大小*/
width: 2em;
/*rem = html字体的大小*/
height: 2rem;
background: red;
}
</style>
<style type="text/css">
.sup {
width: 200px;
height: 200px;
padding: 50px;
background: red;
}
.sub {
/*父级的content是提供给子级盒子利用的*/
margin: 0 5px;
border: 5px solid black;
padding: 5px;
/*auto <= 100%*/
width: auto;
/*width: 100%;*/
height: 50px;
background: orange;
}
</style>
</head>
<body>
<!-- <div class="b1"></div> -->
<!-- <div class="b2"></div> -->
<!-- <span>好的</span> -->
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
hover 父子悬浮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sup {
width: 120px;
height: 40px;
background: pink;
position: relative;
}
.sub {
width: 120px;
height: 100px;
background: black;
position: absolute;
left: 0;
top: 40px;
display: none;
}
.sup:hover .sub {
display: block;
}
</style>
</head>
<body>
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
总结
一.浮动布局的总结
1.同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局
2.浮动布局的盒子宽度在没有设定时会自适应内容宽度
二.盒子的显隐
display: none;
在页面中不占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 不需要用动画处理时
opacity: 0;
在页面中占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 需要采用动画处理时
三.定位布局
什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式
参考系: 自身原有位置
position: relative; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.left = -right | top = -bottom
3.布局后不影响自身原有位置
4.不脱离文档流
参考系: 最近的定位父级
position: absolute; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.父级必须自己设置宽高
3.完全离文档流
参考系: 页面窗口
position: fixed; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.相对于页面窗口是静止的
3.完全脱离文档流
修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高
四.流式布局思想
1. 百分比
2. vw | vh => max-width(height) | min-width(height)
3. em | rem
