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 最佳实践 ...
随机推荐
- Spring Aop（十二）——编程式的创建Aop代理之AspectjProxyFactory
转发地址:https://www.iteye.com/blog/elim-2397922 编程式的创建Aop代理之AspectjProxyFactory 之前已经介绍了一款编程式的创建Aop代理的工厂 ...
- html5 商品分类页面效果zepto
点击左边容器条目,右边列表对应的内容置顶显示,滑动右边的列表,左边容器的对应的标题高亮显示. 效果图如下: 代码: <!doctype html> <html> <hea ...
- Jmeter 逻辑控制器 之 ForEach 控制器
一.认识 ForEach 控制器 如下,创建一个 ForEach 控制器 设置界面如下: 输入变量前缀:要进行循环读取的变量前缀 Start index for loop (exclusive):循环 ...
- springmvc项目 logback.xml配置 logstash日志收集
配置logback,需要一个转接的Appender,可以通过Maven依赖加到项目中: <dependency> <groupId>com.cwbase</groupId ...
- C/C++编程
基本的数据类型: 整型 浮点型(单精度.双精度) 在c语言中,所有的变量声明必须在任何执行语句之前(对当前域来说), 否则编译的时候会出现变量是未声明的标识符的错误. main 入口参数:argc 和 ...
- ffmpeg学习笔记-多线程音视频解码
之前的视频解码仍然存在问题,那就是是在主线程中去完成解码的,会造成线程阻塞,这里将其改为多线程解码,使其主线程不被阻塞 前面介绍了音视频的主线程解码,那样会阻塞主线程,在前面学习了多线程以后,就可以对 ...
- HIVE配置mysql metastore
HIVE配置mysql metastore hive中除了保存真正的数据以外还要额外保存用来描述库.表.数据的数据,称为hive的元数据.这些元数据又存放在何处呢? 如果不修改配置hive ...
- 2018南京icpc-J-Prime Game (欧拉筛+唯一分解定理)
题意:给定n个数ai(n<=1e6,ai<=1e6),定义,并且fac(l,r)为mul(l,r)的不同质因数的个数,求 思路:可以先用欧拉筛求出1e6以内的所有质数,然后对所有ai判断, ...
- 什么是Java内部类？
如果大家想了解更多的知识和技术,大家可以 搜索我的公众号:理想二旬不止 (尾部有二维码)或者访问我的 个人技术博客 www.ideal-20.cn 这样阅读起来会更加舒适一些 非常高兴与大家交流,学习 ...
- [转帖]linux命令dd
linux命令dd dd 是diskdump 的含义 之前学习过 总是记不住 用的还是少. http://embeddedlinux.org.cn/emb-linux/entry-level/20 ...