Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题
一. 什么是标准文档流
文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右、由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个属性可以将元素从文本流脱离出来显示。
标准文档流的围观现象有3种:
1.空白折叠现象:多个空格或者换行会被折叠成一个.
2.高矮不齐,底边对齐.
3.自动换行,一行写不完,自动换行.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>标准文档流</title>
- <style type="text/css">
- span{
- font-size: 50px;
- }
- </style>
- </head>
- <body>
- <!-- 文档流指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。 -->
- <!-- 标准文档流的微观现象?
- 1.空白折叠现象:多个空格或者换行会被折叠成一个.
- 2.高矮不齐,底边对齐.
- 3.自动换行,一行写不完,自动换行.
- -->
- <div>
- 你好 你好
- 你好
- </div>
- <div>
- 你好好你好好你好好<span>姚明</span>好你好好你好好你好好你好好
- </div>
- </body>
- </html>
3种微观现象
二. 元素间转换
使用display:block,inline,inline-block
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>块级元素和行内元素转换</title>
- <style type="text/css">
- /*块状元素转换成行内元素*/
- .box1{
- display: inline;
- width: 200px;
- height: 30px;
- border: 3px solid red;
- }
- .box2{
- width: 200px;
- height: 30px;
- font-size: 30px;
- border: 3px solid green;
- margin-top: 10px;
- }
- /*行内元素转换成块级元素*/
- span{
- background-color: green;
- width:50px;
- margin-top:10px;
- display: block;
- /*隐藏标签,彻底的隐藏标签,原来标签的位置会被后面的内容覆盖掉,不占用原来的位置*/
- /*display: none;*/
- /*只隐藏标签内容,保留标签的区域大小,占用原来的位置.*/
- visibility: hidden;
- }
- /*块状元素转换成行内块元素*/
- /*.box3{
- display: inline-block;
- margin-top: 10px;
- width: 200px;
- height: 30px;
- border: 3px solid red;
- }*/
- </style>
- </head>
- <body>
- <div class="box1">内容1</div>
- <div class="box1">内容1</div>
- <div class="box2">内容2</div>
- <div class="box3">内容3</div>
- <div class="box3">内容3</div>
- <div class="box3">内容3</div>
- <span>中国</span>
- <span>中国</span>
- <img src="./1.png" alt="">
- <img src="./1.png" alt="">
- </body>
- </html>
块级元素和行内元素转换
三. 浮动(float)
浮动是css布局中使用最多的属性!
定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
浮动的实际用途,可设置文字环绕或使元素宽度由内容填充(类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高,那么需要设置父级容器的overflow
属性为auto
,使其自动撑满。
浮动的4个特点:
1.浮动元素的脱标
2.浮动元素的互相贴靠
3.浮动元素的"字围"效果
4.紧凑效果
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>浮动介绍</title>
- <style type="text/css">
- *{
- border: 0;
- margin: 0;
- }
- .box1{
- width: 200px;
- height: 200px;
- background-color: red;
- float: left;
- margin-left: 100px;
- }
- .box2{
- width: 200px;
- height: 200px;
- background-color: green;
- float: right;
- margin-right: 100px;
- }
- </style>
- </head>
- <body>
- <!--浮动是布局中用的最多的一个属性.
- 浮动效果:两个元素并排了,且可以设置宽高.
- 浮动的三个特点:
- 1.浮动元素的脱标
- 2.浮动元素的互相贴靠
- 3.浮动元素的"字围"效果
- 4.紧凑效果
- -->
- <div class="box1"></div>
- <div class="box2"></div>
- </body>
- </html>
浮动 小例子
浮动布局:
- float:left/right;
- 特点:
- 元素浮动之后不占据原来的位置(脱标);
- 浮动的盒子在一行上显示;
- 行内元素浮动之后转换为行内块元素(不推荐使用,转行内块元素最好使用
display:inline-block
);
- 浮动的作用:
- 文本绕图(文字环绕图片):文字和浮动元素没有层叠关系,文字不参与浮动;
- 制作导航;
- 网页布局;
清除浮动
- 清除浮动不是不使用浮动,而是清除浮动所产生的不良影响(当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误),清除浮动使用关键字
clear:left/right/both;
,工作中使用的最多的是clear:both;
; - 清除浮动方法:
- 额外标签法(内墙法):在最后一个浮动元素后添加标签:
<div style="clear:both"></div>
,但是工作中一般不使用这样的方法; - 给父级元素使用
overflow:hidden
(bfc),有弊端:当内容出了盒子,就会被裁剪掉;详细介绍:W3C之overflow - 伪元素清除浮动,使用最多,最完美:
- 给父元素设置高度(一般不使用)
- 额外标签法(内墙法):在最后一个浮动元素后添加标签:
清除浮动例子:其中overflow和after经常用.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>内墙法</title>
- <style type="text/css">
- *{
- padding: 0;
- margin: 0;
- }
- ul{
- list-style: none;
- }
- /*父盒子不设置高度.和父盒子统计的盒子会顶边显示.*/
- div{
- width: 400px;
- /*给父盒子设置高度,即可解决一些浮动带来的问题.*/
- /*height: 40px;*/
- }
- div ul li{
- float: left;
- height: 40px;
- width: 100px;
- background-color: green;
- }
- .box{
- width: 500px;
- height: 100px;
- background-color: pink;
- }
- .clear{
- clear: both;
- }
- </style>
- </head>
- <body>
- <div>
- <ul>
- <li>python</li>
- <li>web</li>
- <li>linux</li>
- <!-- 给浮动元素最后面添加一个空的div并且该div不浮动.然后设置css属性clear:both,就可以清除别的标签对本身的浮动影响.此方法又名 内墙法.
- 缺点:每个清除浮动的标签都要添加一个空的div,代码太冗余了. -->
- <div class="clear"></div>
- </ul>
- </div>
- <div class="box">
- </div>
- </body>
- </html>
内墙法
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>overflow方法</title>
- <style type="text/css">
- *{
- padding: 0;
- margin: 0;
- }
- ul{
- list-style: none;
- }
- /*父盒子不设置高度.和父盒子统计的盒子会顶边显示.*/
- .box{
- width: 400px;
- /*overflow:hidden方法*/
- overflow: hidden;
- /*给父盒子设置高度,即可解决一些浮动带来的问题.*/
- /*height: 40px;*/
- }
- .box ul li{
- float: left;
- height: 40px;
- width: 100px;
- background-color: green;
- }
- .box2{
- width: 500px;
- height: 100px;
- background-color: pink;
- }
- </style>
- </head>
- <body>
- <div class="box">
- <ul>
- <li>python</li>
- <li>web</li>
- <li>linux</li>
- </ul>
- </div>
- <div class="box2">
- </div>
- </body>
- </html>
overflow方法
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>伪元素法</title>
- <style type="text/css">
- *{
- padding: 0;
- margin: 0;
- }
- ul{
- list-style: none;
- }
- /*父盒子不设置高度.和父盒子统计的盒子会顶边显示.*/
- div{
- width: 400px;
- }
- div ul li{
- float: left;
- height: 40px;
- width: 100px;
- background-color: green;
- }
- .box{
- width: 500px;
- height: 100px;
- background-color: pink;
- }
- .clearfix:after{
- /*下面3句是after方法清除浮动必须写的*/
- content: ".";
- clear: both;
- display: block;
- /*content有内容"."时,也可以写成5句*/
- height: 0;
- visibility: hidden;
- }
- </style>
- </head>
- <body>
- <div class="clearfix">
- <ul>
- <li>python</li>
- <li>web</li>
- <li>linux</li>
- </ul>
- </div>
- <div class="box">
- </div>
- </body>
- </html>
伪元素after清除法
四. margin塌陷
什么是margin塌陷?
当2个同级盒子,设置垂直方向上的margin,以较大的那个为准.这就称为塌陷.
注意:浮动的同级盒子不塌陷.
注意:同级盒子,左右不塌陷.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>margin的塌陷</title>
- <style type="text/css">
- *{
- padding: 0;
- margin: 0;
- }
- .box1{
- width: 300px;
- height: 200px;
- margin-bottom: 20px;
- background-color: red;
- }
- /* box1和box2形成了塌陷,此时他俩的上下间距是50px */
- .box2{
- width: 400px;
- height: 200px;
- margin-top: 50px;
- background-color: green;
- }
- span{
- background-color: greenyellow;
- }
- span.a{
- margin-right: 20px;
- }
- span.b{
- margin-left: 20px;
- }
- </style>
- </head>
- <body>
- <div class="father">
- <!-- 当2个同级盒子,设置垂直方向上的margin,以较大的那个为准.这就称为塌陷.
- 注意:浮动的同级盒子不塌陷.
- 注意:同级盒子,左右不塌陷.
- -->
- <div class="box1"></div>
- <div class="box2"></div>
- <span class="a">内容</span>
- <span class="b">内容</span>
- </div>
- </body>
- </html>
margin塌陷例子
Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题的更多相关文章
- 11-[CSS]-标准文档流,display,浮动,清除浮动,overflow
1.标准文档流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- day 41 标准文档流 浮动
一.标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 标准文档 ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
- 前端css盒模型及标准文档流及浮动问题
1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...
- 页面标准文档流、浮动层、float属性(转)
CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块 ...
- 浅谈,html\css脱离标准文档流相关
(个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相 ...
- CSS层叠的问题、标准文档流、伪类选择器
一.层叠的问题 CSS有两个性质: 1.继承性 2.层叠性:选择器的一种选择能力,谁的权重大就选谁 层叠性又分为: 1).选不中:走继承性 (font.color.text.) 继承性的权重是0 若 ...
随机推荐
- 【转】Android播放音频MediaPlayer的几种方式介绍
接下来笔者介绍一下Android中播放音频的几种方式,android.media包下面包含了Android开发中媒体类,当然笔者不会依次去介绍,下面介绍几个音频播放中常用的类: 1.使用MediaPl ...
- Linux CentOS开机启动项设置命令:chkconfig
1.开机启动+++crontab 定时执行(定时执行可参考:https://www.cnblogs.com/prefectjava/p/9399552.html)可实现自动化运行的目的,简化了维护人员 ...
- Java设计模式——适配器模式(Adapter)
目的:把源类型适配为目标类型,以适应客户端(Client)的需求:此处我们把目标接口的调用方视为客户端 使用场景:需要对类型进行由源类型到目标类型转换的场景中 前置条件:已有客户端 //Client ...
- vue的项目结构记录
vue的项目结构 不知道大家有没这样的情况,面对刚配置好的脚手架,创建的文件不知道该放哪个文件下,导致后面开发一些文件不好找,不利于维护. 接下来我说说我项目中的一些文件: 首先是components ...
- 在MongoDB中创建一个索引而性能提升1000倍的小例子
在https://www.cnblogs.com/xuliuzai/p/9965229.html的博文中我们介绍了MongoDB的常见索引的创建语法.部分同学还想看看MongoDB的威力到底有多大,所 ...
- 【原】Java学习笔记015 - 面向对象
package cn.temptation; public class Sample01 { public static void main(String[] args) { // 传递 值类型参数 ...
- c/c++ 拷贝控制 右值与const引用
拷贝控制 右值与const引用 背景:当一个函数的返回值是自定义类型时,调用侧用什么类型接收?? 1,如果自定义类型的拷贝构造函数的参数用const修饰了:可以用下面的方式接收. Test t2 = ...
- android SDK 无法更新
android-windows-sdk无法更新解决办法: 1.在host文件新增如下配置 (host文件位置:c:\Windows\System32\drivers\etc文件夹下面,用文本编辑器 ...
- Zabbix监控USG6300防火墙及交换机
1.登录防火墙直接在web上面配置SNMP,只读团体名.读写团体名.Trap接收主机.安全名,点击应用完成防火墙上面的SNMP配置,如果你的命令行敲得6,可以使用命令行敲,配置效果一样,交换机没有这么 ...
- Saltstack_使用指南02_远程执行-验证
1. 主机规划 2. Master与哪些minion通信 2.1. Master与哪些minion正常通信 [root@salt100 ~]# salt '*' test.ping salt100: ...