2018.12.9浮动布局,盒子显隐,定位,z-index,流式布局,小米开头

一浮动布局的总结(昨天作业)

1.同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局
2.浮动布局的盒子宽度在没有设定时会自适应内容宽度

一.1代码演示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复习预习</title>
<!-- 1.总结display -->

<!-- 2.浮动 -->
<!-- 让块级标签在父级可利用的宽度(width)中进行同行排列 -->
<!-- 针对block-level box进行布局 -->
<!-- float: left | right => BFC 左 | 右 => marging-left | margin-right -->
<!-- 在浮动的基础上进行盒模型布局 -->

<!-- 3.清浮动 -->
<!-- 浮动后的标签不再撑开父级高度,让父级获得一个合适的高度 -->
<style type="text/css">
/* (.sup>.sub)+.brother */

.sup {
/*设置固定高度*/
height: 200px;
}
.brother {
clear: both;
}
.sup {
overflow: hidden;
}
.sup:after {
content: "";
display: block;
clear: both;
}

</style>


<!-- 今日 -->
<!-- 浮动布局的作业 -->
<!-- 盒子的显隐控制 -->
<!-- 定位布局 ***** -->
<!-- 流式布局思想 -->

<style type="text/css">
/*对于浮动布局,需要设置父级的宽度吗?需要设置父级的高度吗?*/
/*宽度: 一定需要, 因为父级宽度是子级浮动的显示范围*/
/*高度: 不需要设置, 高度由清浮动来处理*/

/*需要设置子级的宽度吗?高度呢?*/
/*子级的宽高均需要自身设置*/

.box1 {
width: 1000px;
margin: 0 auto;

}
.box1:after {
content: "";
display: block;
clear: both;
}
.box1 div {
width: 200px;
height: 100px;
font: 900 40px/100px "STSong";
text-align: center;
color: white;
background: red;
float: left;
}
div.b6 {
width: 600px;
background: yellow;
float: left;
}
div.b7 {
width: 400px;
height: 200px;
background: yellowgreen;
line-height: 200px;
float: right;
}
div.b8 {
width: 300px;
height: 150px;
background: #ccc;
float: left;
}
div.b9 {
width: 300px;
height: 150px;
background: black;
float: left;
}
div.b10 {
width: 400px;
height: 150px;
background: cyan;
float: right;
}
div.b11 {
width: 600px;
height: 100px;
background: red;
float: right;
}
div.b12 {
width: 1000px;
height: 100px;
background: blue;
float: right;
}
.box1 {
display: none;
}
</style>
<style type="text/css">
.box2 {
width: 600px;
overflow: hidden;
margin: 0 auto;
}
.r, .y, .b {
width: 200px;
float: left;
}
.red, .blue {
height: 180px;
margin-bottom: 10px;
background: red
}
.yellow {
height: 275px;
background: yellow;
margin-bottom: 10px;
}
.blue {
background: blue;
}
</style>
</head>
<body>
<!-- 作业2 -->
<div class="box2">
<div class="r">
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
</div>
<div class="y">
<div class="yellow"></div>
<div class="yellow"></div>
</div>
<div class="b">
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>
</div>


<!-- 作业1 -->
<div class="box1">
<div class="b1">1</div>
<div class="b2">2</div>
<div class="b3">3</div>
<div class="b4">4</div>
<div class="b5">5</div>
<div class="b6">6</div>
<div class="b7">7</div>
<div class="b8">8</div>
<div class="b9">9</div>
<div class="b10">10</div>
<div class="b11">11</div>
<div class="b12">12</div>
</div>






<!-- 浮动细节 -->
<style type="text/css">
.box {
background-color: orange;
/*需要: box的宽度刚刚满足内容的显示宽度*/
float: left;
}
.wrap { overflow: hidden; }
/*1. 一般有inline类型的子内容,父级想自适应子内容的宽度, 让父级浮动起来*/
/*2. 在一个结构中, 应该避免出现既有浮动又有非浮动的兄弟标签, 如果出现,要即将浮动的标签添加父级,并对添加的父级清浮动*/
/*注: 同一结构下,如果有标签浮动,那么该结构下所有兄弟标签均是浮动布局*/

.wrap {
display: none;
}
</style>
<div class="wrap">
<div class="box">
<a href="">百度</a>
<span>|</span>
<a href="">新浪</a>
</div>
</div>
</body>
</html>

 

二盒子的显隐介绍


display: none;
在页面中不占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 不需要用动画处理时
opacity: 0;
在页面中占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 需要采用动画处理时

二.1代码演示


<!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">
.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>

小米网页开头


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>topbar</title>
<style type="text/css">
html, body {
margin: 0;
}
a {
color: black;
text-decoration: none;
}
.topbar {
/*height: 40px;*/
background-color: #333;
}
.container {
width: 1226px;
margin: 0 auto;
/*height: 40px;*/
/*overflow: hidden;*/
}
.container:after {
content: "";
display: block;
clear: both;
}
/*对父级设置字体相关属性, 子级的inline类型标签会继承字体相关属性*/
.topbar-nav, .topbar-info {
font-size: 12px;
/*background: orange;*/
/*line-height: 40px;*/
float: left;
}
.topbar-nav a, .topbar-info a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
}
.topbar-nav span, .topbar-info span {
/*padding: 0 3px;*/
margin: 0 3px;
color: #424242;
}

.topbar-car {
float: right;
width: 120px;
height: 40px;
background: pink;
}
.topbar-info {
float: right;
/*height: 40px;*/
line-height: 40px;
/*background: blue;*/
margin-right: 20px;
}
</style>
<style type="text/css">
.topbar-download {
position: relative;
/*z-index: 1;*/
}
.topbar-app {
position: absolute;
width: 100px;
height: 120px;
background: pink;
left: -25px;
top: 40px;
/*z-index: 666;*/
display: none;
}
.topbar-download:hover .topbar-app {
display: block;
}
</style>
</head>
<body>
<div class="topbar">
<div class="container">
<div class="topbar-nav">
<a href="">小米商城</a>
<span>|</span>
<a href="">MIUI</a>
<span>|</span>
<a class="topbar-download" href="">
下载app
<div class="topbar-app"></div>
</a>
<span>|</span>
<a href="">Select Region</a>
</div>
<div class="topbar-car"></div>
<div class="topbar-info">
<a href="">登录</a>
<span>|</span>
<a href="">注册</a>
<span>|</span>
<a href="">消息通知</a>
</div>
</div>
</div>
</body>
</html>

三定位的介绍


什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式
position: static | relative | absolute | fixed
布局方位:left | right | top | bottom

三.1相对定位


参考系: 自身原有位置
position: relative; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.left = -right | top = -bottom
3.布局后不影响自身原有位置
4.不脱离文档流

三.1.1相对定位代码演示


<!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>

三.2绝对定位


三.2.1绝对定位代码演示


<!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>

三.3固定定位


参考系: 页面窗口(一般用于广告)
position: fixed; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.相对于页面窗口是静止的
3.完全脱离文档流

三.3.1固定定位代码演示


<!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>
</body>
</html>

四z-inde(修改显示层级)


修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高

四.1代码演示


<!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>

五流式布局思想


五.1流式布局思想代码演示


<!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>

 

posted @ 2018-12-11 20:43  涛仔··  阅读(174)  评论(0编辑  收藏  举报