一. 什么是标准文档流

  文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右、由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个属性可以将元素从文本流脱离出来显示。

  标准文档流的围观现象有3种:  

  1.空白折叠现象:多个空格或者换行会被折叠成一个.
  2.高矮不齐,底边对齐.
  3.自动换行,一行写不完,自动换行.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>标准文档流</title>
  6. <style type="text/css">
  7. span{
  8. font-size: 50px;
  9. }
  10. </style>
  11.  
  12. </head>
  13. <body>
  14. <!-- 文档流指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。 -->
  15. <!-- 标准文档流的微观现象?
  16. 1.空白折叠现象:多个空格或者换行会被折叠成一个.
  17. 2.高矮不齐,底边对齐.
  18. 3.自动换行,一行写不完,自动换行.
  19.  
  20. -->
  21. <div>
  22. 你好 你好
  23.  
  24. 你好
  25. </div>
  26. <div>
  27. 你好好你好好你好好<span>姚明</span>好你好好你好好你好好你好好
  28. </div>
  29. </body>
  30. </html>

3种微观现象

二. 元素间转换

使用display:block,inline,inline-block

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>块级元素和行内元素转换</title>
  6. <style type="text/css">
  7. /*块状元素转换成行内元素*/
  8. .box1{
  9. display: inline;
  10. width: 200px;
  11. height: 30px;
  12. border: 3px solid red;
  13. }
  14. .box2{
  15. width: 200px;
  16. height: 30px;
  17. font-size: 30px;
  18. border: 3px solid green;
  19. margin-top: 10px;
  20. }
  21. /*行内元素转换成块级元素*/
  22. span{
  23. background-color: green;
  24. width:50px;
  25. margin-top:10px;
  26. display: block;
  27. /*隐藏标签,彻底的隐藏标签,原来标签的位置会被后面的内容覆盖掉,不占用原来的位置*/
  28. /*display: none;*/
  29. /*只隐藏标签内容,保留标签的区域大小,占用原来的位置.*/
  30. visibility: hidden;
  31. }
  32. /*块状元素转换成行内块元素*/
  33. /*.box3{
  34. display: inline-block;
  35. margin-top: 10px;
  36. width: 200px;
  37. height: 30px;
  38. border: 3px solid red;
  39. }*/
  40. </style>
  41. </head>
  42. <body>
  43. <div class="box1">内容1</div>
  44. <div class="box1">内容1</div>
  45. <div class="box2">内容2</div>
  46. <div class="box3">内容3</div>
  47. <div class="box3">内容3</div>
  48. <div class="box3">内容3</div>
  49. <span>中国</span>
  50. <span>中国</span>
  51. <img src="./1.png" alt="">
  52. <img src="./1.png" alt="">
  53. </body>
  54. </html>

块级元素和行内元素转换

