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 最佳实践 ...
随机推荐
- 关于react中遇到的问题记录说明
5.el表达式 dataSource = (userPage, orgList) => userPage.map(item => { const org = orgList.find(or ...
- 数据质量、特征分析及一些MATLAB函数
MATLAB数据分析工具箱 MATLAB工具箱主要含有的类别有: 数学类.统计与优化类.信号处理与通信类.控制系统设计与分析类.图像处理类.测试与测量类.计算金融类.计算生物类.并行计算类.数据库访问 ...
- Vue Cli3.0 使用jquery
参考链接:https://blog.csdn.net/ai520587/article/details/84098601
- SpringBoot整合Redis及Redis工具类
前言 想做一个秒杀项目,问了几个大佬要了项目视频,结果,自己本地实践的时候,发现不太一样,所以写下这篇,为以后做准备. 环境配置 IDE:IDEA 环境:Windows 数据库:Redis Maven ...
- 在UPW中使用VLC解码媒体
VLC支持的格式很全,学会如何使用后,完全可以自己给自己写一个简单的万能播放器了. 源码来自github:https://github.com/kakone/VLC.MediaElement.git( ...
- Zabbix的history相关数据表数据太大，执行表分区操作过程
一.查询zabbix数据库大小 mysql> select table_schema, concat(truncate(sum(data_length)/1024/1024,2),' mb') ...
- gitlab LFS 的应用实践
今天看到的gitlab LFS的文档,将自己的理解整理成博客,加深自己的印象.具体gitlab LFS的介绍可以直接百度了,不在这里详细阐述.只提一下他的作用:LFS就是Large File Stor ...
- easyui datagrid 合并相同行
$.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(function () ...
- k8s集群升级
集群升级 由于课程中的集群版本是 v1.10.0,这个版本相对有点旧了,最新版本都已经 v1.14.x 了,为了尽量保证课程内容的更新度,所以我们需要将集群版本更新.我们的集群是使用的 kubeadm ...
- ThreadLocal使用场景，原理
ThreadLocal 1. 先说下 ThreadLocal不能解决多线程间共享数据,他是一个隔离多线程间共享数据的好帮手 2. ThreadLocal是本地线程共享数据 3. 他是以空间换时间 sy ...