web开发：清浮动
一、display总结
二、overflow
三、浮动布局
四、清浮动
五、清浮动的方式
一、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: orange;
/*width: 200px;*/
/*height: 200px;*/
/*line-height: 300px;*/
margin-top: 300px;
margin-bottom: 300px;
}
.d1 {
background: red;
}
</style>
<style type="text/css">
/*1.同行显示, 当一行显示不下, 标签会作为一个整体换行显示*/
/*2.支持所有css样式*/
/*3.content默认由文本(图片)内容撑开,也可以自定义宽高, 当自定义宽高后,一定采用自定义宽高(显示区域不足,内容会在标签内容换行显示,可能超出显示区域)*/
/*4.inline-block标签不建议嵌套任意标签*/
.d2 {
background: pink;
}
def {
display: inline-block;
background: blue;
width: 20px;
height: 20px;
}
</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="d1">
<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;
}
.x1 {
height: 100px;
}
.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: cyan;
/* ***** */
/*overflow: 处理内容超出盒子显示区域*/ /*auto: 自适应, 内容超出, 滚动显示超出部分, 不超出则正常显示*/ /*scroll: 一直采用滚动方式显示*/ /*hidden: 隐藏超出盒子显示范围的内容*/
overflow: hidden;
} /*注: 根据文本的具体超出范围, 横向纵向均可能出现滚动条*/
.b2 {
width: 100px;
background: tan;
overflow: scroll;
}
</style>
</head>
<body>
<!-- 文本层要高于背景层 -->
<div class="d1">我是文本我是文本我是文本</div>
<div class="d2">我是文本我是文本我是文本</div> <!-- 问题: 内容(文本,图片,子标签)会超出盒子的显示区域 -->
<div class="b1">我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</div>
<div class="b2">asdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsda</div>
</body>
</html>
三、浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style type="text/css">
body {
/*background: cyan;*/
}
.temp {
width: 200px;
height: 200px;
background: orange; /*Box自身水平方向的位置由margin左或右决定(具体依据: 参照BFC方位)，属于同一个BFC的两个相邻Box的margin会发生叠加。*/
margin-right: 100px;
float: right;
}
</style>
<style type="text/css">
/*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: right;
}
.box:last-child {
/*盒模型布局可以在其他布局的基础上进行盒子位置微调*/
/*margin-left: 10px;*/
}
/*注: 浮动布局的横向显示范围由父级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">
.outer {
/*height: 200px;*/
background: orange;
}
/*清浮动: 让父级(有浮动子级)获得一个合适的高度*/ /*子标签设置浮动 => 子标签不完全脱离文档流*/ /*脱离文档流: 产生可新的BFC, (不再关联父级宽高)*/
/*浮动的子级, 默认不会获取父级宽度, 也不会撑开父级高度*/ /*不完全: 父级在做清浮动操作后,可以重新被子级撑开高度*/ /*当父级没有下兄弟标签, 可以不做清浮动操作, 但清浮动操作应该在每一次发送浮动后均需要处理的*/
.inner {
width: 200px;
height: 200px;
background: red;
float: left;
border-radius: 50%;
}
/*清浮动操作*/
.outer:after {
content: "";
display: block;
clear: both;
} .box {
width: 200px;
height: 200px;
background: cyan;
/*margin-top: -200px;*/
}
</style>
<style type="text/css">
/*盒子先加载:before, 再加载自身(文本,图片,子标签), 最后加载:after*/
.div:before {
content: "123"
}
.div:after {
content: "456"
}
</style>
</head>
<body>
<!-- 清浮动: 清除浮动导致的布局问题 -->
<div class="outer">
<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;
} /*① 设置死高度*/
.sup {
/*height: 200px;*/
}
/*② overflow*/
.sup {
/*background: cyan;*/
/*隐藏无用的内容*/
/*overflow: hidden;*/
}
/*③ 兄弟标签清浮动*/
.box {
/*清浮动属性: left | right | both*/
/*clear: both;*/
}
/*④ 伪类清浮动*/
.sup:after {
content: "";
display: block;
clear: both;
}
/*before => 自身(子内容)(会产生问题) => after => 兄弟*/
</style>
</head>
<body>
<!-- 清浮动: 使父级获取一个合适高度 -->
<!-- 通常情况下在子级浮动,父级不会被撑开高度在该问题发生之后做清浮动操作 --> <!-- 在发生浮动之前, 可以通过设置父级的高度来避免浮动问题 -->
<div class="sup">
<div class="sub"></div>
<!-- <div class="sub"></div>
<div class="sub" style="height: 300px"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div> -->
</div>
<div class="box"></div> <!-- overflow: hidden -->
<style type="text/css">
.bb {
width: 100px;
/*手动设置了死高度,才会产生超出高度的内容为无用内容*/
/*height: 50px;*/
background: pink;
overflow: hidden;
}
</style>
<!-- <div class="bb">好的好的好的好的好的好的好的好的好的好的</div> -->
</body>
</html>
web开发：清浮动的更多相关文章
- PHP和MySQL Web开发(原书第4版) 高清PDF+源代码
PHP和MySQL Web开发(原书第4版) 高清PDF+源代码 [日期:2014-08-06] 来源:Linux社区 作者:Linux [字体:大 中 小] 内容简介 <PHP和My ...
- 《Python Web开发学习实录》高清PDF版|百度网盘免费下载|Python Web开发学习实录
<Python Web开发学习实录>高清PDF版|百度网盘免费下载|Python Web开发学习实录 提取码:9w3o 内容简介 Python是目前流行的动态脚本语言之一. 李勇,本书共1 ...
- PHP和MySQL Web开发 原书第4版 高清文字版，有目录，附带源码
PHP和MySQL Web开发 原书第4版:http://yunpan.cn/QCWIS25zmYTAn 提取码 fd9b PHP和MySQL Web开发 原书第4版源码:http://yunp ...
- 第五模块：WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- 手摸手带你学移动端WEB开发
HTML常用标签总结 手摸手带你学CSS HTML5与CSS3知识点总结 手摸手带你学移动端WEB开发 好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/Ro ...
- 要web开发精品教程吗？免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
- 移动端web开发的一些知识点
整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...
- Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库
SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看.与分辨率无关的矢量图形.而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
随机推荐
- 华为Liteos移植到stm32F03ZE
华为Liteos和物联网设备侧sdk移植到stm32F03ZE霸道板子上 推荐官方教程:https://liteos.github.io/ 啥是LIteos "开源免费"的实时操作 ...
- Ubuntu Docker-ce安装
使用官方给的脚本进行安装 curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun
- c++学习笔记_5
前言:本笔记所对应的课程为中国大学mooc中北京大学的程序设计与算法(三)C++面向对象程序设计,主要供自己复习使用,且本笔记建立在会使用c和java的基础上,只针对与c和java的不同来写 继承 继 ...
- 数字麦克风PDM转PCM与STM32 I2S接口应用----重要文档列表
数字麦克风PDM脉冲到PCM信号需要一个二次采样,ST 提过了PDM2PCM的软件包,可以完成上面的工作.软件包源码没有开源,使用手册也简洁的让人抓狂,我觉得可能是因为ST更高级的MCU直接带了硬解码 ...
- poj1947（树上分组背包）
题目链接:https://vjudge.net/problem/POJ-1947 题意:给定一棵树,求得到一个结点数为p最少删多少条边. 思路: 明显的树形dp,分组背包.用dp[u][j]表示在结点 ...
- DB2 数据库权限
以下内容转载: http://blog.csdn.net/xiyuan1999/article/details/8135263 DB2中的权限 DB2 中有三种主要的安全机制,可以帮助 DBA 实现 ...
- [转帖] 飞腾FT2000+ CPU的进展(2019.6)
中国长城:拟进一步收购飞腾股权,强化信息基础设施国产化平台地位 2019-06-26 09:28 http://www.sohu.com/a/323065095_100016383 今年年中的事情 浪 ...
- 【Python基础】11_Python中的字符串
1.字符串的定义 可以使用""双引号,也可以使用''单引号定义字符串,一般使用双引号定义. 2.字符串的操作 判断类型: 查找和替换 大小写切换: 文本对齐 注:string.ce ...
- C++11 bind和function用法
function是一个template,定义于头文件functional中.通过function<int(int, int)> 声明一个function类型,它是“接受两个int参数.返回 ...
- kube-dns和coreDNS的使用
内部服务发现 前面我们给大家讲解了 Service 的用法,我们可以通过 Service 生成的 ClusterIP(VIP)来访问 Pod 提供的服务,但是在使用的时候还有一个问题:我们怎么知道某个 ...