前端（五）之display 总结与浮动
前端之浮动布局、清浮动
display 总结
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 总结</title>
<style type="text/css">
/*1. 同行显示，就相当于纯文本，当一行显示不下，那么显示不下的（字）就会自动换行，和纯文本的区别就是有标签整体的概念，标签与标签间有一个空格的隔断*/
/*2. 支持部分 css 样式，不支持宽高 | 不支持行高，行高会映射到父级 block 标签 | 不支持 margin 上下*/
/*3. content 由文本内容撑开*/
/*4. inline 标签只嵌套 inline 标签*/
abc {
display: inline;
background-color: orange;
width: 200px;
height: 200px;
/*line-height: 300px;*/
margin-top: 30px;
margin-bottom: 30px;
}
</style>
<style type="text/css">
/*1. 同行显示，就相当于纯文本，标签会作为一个整体换行显示*/
/*2. 支持所有 css 样式，*/
/*3. content 默认由文本（图片）内容撑开，也可以自定义宽高，当自定义宽高后一定会采用自定义宽高（显示区域不足，内容会在标签内部换行显示，可能超出显示区域）*/
/*4. inline-block 标签不建议嵌套任意标签*/
.d2 {
background: pink;
}
def {
display: inline-block;
background: blue;
width: 200px;
height: 200px;
}
</style>
<style type="text/css">
/*1. 异行显示，不管自身区域多大都会独占一行*/
/*2. 支持所有css 样式，*/
/*3. width默认继承父级，height由内容（文本、图片、子标签）撑开，当设置自定义宽高后一定采用自定义宽高*/
/*4. block 标签可以嵌套任意标签*/
.d3 {
background: brown;
}
opq {
display: block;
background: cyan;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="d2">
<abc> 自定义标签</abc>
<abc> 自定义标签</abc>
<abc> 自定义标签</abc>
</div>
<div class="d2">
<def>自定义标签</def>
<def>自定义标签</def>
<def>自定义标签</def>
</div>
<div class="d3">
<opq>自定义标签</opq>
<opq>自定义标签</opq>
<opq>自定义标签</opq>
</div>
<!-- inline-block 不建议作为结构|布局层理由 -->
<style type="text/css">
xyz {
display: inline-block;
width: 200px;
height: 200px;
background: yellow;
}
xyz {
/*文本垂直方向控制属性*/
vertical-align: top;
}
.x2 {
line-height: 200px;
}
</style>
<div class="d4">
<xyz class="x1">一段文本</xyz>
<xyz class="x2">两段文本</xyz>
<xyz class="x3">三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本</xyz>
</div>
</body>
</html>
overflow在处理超出内容中的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
div {
width: 50px;
height: 100px;
}
.d1 {
background: red;
}
.d2 {
background: orange;
}
.d2 {
/*margin-top: -50px;*/
}
</style>
<style type="text/css">
.b1 {
background: yellow;
/*overflow:处理内容超出盒子显示区域*/
/* auto：自适应，内容超出，滚动显示超出部分，不超出则正常显示*/
/*scroll：一直采用滚动方式显示*/
/*overflow: scroll;*/
/*hidden：隐藏超出盒子显示范围的内容*/
overflow: hidden;
}
/*注：根据文本的具体超出范围，横向纵向均可能出现滚动条*/
.b2 {
background: cyan;
overflow: scroll;
}
</style>
</head>
<body>
<!-- 文本层要高于背景层 -->
<div class="d1">我是文本我是</div>
<div class="d2">我是文本我是</div>
<!-- 问题：内容（文本、图片、子标签）会超出盒子的显示区域 -->
<div class="b1">我是文本我是我是文本我是我是文本我是我是文本我是我是文本我是</div>
<div class="b2">sdfsafafasdfafasdfsdfsafafasdfafasdfsdfsafafasdfafasdfsdfsafafasdfafasdfsdfsafafasdfafasdf</div>
</body>
</html>
浮动
浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style type="text/css">
.temp {
width: 200px;
height: 200px;
background: orange;
/*Box自身水平方向的位置由margin左或右决定(具体已经参照BFC方位)，属于同一个BFC的两个相邻Box的margin会发生叠加。*/
margin-right: 100px;
float: right;
}
/*<!-- float：浮动布局，改变 bfc 的参照方位，就可以改变盒子的排列方式 -->*/
/*<!-- 为什么要使用：块级盒子就会同行显示 -->*/
/*float: left | right*/
.box {
width: 100px;
height: 100px;
background: orange;
font: 900 40px/100px 'STSong';
text-align: center;
}
.box:nth-child(2n) {
background: red;
}
.box {
float: left;
}
/*注：浮动布局的横向显示范围由父级width 决定，当一行显示不下时会自动换行，排列方式（起点）还是遵循 BFC 参照方位 => 固定了父级width 也就固定了浮动布局的行数*/
</style>
</head>
<body>
<div class="temp"></div>
<div class="wraper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</body>
</html>
清浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清浮动</title>
<style type="text/css">
.outter {
/*height: 200px;*/
background: orange;
}
/*清浮动：让父级（有浮动子级）获得一个合适的高度*/
/*子标签设置浮动 => 导致子标签不完全脱离文档流*/
/*脱离文档流：产生了新的 BFC，（不再关联父级宽高）*/
/*浮动的子级，默认不会获取父级宽度，也不会撑开父级高度*/
/*不完全：父级在做清浮动操作后，可以重新被子级撑开高度*/
/*当父级没有下兄弟标签可以不做清浮动，但清浮动操作应该在每一次发生浮动后均需要处理*/
.inner {
width: 200px;
height: 200px;
background: red;
float: left;
border-radius: 50%;
}
/*清浮动操作*/
.outter:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
height: 200px;
background: cyan;
}
</style>
<style type="text/css">
/*盒子先加载 before，在加载自身（文本、图片、子标签），最后加载after*/
.div:before {
content: '123';
}
.div:after {
content: '456';
}
</style>
</head>
<body>
<!-- 清浮动：清除浮动导致的布局问题 -->
<div class="outter">
<div class="inner"></div>
</div>
<div class="box"></div>
<div class="div">原文本</div>
</body>
</html>
清浮动方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清浮动方式</title>
<style type="text/css">
.sub, .box {
width: 200px;
height: 200px;
background: orange;
}
.box {
background: red;
}
.sub {
float: left;
}
/*1. 设置死高度*/
.sup {
/*height: 200px;*/
}
/*2. overflow*/
.sup {
background: cyan;
overflow: hidden;
}
/*3. 兄弟标签清浮动*/
.box {
/*clear: left;*/
clear: both;
}
/*4. 伪类清浮动*/
.sup {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 清浮动：使父级获取一个合适高度 -->
<!-- 通常情况下在子级浮动，父级不会被撑开高度在该问题发生之后做清浮动操作 -->
<!-- 在发生浮动之前，可以通过设置父级的高度来避免浮动问题。-->
<div class="sup">
<div class="sub"></div>
</div>
<div class="box"></div>
<style type="text/css">
.bb {
width: 100px;
/*手动设置了死高度，才会产生超出高度的内容为无用内容*/
/*height: 50px;*/
background: pink;
overflow: hidden;
}
</style>
<div class="bb">hao</div>
</body>
</html>
总结
一 display 总结
/* inline */
/*1. 同行显示，就相当于纯文本，当一行显示不下，那么显示不下的（字）就会自动换行，和纯文本的区别就是有标签整体的概念，标签与标签间有一个空格的隔断*/
/*2. 支持部分 css 样式，不支持宽高 | 不支持行高，行高会映射到父级 block 标签 | 不支持 margin 上下*/
/*3. content 由文本内容撑开*/
/*4. inline 标签只嵌套 inline 标签*/
/* inline-block */
/*1. 同行显示，就相当于纯文本，标签会作为一个整体换行显示*/
/*2. 支持所有 css 样式，*/
/*3. content 默认由文本（图片）内容撑开，也可以自定义宽高，当自定义宽高后一定会采用自定义宽高（显示区域不足，内容会在标签内部换行显示，可能超出显示区域）*/
/*4. inline-block 标签不建议嵌套任意标签*/
/* block */
/*1. 异行显示，不管自身区域多大都会独占一行*/
/*2. 支持所有css 样式，*/
/*3. width默认继承父级，height由内容（文本、图片、子标签）撑开，当设置自定义宽高后一定采用自定义宽高*/
/*4. block 标签可以嵌套任意标签*/
二 overflow 知识
/* overflow：处理内容超出盒子显示区域 */
overflow: auto | scroll | hidden
/*overflow:处理内容超出盒子显示区域*/
/* auto：自适应，内容超出，滚动显示超出部分，不超出则正常显示*/
/*scroll：一直采用滚动方式显示*/
/*overflow: scroll;*/
/*hidden：隐藏超出盒子显示范围的内容*/
/*注：根据文本的具体超出范围，横向纵向均可能出现滚动条*/
三 浮动布局
/*float：浮动布局，改变 bfc 的参照方位，就可以改变盒子的排列方式 */
/*为什么要使用：块级盒子就会同行显示 */
float: left | right; 左 | 右 浮动
/*left: BFC 参照方向从左向右*/
/*right: BFC 参照方向从右向左*/
/*浮动的区域由父级的 width 决定*/
四 清浮动
浮动问题：子级浮动了，不再撑开父级的高度，那么父级如果拥有兄弟标签可能就会出现布局重叠
清浮动：解决上面的问题，通过使父级获取一个合适的高度，这样子级就不会和父级的兄弟布局发生重叠
清浮动的本质是：left | right | both
/* 清浮动的四种方式*/
1. 设置腹肌的死高度
2. 通过兄弟设置 clear: both
3. 设置父级 overflow 属性为 hidden
.sup {
overflow: hidden;
}
4. 通过父级: after 伪类
.sup {
content: '';
display: block;
clear: both;
}
前端（五）之display 总结与浮动的更多相关文章
- 盒模型的属性丶display显示丶浮动
一丶盒模型的属性(重要) 1.padding padding是标准文档流,父子之间调整位置 <!DOCTYPE html> <html> <head> <me ...
- 前端布局神器 display:flex
前端布局神器display:flex 一直使用flex布局,屡试不爽,但是总是记不住一些属性,这里写来记录一下. 2009年,W3C提出了一种新的方案--Flex布局,可以简便.完整.响应式地实现 ...
- 前端CSS3布局display:grid用法
前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...
- 前端CSS3布局display:flex用法
前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...
- 前端之CSS——盒子模型和浮动
一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- 第五节 HTML&CSS -- 关于浮动和清除浮动的解说，以及两个大坑不要踩
1.随便唠叨几句 这一节课我会对浮动元素和怎样清除浮动相关的技术进行一个讲解,同时,我会列举一些我们前端开发中常见的坑,希望大家以后不要在这些地方犯错.在开始今天的课程之前,有一个东西我需要先讲一 ...
- web前端学习笔记(CSS盒子的浮动)
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. CSS中有一个float属性 ...
- [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...
- 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理
在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...
随机推荐
- Java WebService 简单实例使用JDK
原文地址:http://www.cnblogs.com/jasoncc/archive/2011/12/22/2296052.html 什么是WebServices? 它是一种构建应用程序的普 ...
- 交叉编译ffmpeg(hi3520d)
./configure \--prefix=/usr/local/ffmpeg-3520D \--cross-prefix=/opt/hisi-linux-nptl/arm-hisiv100-linu ...
- 将表格添加到Word文档中 ,包括表格样式设置
创建 Table 对象并设置其属性 在您将表格插入文档之前,必须创建 Table 对象并设置其属性. 要设置表格的属性,请创建TableProperties对象并为其提供值. TablePropert ...
- Python Moment.js api
moment.js(js date)日期格式化处理插件强大,官方网站:http://momentjs.com/你也可以查看官方网站E文原版moment.js api.当前日期格式化 moment(). ...
- html快速编写
1. 嵌套操作---------- 子操作: > div>ul>li <div> <ul> <li></li> </ul> ...
- springDatasolr 排序
String sortValue = (String) searchMap.get("sort");// ASC DESC String sortField = (String) ...
- Akka-CQRS（0）- 基于akka-cluster的读写分离框架，构建gRPC移动应用后端架构
上一篇我们讨论了akka-cluster的分片(sharding)技术.在提供的例子中感觉到akka这样的分布式系统工具特别适合支持大量的带有内置状态的,相对独立完整的程序在集群节点上分布运算.这里重 ...
- ECShop全系列版本远程代码执行高危漏洞分析+实战提权
漏洞概述 ECShop的user.php文件中的display函数的模版变量可控,导致注入,配合注入可达到远程代码执行.攻击者无需登录站点等操作,可以直接远程写入webshell,危害严重. 漏洞评级 ...
- Javascript高级编程学习笔记（41）—— DOM（7）DocumentFragment类型
DocumentFragment类型 除开昨天我们了解的两种不常用的类型之外 今天我们要介绍的两种类型可以说使用频率不输于前面最常用的几种元素类型 首先就是DocumentFragment类型 有些小 ...
- ubuntu18.04安装mongoDB
STEP 1: 在终端输入GPK码 $ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334B ...