浮动
2018-10-24 本文已影响0人
亨锅锅
1 网页的布局方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页的布局方式</title>
<style>
/*
div,h1,p{
border: 1px solid #000;
}
span,strong,b{
border: 1px solid #000;
}
*/
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
/*display: inline-block;*/
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
/*display: inline-block;*/
/*margin-left:930px;*/
float: right;
}
</style>
</head>
<body>
<!--
1.什么是网页的布局方式?
网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
1.标准流(文档流/普通流)排版方式
1.1其实浏览器默认的排版方式就是标准流的排版方式
1.2在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
1.3 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
垂直排版, 如果元素是块级元素, 那么就会垂直排版
水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
2.浮动流排版方式
2.1浮动流是一种"半脱离标准流"的排版方式
2.2浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
注意点:
1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中是不可以使用margin: 0 auto;
特点:
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是块级元素/行内元素/行内块级元素都可以水平排版
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像
3.定位流排版方式
-->
<!--
<div>我是div</div>
<h1>我是标题</h1>
<p>我是段落</p>
-->
<!--
<span>我是span</span>
<strong>我是强调</strong>
<b>我是加粗</b>
-->
<span class="box1"></span>
<span class="box2"></span>
</body>
</html>
1 什么是网页的布局方式
2 什么是标准流排版方式
3 什么是浮动流排版方式
就是为了让元素和父元素水平居左或居右对齐
4 在浮动流排版是用margin:0 auto;会有什么效果
没有效果
5 在浮动流排版方式中给span设置宽高会有什么效果
可以设置宽高
2 浮动的元素脱标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素的脱标</title>
<style>
.box1{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<!--
1.什么是浮动元素的脱标?
脱标: 脱离标准流
当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
2.浮动元素脱标之后会有什么影响?
如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
-->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
1 什么是浮动元素的脱标
2 浮动元素脱标之后会有什么影响
3 浮动元素的排序规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素排序规则</title>
<style>
.box1{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
}
.box3{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
.box4{
float: left;
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
</head>
<body>
<!--
1.浮动元素排序规则
1.1相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
1.2不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
1.3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
-->
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
1 浮动元素的排序规则是什么
4 浮动元素贴靠现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素贴靠现象</title>
<style>
.father{
width: 400px;
height: 400px;
border: 1px solid #000;
}
.box1{
float: left;
width: 50px;
height: 300px;
background-color: red;
}
.box2{
float: left;
width: 50px;
height: 100px;
background-color: green;
}
.box3{
float: left;
width: 250px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<!--
1.什么是浮动元素贴靠现象?
1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
-->
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
1 什么是浮动元素的贴靠现象
5 浮动元素的字围现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素字围现象</title>
<style>
div{
float: left;
width: 100px;
height: 100px;
/*background-color: red;*/
border: 1px solid #000;
}
p{
width: 500px;
height: 500px;
background-color: yellow;
}
img{
float: left;
}
</style>
</head>
<body>
<!--
1.什么是浮动元素字围现象?
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象
-->
<!--<div></div>-->
<img src="images/girl.jpg" alt="">
<p>1999年-2002年范冰冰一共出演了《青春出动》、《小李飞刀》、《秦始皇》、《中关村风云》、《少年包青天2》《尘埃落定》等十七部电视剧[12] ，以及《河东狮吼》等三部电影[13] 。
2003年在由梁羽生小说改编的电视剧《萍踪侠影》中饰演女主角云蕾。同年在冯小刚执导的贺岁档电影《手机》中饰演女主角武月[14] 。
2004年凭借电影《手机》获得第27届大众电影百花奖最佳女主角奖，同时《手机》也获得大众电影百花奖最佳故事片奖。[2] 9月，出演根据古龙小说改编的古装剧《小鱼儿与花无缺》，饰演女主角铁心兰[15] 。同年出演《大唐芙蓉园》中的杨玉环等五部电视剧，以及电影《千机变2》和《情癫大圣》[16] 。
2005年发行首张个人专辑《刚刚开始》，这张处女大碟由圈内多位音乐人联袂制作，包含了多种风格迥异的音乐元素。[3] 同年主演由张之亮执导的古装片《墨攻》，饰演女主角逸悦。[17]
2006年出演电视剧《封神榜之凤鸣岐山》，饰演女主角苏妲己。之后接连拍摄《苹果》、《导火线》、《心中有鬼》等六部电影[18] 。
2007年2月，主演的电影《苹果》入围第57届柏林国际电影节主
范冰冰
范冰冰(23张)
竞赛单元，导演李玉，女主演范冰冰，男主演佟大为共同出席本届电影节。[19] 6月，范冰冰与华谊约满，自组工作室，投资拍摄民国剧《胭脂雪》，并首次担当制片人，同时饰演女主角文玉禾[20] 。10月，凭借电影《苹果》获得第四届欧亚国际电影节最佳女演员奖。[21] 同年出演《合约情人》、《精舞门》、《新宿事件》等五部电影[22] 。同年凭借电影《心中有鬼》获得第44届台湾电影金马奖最佳女配角[4] 。</p>
</body>
</html>
1 什么是浮动元素的字围效果
6 练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动练习</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
.header{
width: 980px;
height: 100px;
/*background-color: red;*/
margin:0 auto;
}
.header .logo{
width: 250px;
height: 100px;
background-color: pink;
float: left;
}
.header .language{
width: 150px;
height: 50px;
background-color: skyblue;
float: right;
}
.header .nav{
width: 650px;
height: 50px;
background-color: purple;
float: right;
}
.content{
width: 980px;
height: 400px;
/*background-color: green;*/
margin:0 auto;
margin-top: 10px;
}
.content .aside{
width: 320px;
height: 400px;
background-color: yellow;
float: left;
}
.content .article{
width: 650px;
height: 400px;
/*background-color: pink;*/
float: right;
}
.content .article .articleTop{
width: 650px;
height: 350px;
/*background-color: blue;*/
}
.content .article .articleTop .articleTopLeft{
width: 400px;
height: 350px;
/*background-color: red;*/
float: left;
}
.content .article .articleTop .articleTopLeft .new1{
width: 400px;
height: 200px;
background-color: deepskyblue;
}
.content .article .articleTop .articleTopLeft .new2{
width: 400px;
height: 140px;
background-color: tomato;
margin-top: 10px;
}
.content .article .articleTop .articleTopRight{
width: 240px;
height: 350px;
background-color: green;
float: right;
}
.content .article .articleBottom{
width: 650px;
height: 40px;
background-color: darkgoldenrod;
margin-top: 10px;
}
.footer{
width: 980px;
height: 40px;
background-color: tomato;
margin:0 auto;
margin-top:10px;
}
</style>
</head>
<body>
<!--
1.开发中什么时候使用标准流什么时候使用浮动流?
垂直方向使用标准流, 水平方向使用浮动流
2.拿到一个很复杂的界面如何入手?
2.1从上至下布局
2.2从外向内布局
2.3水平方向可以先划分为一左一右再对左边或者右边进行进一步布局
-->
<div class="header">
<div class="logo"></div>
<div class="language"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="aside"></div>
<div class="article">
<div class="articleTop">
<div class="articleTopLeft">
<div class="new1"></div>
<div class="new2"></div>
</div>
<div class="articleTopRight"></div>
</div>
<div class="articleBottom"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
