共计 7787 个字符,预计需要花费 20 分钟才能阅读完成。
css 布局的三种模式
规范流
依照元素的显示模式进行排列,故称为规范流
浮动
次要用于多个块级盒子在同一行显示
定位
次要把盒子定位到浏览器的某个地位 前面会常常用到定位
行内块元素和浮动的区别
行内块元素能够让元素在同一行显示,然而两头有空隙,而浮动却恰好解决这个问题
float(浮动)
设置浮动属性的元素会脱离规范流,会将元素挪动到指定的地位
浮动的作用
- 能让多个块级盒子在同一行显示
- 能够实现盒子的左右对齐
- 浮动最早是用来实现图片盘绕成果
选择器 {float: 属性值;}
浮动之浮篇
浮动的盒子会脱标,且不占地位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 200px;
width: 200px;
background-color: blue;
float: left;
}
.box2 {
width: 400px;
height: 400px;
background-color: brown;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
浮动的盒子之漏篇
浮动的盒子,会把原来的地位漏给上面规范流的盒子,且不占地位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 200px;
width: 200px;
background-color: blue;
/* 浮动的盒子不占地位,地位会漏给上面的盒子 */
float: left;
}
.box2 {
width: 400px;
height: 400px;
background-color: brown;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
float 之特篇
浮动的个性:浮动的盒子会扭转元素的 display 属性, 转换相似行内块个性,但没有缝隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 400px;
width: 400px;
background-color: blue;
float: left;
}
.box2 {
width: 400px;
height: 400px;
background-color: black;
float: left;
}
.box3 {
width: 400px;
height: 400px;
background-color: brown;
float: pink;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
注意事项:当父元素的宽度不够包容浮动的盒子,浮动的盒子会从新起一行
浮动小结
浮动小细节
一个残缺的网页,是由规范流 + 浮动 + 定位 一起实现的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
width: 400px;
height: 400px;
border: 1px solid red;
}
.box1,
.box2 {
width: 200px;
height: 200px;
background-color: black;
float: left;
}
.box2 {background-color: blueviolet;}
.box3 {
width: 400px;
height: 200px;
background-color: brown;
float: left;
}
</style>
</head>
<body>
<div class="nav">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
浮动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 800px;
margin: 100px auto;
}
.left {
width: 200px;
height: 800px;
background-color: red;
float: left;
}
.right {
width: 600px;
height: 800px;
float: left;
}
.right li {
list-style: none;
width: 140px;
height: 395px;
float: left;
background-color: brown;
margin-left: 10px;
margin-top: 5px;
font-weight: bold;
color: wheat;
line-height: 395px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</body>
</html>
导航栏案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.banner {
width: 760px;
height: 150px;
margin: auto;
}
.nav {
width: 760px;
height: 32px;
background: url(image/nav_bg.jpg) repeat-x;
margin: auto;
}
.nav li {
list-style: none;
float: left;
}
.nav li a {
display: block;
width: 80px;
height: 32px;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #40510A;
background: url(image/button1.jpg);
}
.nav li a:hover {background: url(image/button2.jpg);
}
</style>
</head>
<body>
<!-- 广告条部份开始 -->
<div class="banner">
<img src="image/banner.jpg" alt="">
</div>
<!-- 广告条部份完结 -->
<!-- 导航局部开始 -->
<div class="nav">
<ul>
<li><a href="#"> 网站导航 </a></li>
<li><a href="#"> 网站导航 </a></li>
<li><a href="#"> 网站导航 </a></li>
<li><a href="#"> 网站导航 </a></li>
<li><a href="#"> 网站导航 </a></li>
<li><a href="#"> 网站导航 </a></li>
</ul>
</div>
</body>
</html>
浮动元素与父元素的关系
浮动的元素不会压住父元素的边框,也不会压住父元素的 padding 值,而且浮动的盒子与父盒子参照对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
height: 200px;
background-color: red;
border: 5px solid black;
padding: 20px;
}
.son {
width: 200px;
height: 100px;
float: left;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
浮动元素与兄弟元素的关系
1. 浮动的盒子只会影响前面的规范流盒子,并不会影响后面的规范流的盒子
2. 一个盒子浮动,其它的盒子也应该浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
border: 1px solid red
}
.son1 {
width: 100px;
height: 100px;
background-color: red;
}
.son2 {
width: 400px;
height: 200px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
</html>
为什么要革除浮动?
革除浮动的实质:是为了解决父元素因为子元素浮动而引起高度为 0 的状况。革除浮动后,父元素会自动检测浮动的子元素的高度,父元素有了高度后,就不会影响上面的规范流
革除浮动的办法
选择器 {clear: 属性值}; clear: 革除
额定标签法
在最初浮动的元素增加一对空标签,如 <div style="clear: both;"></div> 等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
width: 800px;
margin: auto;
border: 1px solid red;
}
.box1 {
width: 400px;
height: 400px;
background-color: green;
float: left;
}
.box2 {
width: 400px;
height: 400px;
background-color: black;
float: left;
}
.box3 {
height: 500px;
width: 800px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="nav">
<div class="box1"></div>
<div class="box2"></div>
<!-- 在最初浮动的元素前面增加一对空标签 -->
<div style="clear: both;"></div>
<div class="box3"></div>
</div>
</body>
</html>
长处:通俗易懂
毛病:减少很多没意义的标签,造成构造错乱
父级增加 overflow:hidden 即可
语法:overflow:hidden | auto | scroll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
width: 800px;
margin: auto;
border: 1px solid red;
/* 间接给父元素增加 overfolw-hidden */
overflow: hidden;
}
.box1 {
width: 400px;
height: 400px;
background-color: green;
float: left;
}
.box2 {
width: 400px;
height: 400px;
background-color: black;
float: left;
}
.box3 {
height: 500px;
width: 800px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="nav">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
长处:书写代码不便
毛病:代码变多时而导致无奈显示被暗藏的内容
应用 after 伪元素革除浮动
.clearfix::after {
content: "";
display: block;
height: 0;
visibility: hidden;
overflow: hidden;
}
.clearfix {
*zoom: 1;
/* 关照 ie6 ie7 的兼容性 */
}
比拟完满 但有兼容性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::after {
content: "";
display: block;
height: 0;
visibility: hidden;
overflow: hidden;
}
.clearfix {
*zoom: 1;
/* 关照 ie6 ie7 的兼容性 */
}
.nav {
width: 800px;
margin: auto;
border: 1px solid red;
}
.box1 {
width: 400px;
height: 400px;
background-color: green;
float: left;
}
.box2 {
width: 400px;
height: 400px;
background-color: black;
float: left;
}
.box3 {
height: 500px;
width: 800px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="nav clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
双伪元素来革除浮动
语法
.clearfix::before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {clear: both;}
.clearfix {
*zoom: 1;
/* 关照 ie6 ie7 的兼容性 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {clear: both;}
.clearfix {
*zoom: 1;
/* 关照 ie6 ie7 的兼容性 */
}
.nav {
width: 800px;
margin: auto;
border: 1px solid red;
}
.box1 {
width: 400px;
height: 400px;
background-color: green;
float: left;
}
.box2 {
width: 400px;
height: 400px;
background-color: black;
float: left;
}
.box3 {
height: 500px;
width: 800px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="nav clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
革除浮动的总结
ctrl+f 搜寻网页
ps 的基础知识
常见的图片格式
- jpg
- gif
- png
- psd:photoshop 的专用格局
ps 如何切片
- 利用切片工具进行切片
- 利用新建图层进行切片
- 利用辅助线进行切片
正文完