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如何切片
- 利用切片工具进行切片
- 利用新建图层进行切片
- 利用辅助线进行切片