前端（五）之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的七种常用方法总结和兼容性处理
在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...
随机推荐
- 检测MySQL主从备份是否运行
通过查看 slave 状态,确保 Slave_IO_Running: Yes Slave_SQL_Running: Yes #!/bin/bash#Author:Darius-Dmysql -uro ...
- 传统对象池&AB对象池
前序: Q:为啥需要对象池? A: 游戏中大量出现或销毁对象时会反复的开堆和放堆,程序与内存之间交互过于频繁导致资源的大量浪费 Q: 对象池实现原理? A: 当子对象池没有物体的时候,它会和普通没加对 ...
- navibar记录
@import (reference) "kmc-common.less"; .kmc{ font-family: PingFangSC-Reguxlar; font-weight ...
- .NET简单学习
.NET是一个平台,对用户来说,只要下载了.NET Framework就可以运行.NET程序,获得需要的服务:对开发人员来说,平台对开发有着强有力的支持,方便创作各种应用软件. .NET Framew ...
- 架构（四）Git简介，安装以及相关命令SourceTree
一 Git介绍 1.1 Git是什么? Git是一个分布式版本控制软件: 版本控制:假如开发人员开发了一个a功能,结果项目经理觉得不够需要修改,开发人员又改成了b功能,后来又改成了c功能,但是最终项目 ...
- AVPass技术分析：银行劫持类病毒鼻祖BankBot再度来袭，如何绕过谷歌play的杀毒引擎？
背景 近期,一批伪装成flashlight.vides和game的应用,发布在google play官方应用商店.经钱盾反诈实验室研究发现,该批恶意应用属于新型BankBot.Bankbot家族算得上 ...
- 理解 Linux 的虚拟内存
前言 前不久组内又有一次我比较期待的分享:”Linux 的虚拟内存”.是某天晚上加班时,我们讨论虚拟内存的概念时,leader 发现几位同事对虚拟内存认识不清后,特意给这位同学挑选的主题(笑). 我之 ...
- package-lock.json，我们应该了解
原谅我占2017年12月31日一个坑,后续补上
- 【高速接口-RapidIO】1、RapidIO协议概述
一.RapidIO背景介绍 RapidIO是由Motorola和Mercury等公司率先倡导的一种高性能. 低引脚数. 基于数据包交换的互连体系结构,是为满足和未来高性能嵌入式系统需求而设计的一种开放 ...
- 使用本地缓存快还是使用redis缓存好？
使用本地缓存快还是使用redis缓存好? Redis早已家喻户晓,其性能自不必多说. 但是总有些时候,我们想把性能再提升一点,想着redis是个远程服务,性能也许不够,于是想用本地缓存试试!想法是不错 ...