第十五章 浮动

<!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、水平方向可以先划分为一左一右,再对左边/右边进行进一步布局

内容参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 网页的布局方式 1.什么是网页的布局方式?网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 1.标准流...
    sweetMood阅读 264评论 0 0
  • CSS学习感言: CSS明显比HTML复杂一些,用的时间也多,而且也还有许多迷惑的地方,特别是关于定位和浮动,理解...
    雨夜月风阅读 422评论 0 1
  • 展,当然是为了卖嘛。不过车展旁边的美女或许还是不能带走。新图书馆建成,当然需要新书充实馆藏。这不厦门外图书店就来了...
    少卿足下阅读 505评论 0 2
  • 【日记52】 七月的广东,天气变化比翻书还快,说好的晴天,说下就下。冒着小雨,驱车两个小时,终于来到培训地点,雨中...
    赵静理财阅读 546评论 0 50