<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style media="screen">
/*div,p,h1,span,strong{
border: 1px solid;
}*/
/*.box1 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.box2{
height: 100px;
width: 100px;
background-color: blue;
float: right;
}*/
/*.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}*/
/*.box1{
width: 50px;
height: 50px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
}
.box3{
width: 150px;
height: 150px;
background-color: green;
float: right;
}
.box4{
width: 200px;
height: 200px;
background-color: brown;
float: right;
}*/
/*.father{
width: 100px;
height: 200px;
background-color: brown;
}
.box1{
width: 50px;
height: 100px;
background-color: green;
float: left;
}
.box2{
width: 50px;
height: 50px;
background-color: red;
float: left;
}
.box3{
width: 100px;
height: 50px;
background-color: blue;
float: left;
}*/
/*img{
float: left;
}*/
html{color:#000;background:#FFF}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}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
.header{
width: 980px;
height: 100px;
margin: 0 auto;
}
.header .brownDiv{
width: 250px;
height: 100px;
float: left;
background-color: brown;
}
.header .greenDiv{
width: 150px;
height: 50px;
background-color: green;
float: right;
}
.header .blueDiv {
width: 650px;
height: 50px;
background-color: blue;
float: right;
}
.content{
width: 980px;
height: 400px;
margin: 0 auto;
margin-top: 10px;
}
.content .leftDiv{
width: 320px;
height: 400px;
background-color: yellow;
float: left;
}
.content .rightDiv{
width: 650px;
height: 400px;
float: right;
}
.content .rightDiv .rightTop{
width: 650px;
height: 350px;
}
.content .rightDiv .rightTop .rightTopLeft{
width: 400px;
height: 350px;
float: left;
}
.content .rightDiv .rightTop .rightTopLeft .rightTopLeftTop {
width: 400px;
height: 200px;
background-color: red;
}
.content .rightDiv .rightTop .rightTopLeft .rightTopLeftBottom {
width: 400px;
height: 140px;
background-color: blue;
margin-top: 10px;
}
.content .rightDiv .rightTop .rightTopRight {
width: 240px;
height: 350px;
background-color: green;
float: right;
}
.content .rightDiv .rightBottom{
width: 650px;
height: 40px;
background-color: blue;
margin-top: 10px;
}
.footer{
width: 980px;
height: 40px;
background-color:blue;
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- <div class="">
我是模块
</div>
<p>我是段落</p>
<h1>我是标题</h1>
<span>我是域</span>
<strong>我是强调</strong> -->
<!-- <span class="box1"></span>
<span class="box2"></span> -->
<!-- <div class="box1">
box1
</div>
<div class="box2">
box2
</div>
<div class="box3">
box3
</div>
<div class="box4">
box4
</div> -->
<!-- <div class="father">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div> -->
<!-- ![](../HTML5/0.gif)
<p>宋佳,1980年11月13日出生于黑龙江省哈尔滨市南岗区,毕业于上海戏剧学院表演系,中国女演员,因有同名的前辈女演员宋佳,故多被媒体称为“小宋佳”。2006年出演电影《好奇害死猫》开始崭露头角,并因此获第26届中国电影金鸡奖最佳女配角提名;2012年,出演都市励志剧《那样芬芳》,饰演荣芬芳。同年,宋佳凭借《悬崖》获得第18届上海电视节最佳电视剧女演员奖和第9届中国金鹰电视艺术节“最佳艺术表演女演员奖”;2013年凭借主演电影《萧红》获29届中国电影金鸡奖“最佳女主角”、第9届中美电影节</p> -->
<div class="header">
<div class="brownDiv">
</div>
<div class="greenDiv">
</div>
<div class="blueDiv">
</div>
</div>
<div class="content">
<div class="leftDiv">
</div>
<div class="rightDiv">
<div class="rightTop">
<div class="rightTopLeft">
<div class="rightTopLeftTop">
</div>
<div class="rightTopLeftBottom">
</div>
</div>
<div class="rightTopRight">
</div>
</div>
<div class="rightBottom">
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
第119课 网页布局方式
网页的布局方式其实就是浏览器是如何对网页中的元素进行排版的
1、标准流(文档流/普通流)排版方式
1、1其实浏览器默认的排版方式就是标准的排版方式
1.2在CSS中将元素分为三类,分别是块级元素/行内元素/行内块级元素
1.3在标准流中有两种排版方式,一种是垂直排版,一种是水平排版
垂直排版,如果元素是块级元素,那么就会垂直排版
水平排版,如果元素是行内元素/行内块级元素,那么就会水平排版
2、浮动流排版方式
3、定位流排版方式
第120课 浮动流基本概念
浮动流排版方式
1、浮动流是一种“半脱离标准流”的排版方式
2、浮动流只能水平排版,只可以设置某个元素左对齐或者右对齐。
注意点
1、浮动流没有center居中对齐
2、在浮动流中是不可以使用margin:0 auto;的
特点:
1、在浮动流中不区分块级元素/行内元素/行内块级元素,都可以水平排版
2、在浮动流中不区分块级元素/行内元素/行内块级元素,都可以设置宽高
3、综上所述:浮动流中的元素和标准流中的行内块级元素很像
第121课 浮动元素脱标
元素的脱标:就是元素脱离了标准流
当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标
影响:如果前面一个元素浮动了,而后面一个元素没有浮动,
那么这个时候前面的一个元素就会盖住后面的一个元素
第122课 浮动元素排序规则
1、相同方向上的浮动元素,先浮动的元素显示在前面,后浮动的元素会显示在后面
2、不同方向上的浮动元素,左浮动会找左浮动,右浮动会找右浮动
3、浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来确定
第123课 浮动元素贴靠现象
如果父元素的宽度小于元素的宽度,那么元素就会找他前面一个元素之前的元素,查看宽度是否合适
若果合适,贴着他前面一个元素之前的元素
如果不够,继续寻找,直到找到父元素为止
第124课 浮动元素字围现象
文字会围绕浮动元素显示
第125、126、127 课 浮动练习
垂直方向:标准流
水平方向:浮动流
1、copy 去除margin padding
2、从上到下,从外到内
3、先垂直标准流,水平浮动流
在企业开发中,垂直方向使用标准流,水平方向使用浮动流
复杂界面
1、从上至下布局
2、从外向内布局
3、水平方向可以先划分为一左一右,再对左边/右边进行进一步布局