目录
一.常见网页布局
二.标准文档流
标准文档流常见标签
|------|--------------------------------------------|
| 块级元素 | <div>、<p>、<h1>-<h6>、<ul>、<ol>等 |
| 内联元素 | <span>、<a>、<strong>、<em>、<img>等 |
[标准文档流的组成]
三.display属性
在HTML中，display属性用于指定元素的展示方式。该属性可以接受以下几种值：
- 总结--display特性
实现块级元素与行级元素的转变，控制块级元素排到一行，控制元素的显示和隐藏。
演示案例：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px seagreen solid;
width: 100px; height: 100px;
}
span{border: 1px red solid;}
</style>
</head>
<body>
<div>我是元素</div>
<span>我是Span元素</Span>
</body>
</html>
- none属性
设置的元素不会被显示。
css
div{
width: 100px; height: 100px;
border: 1px seagreen solid;
display: none;
}
- inline
元素被视为内联元素，并在同一行内显示。
css
div{
width: 100px; height: 100px;
border: 1px seagreen solid;
display: inline;
}
- inline-block
该元素被视为内联块级元素同时具有块元素和行元素的属性。即可设置宽度也可并行排列。
css
div{
width: 100px; height: 100px;
border: 1px seagreen solid;
display: inline-block;
}
四.float属性
- 浮动属性的特点
- 元素浮动后会脱离文档流，不再占据原来的空间，而是向左或向右移动，其他元素会填充到浮动元素所占据的空间。
- 浮动元素并可以与其他元素并排显示，如果空间不够，会自动换行或换列，并可以设置宽度和高度：浮动元素可以通过设置宽度和高度来确定其占据的空间大小
演示案例：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style>
div{margin: 10px; padding: 5px;}
#father{border: 1px red solid;}
.layer01{border: 1px blue dashed; }
.layer02{border: 1px pink dashed; }
.layer03{border: 1px green dashed; ;}
.layer04{border: 1px skyblue dashed; font-size: 30px; line-height: 100px;}
</style>
</head>
<body>
<div id="father">
<div class="layer01"><img src="picture1.png" alt="日用品"></div>
<div class="layer02"><img src="picture2.png" alt="图书"></div>
<div class="layer03"><img src="picture3.png" alt="鞋子"></div>
<div class="layer04">
浮动盒子可以向左浮动，也可以向右浮动，直到外边缘碰到包含框或另一个浮动盒子为止
这里使用三个图片和本段文字来讲解浮动属性在网页中的应用，根据所在的div分别向左/
右/不浮动。
</div>
</div>
</div>
</body>
</html>
- left
设置元素向左浮动
css
.layer01{
border: 1px blue dashed;
float: left;
}
- 设置向左浮动后产生上述网页布局的原因：
设置向左浮动的元素脱离原来的文档流向左上方移动直到碰到父级边框后停止移动，剩余元素会自动填充浮动元素的原有位置，并防止遮住浮动元素会自适应移动。
css
.layer02{
border: 1px darkorange dashed;
float: left;
}
- right
css
.layer01{
border: 1px blue dashed;
float: right;
}
css
.layer02{
border: 1px darkorange dashed;
float: right;
}- 总结：
浮动属性中的左移动/右移动，代表X轴方向的移动。而Y轴方向的移动则需要使用下面的清除浮动属性。
清除浮动
清除浮动是为了解决浮动元素引起的父元素高度塌陷的问题。
移动规则：
清除左浮动：设置清除左浮的元素会停留在先行左浮元素的下方并且靠右。
清除右浮动：设置清除右浮的元素会停留在先行右浮元素的下方并且靠左。
案例：
- 向右浮动并清除向左浮动
css
.layer01{
border: 1px blue dashed;
float: right;
}
.layer02{
border: 1px darkorange dashed;
float: right;
clear: left;
}
- 上述布局形成原因：
排在元素layer02前面的元素layer01为右浮动，并未设置左浮动，对于layer02设置清除左浮动之后没有先行元素向左移动，因此layer02元素仅执行向右移动。
- 向右浮动并清除右浮动
css
.layer01{
border: 1px blue dashed;
float: right;
}
.layer02{
border: 1px darkorange dashed;
float: right;
clear: right;
}
- 上述布局形成原因：
排在元素layer02前面的元素layer01为右浮动，对于layer02设置清除右浮动之后有先行元素向右移动，因此layer02元素会先向右移动并停留在先行元素layer01的下方。
- 向左浮动并清除右浮动
css
.layer01{
border: 1px blue dashed;
float: right;
}
.layer02{
border: 1px darkorange dashed;
float: left;
clear: right;
}
- 向右移动并清除两侧浮动
清除两侧浮动的元素将停留在最低元素的下方，并执行浮动的指令向右移动。
css
.layer03{
border: 1px green dashed;
float: right;
clear: both;
}五. 解决边框塌陷问题
- 父级边框塌陷的原因：
- 浮动元素脱离文档流导致相邻元素无法检测到该浮动元素的边界，进而导致边框塌陷的现象发生。
- 相邻的两个元素的margin相遇时较大的margin会覆盖较小的margin，导致边框塌陷的现象发生。
下图为元素浮动导致的父级边框塌陷
overflow属性
在浮动元素的父元素中设置
overflow:auto;或overflow:hidden;属性。这会使父元素包含浮动元素，并清除浮动，例如：
语法：
css
#father{
border: 1px red solid;
overflow: hidden;
}
after伪类
在浮动元素的父元素中添加一个带有
content:""; display:table; clear:both;属性的伪元素。例如:
语法：
css
#father:after{
content: '';/**内容清空**/
display: block;/**设置该元素为块元素**/
clear: both;/**清除两侧浮动**/
}
六.解决内容溢出问题
overflow属性
内容溢出案例：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
width: 200px;
height: 200px;
border: 1px solid rebeccapurple;
}
</style>
</head>
<body>
<div id="d1">
<img src="picture1.png"/>
<p>
都 是勇敢的
你额头的伤口 你的 不同 你犯的错
都 不必隐藏
你破旧的玩偶 你的 面具 你的自我
他们说 要带着光 驯服每一头怪兽
他们说 要缝好你的伤
没有人爱小丑 为何孤独 不可 光荣
人只有不完美 值得歌颂
谁说污泥满身的不算英雄
</p>
</div>
</body>
</html>
- overflow：scroll
无论内容是否被修剪都设置浏览器以滚动条的方式查看边框内的内容。
语法：
css
#d1{
overflow: scroll;
}
- overflow：auto
若内容被修建则设置浏览器以滚动条的方式查看剩余内容，内容未溢出则无需修建不会设置滚动方式。
练习
一.制作热门活动页面
二.制作电视剧详情列表页面
三. 制作QQ会员页面导航
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0px; padding: 0px;}/**设置根边框的内外边距**/
a{text-decoration:none ;}/**去除超链接下划线**/
.nav-header{height: 90px; width: 100%; background: rgba(0, 0, 0, .6); border: 1px red solid;}
.head-contain{width: 1180px; height: 90px; margin: 0 auto; text-align: center; border: 1px yellow dashed; border-width: 5px;}
.top-logo,.top-nav,.top-nav li,.top-right{ /**针对上述选择器同时设置样式**/
height: 90px;
display: inline-block;
vertical-align: top;/**垂直对齐方式：靠上**/
}
.top-nav{margin: 0,55; border: 1px blue solid; border-width: 5px;}/**设置右外长度边距**/
.top-nav li{line-height: 90px; width: 90px;}
.top-nav li a{display: block; text-align: center; font-size: 15px; color: aliceblue;}
.top-nav li a:hover{color: blue;}/**设置鼠标点击链接的样式**/
.top-right{border: 1px green solid; border-width: 5px;}
.top-right a{
display: inline-block; font-size: 15px; text-align: center; margin-top: 15px;
border-radius: 35px;/**设置边框为圆角**/
}
.top-right a:nth-child(2){
width: 93px;
border: 1px solid orange ;
position: relative;
top: 20px;
}
.top-right a:nth-child(3){position: relative; top: 20px;}
.top-right a:nth-child(2):hover{color: gold;background-color: orange;}
</style>
</head>
<body>
<div class="wrap">
<header class="nav-header"><!--设置一个根边框用于添加class="head-contain"中的元素-->
<div class="head-contain"><!--设置一个二级边框添加下列元素-->
<a href="#" class="top-logo"><img src="picture1.png" width="145px" height="90px"/></a>
<nav class="top-nav"><!--<nav标签：定义导航模块>-->
<ul><!--定义一个列表-->
<li><a href="">功能特权</li>
<li><a href="">游戏特权</li>
<li><a href="">生活特权</li>
<li><a href="">会员活动</li>
<li><a href="">成长体系</li>
<li><a href="">年费专区</li>
<li><a href="">超级会员</li>
</ul>
</nav>
<div class="top-right"><!--设置另一个框架用于存放下列元素-->
<a href="">登录</a>
<a href="">开通超级会员</a>
</div>
</div>
</header>
</div>
</body>
</html>
黄色边框为二级边框 -黄色边框外层红色边框为根边框-蓝色边框为子边框1-绿色边框为子边框2