三. 浮动(float)

  浮动是css布局中使用最多的属性!

  定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

  浮动的实际用途,可设置文字环绕或使元素宽度由内容填充(类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高,那么需要设置父级容器的overflow属性为auto,使其自动撑满。

  浮动的4个特点:    

    1.浮动元素的脱标
    2.浮动元素的互相贴靠
    3.浮动元素的"字围"效果
    4.紧凑效果  

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>浮动介绍</title>
  6. <style type="text/css">
  7. *{
  8. border: 0;
  9. margin: 0;
  10. }
  11. .box1{
  12. width: 200px;
  13. height: 200px;
  14. background-color: red;
  15. float: left;
  16. margin-left: 100px;
  17. }
  18. .box2{
  19. width: 200px;
  20. height: 200px;
  21. background-color: green;
  22. float: right;
  23. margin-right: 100px;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <!--浮动是布局中用的最多的一个属性.
  29. 浮动效果:两个元素并排了,且可以设置宽高.
  30. 浮动的三个特点:
  31. 1.浮动元素的脱标
  32. 2.浮动元素的互相贴靠
  33. 3.浮动元素的"字围"效果
  34. 4.紧凑效果
  35. -->
  36. <div class="box1"></div>
  37. <div class="box2"></div>
  38. </body>
  39. </html>

浮动 小例子

 

  • 浮动布局:

    • float:left/right;
    • 特点:
      • 元素浮动之后不占据原来的位置(脱标);
      • 浮动的盒子在一行上显示;
      • 行内元素浮动之后转换为行内块元素(不推荐使用,转行内块元素最好使用display:inline-block);
    • 浮动的作用:
      • 文本绕图(文字环绕图片):文字和浮动元素没有层叠关系,文字不参与浮动;
      • 制作导航;
      • 网页布局;

  清除浮动

  • 清除浮动不是不使用浮动,而是清除浮动所产生的不良影响(当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误),清除浮动使用关键字clear:left/right/both;,工作中使用的最多的是clear:both;
  • 清除浮动方法:
    1. 额外标签法(内墙法):在最后一个浮动元素后添加标签:<div style="clear:both"></div>,但是工作中一般不使用这样的方法;
    2. 给父级元素使用overflow:hidden(bfc),有弊端:当内容出了盒子,就会被裁剪掉;详细介绍:W3C之overflow
    3. 伪元素清除浮动,使用最多,最完美:
    4. 给父元素设置高度(一般不使用)

 

 清除浮动例子:其中overflow和after经常用.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>内墙法</title>
  6. <style type="text/css">
  7. *{
  8. padding: 0;
  9. margin: 0;
  10. }
  11. ul{
  12. list-style: none;
  13. }
  14. /*父盒子不设置高度.和父盒子统计的盒子会顶边显示.*/
  15. div{
  16. width: 400px;
  17. /*给父盒子设置高度,即可解决一些浮动带来的问题.*/
  18. /*height: 40px;*/
  19. }
  20. div ul li{
  21. float: left;
  22. height: 40px;
  23. width: 100px;
  24. background-color: green;
  25. }
  26. .box{
  27. width: 500px;
  28. height: 100px;
  29. background-color: pink;
  30. }
  31. .clear{
  32. clear: both;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div>
  38. <ul>
  39. <li>python</li>
  40. <li>web</li>
  41. <li>linux</li>
  42. <!-- 给浮动元素最后面添加一个空的div并且该div不浮动.然后设置css属性clear:both,就可以清除别的标签对本身的浮动影响.此方法又名 内墙法.
  43. 缺点:每个清除浮动的标签都要添加一个空的div,代码太冗余了. -->
  44. <div class="clear"></div>
  45. </ul>
  46.  
  47. </div>
  48.  
  49. <div class="box">
  50.  
  51. </div>
  52. </body>
  53. </html>

内墙法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>overflow方法</title>
  6. <style type="text/css">
  7. *{
  8. padding: 0;
  9. margin: 0;
  10. }
  11. ul{
  12. list-style: none;
  13. }
  14. /*父盒子不设置高度.和父盒子统计的盒子会顶边显示.*/
  15. .box{
  16. width: 400px;
  17. /*overflow:hidden方法*/
  18. overflow: hidden;
  19. /*给父盒子设置高度,即可解决一些浮动带来的问题.*/
  20. /*height: 40px;*/
  21. }
  22. .box ul li{
  23. float: left;
  24. height: 40px;
  25. width: 100px;
  26. background-color: green;
  27. }
  28. .box2{
  29. width: 500px;
  30. height: 100px;
  31. background-color: pink;
  32. }
  33.  
  34. </style>
  35. </head>
  36. <body>
  37. <div class="box">
  38. <ul>
  39. <li>python</li>
  40. <li>web</li>
  41. <li>linux</li>
  42.  
  43. </ul>
  44.  
  45. </div>
  46.  
  47. <div class="box2">
  48.  
  49. </div>
  50. </body>
  51. </html>

overflow方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>伪元素法</title>
  6. <style type="text/css">
  7. *{
  8. padding: 0;
  9. margin: 0;
  10. }
  11. ul{
  12. list-style: none;
  13. }
  14. /*父盒子不设置高度.和父盒子统计的盒子会顶边显示.*/
  15. div{
  16. width: 400px;
  17. }
  18. div ul li{
  19. float: left;
  20. height: 40px;
  21. width: 100px;
  22. background-color: green;
  23. }
  24. .box{
  25. width: 500px;
  26. height: 100px;
  27. background-color: pink;
  28. }
  29. .clearfix:after{
  30. /*下面3句是after方法清除浮动必须写的*/
  31. content: ".";
  32. clear: both;
  33. display: block;
  34. /*content有内容"."时,也可以写成5句*/
  35. height: 0;
  36. visibility: hidden;
  37. }
  38.  
  39. </style>
  40. </head>
  41. <body>
  42. <div class="clearfix">
  43. <ul>
  44. <li>python</li>
  45. <li>web</li>
  46. <li>linux</li>
  47.  
  48. </ul>
  49.  
  50. </div>
  51.  
  52. <div class="box">
  53.  
  54. </div>
  55. </body>
  56. </html>

伪元素after清除法

四. margin塌陷

  什么是margin塌陷?

  当2个同级盒子,设置垂直方向上的margin,以较大的那个为准.这就称为塌陷.
  注意:浮动的同级盒子不塌陷.
  注意:同级盒子,左右不塌陷.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>margin的塌陷</title>
  6. <style type="text/css">
  7. *{
  8. padding: 0;
  9. margin: 0;
  10. }
  11. .box1{
  12. width: 300px;
  13. height: 200px;
  14. margin-bottom: 20px;
  15. background-color: red;
  16. }
  17. /* box1和box2形成了塌陷,此时他俩的上下间距是50px */
  18. .box2{
  19. width: 400px;
  20. height: 200px;
  21. margin-top: 50px;
  22. background-color: green;
  23. }
  24. span{
  25. background-color: greenyellow;
  26. }
  27. span.a{
  28. margin-right: 20px;
  29. }
  30. span.b{
  31. margin-left: 20px;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="father">
  37. <!-- 当2个同级盒子,设置垂直方向上的margin,以较大的那个为准.这就称为塌陷.
  38. 注意:浮动的同级盒子不塌陷.
  39. 注意:同级盒子,左右不塌陷.
  40. -->
  41. <div class="box1"></div>
  42. <div class="box2"></div>
  43.  
  44. <span class="a">内容</span>
  45. <span class="b">内容</span>
  46. </div>
  47. </body>
  48. </html>

margin塌陷例子

  

Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题的更多相关文章

  1. 11-[CSS]-标准文档流,display,浮动,清除浮动,overflow

    1.标准文档流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. day 41 标准文档流 浮动

    一.标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 标准文档 ...

  3. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  4. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  5. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  6. 前端css盒模型及标准文档流及浮动问题

    1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...

  7. 页面标准文档流、浮动层、float属性(转)

    CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块 ...

  8. 浅谈,html\css脱离标准文档流相关

    (个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相 ...

  9. CSS层叠的问题、标准文档流、伪类选择器

    一.层叠的问题 CSS有两个性质: 1.继承性 2.层叠性:选择器的一种选择能力,谁的权重大就选谁 层叠性又分为: 1).选不中:走继承性  (font.color.text.) 继承性的权重是0 若 ...

随机推荐

  1. 【转】Android播放音频MediaPlayer的几种方式介绍

    接下来笔者介绍一下Android中播放音频的几种方式,android.media包下面包含了Android开发中媒体类,当然笔者不会依次去介绍,下面介绍几个音频播放中常用的类: 1.使用MediaPl ...

  2. Linux CentOS开机启动项设置命令:chkconfig

    1.开机启动+++crontab 定时执行(定时执行可参考:https://www.cnblogs.com/prefectjava/p/9399552.html)可实现自动化运行的目的,简化了维护人员 ...

  3. Java设计模式——适配器模式(Adapter)

    目的:把源类型适配为目标类型,以适应客户端(Client)的需求:此处我们把目标接口的调用方视为客户端 使用场景:需要对类型进行由源类型到目标类型转换的场景中 前置条件:已有客户端 //Client ...

  4. vue的项目结构记录

    vue的项目结构 不知道大家有没这样的情况,面对刚配置好的脚手架,创建的文件不知道该放哪个文件下,导致后面开发一些文件不好找,不利于维护. 接下来我说说我项目中的一些文件: 首先是components ...

  5. 在MongoDB中创建一个索引而性能提升1000倍的小例子

    在https://www.cnblogs.com/xuliuzai/p/9965229.html的博文中我们介绍了MongoDB的常见索引的创建语法.部分同学还想看看MongoDB的威力到底有多大,所 ...

  6. 【原】Java学习笔记015 - 面向对象

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 传递 值类型参数 ...

  7. c/c++ 拷贝控制 右值与const引用

    拷贝控制 右值与const引用 背景:当一个函数的返回值是自定义类型时,调用侧用什么类型接收?? 1,如果自定义类型的拷贝构造函数的参数用const修饰了:可以用下面的方式接收. Test t2 = ...

  8. android SDK 无法更新

    android-windows-sdk无法更新解决办法:   1.在host文件新增如下配置 (host文件位置:c:\Windows\System32\drivers\etc文件夹下面,用文本编辑器 ...

  9. Zabbix监控USG6300防火墙及交换机

    1.登录防火墙直接在web上面配置SNMP,只读团体名.读写团体名.Trap接收主机.安全名,点击应用完成防火墙上面的SNMP配置,如果你的命令行敲得6,可以使用命令行敲,配置效果一样,交换机没有这么 ...

  10. Saltstack_使用指南02_远程执行-验证

    1. 主机规划 2. Master与哪些minion通信 2.1. Master与哪些minion正常通信 [root@salt100 ~]# salt '*' test.ping salt100: ...