Python12/10--前端之display/overflow使用/清浮动的方式
display:
1.inline 同行显示,当一行显示不下、多余的就会换行显示,
不支持的css样式:不支持宽高,不支持行高(行高会映射给父级) 不支持margin上下,content由 文本内容撑开
2.inline-block:同行显示,当一行显示不下,标签会作为一个整体换行显示
overflow:
1.定义:处理内容超出盒子显示的区域
overflow:auto:自适应,内容如果超出显示,会出现滚动条,不超出则不显示滚动条
overflow:hidden:隐藏超出盒子显示范围的内容
overflow:scroll:一直采用滚动方式显示
float:浮动布局 ,改变BFC的参照方位
为何使用:使用它,块级盒子就会同行显示
如何使用:
float:left/right (左/右 浮动)
left:BFC参照方向从左向右
right:BFC参照方向从右向左
清浮动目的:让父级(有浮动的子级)获得一个合适的高度
浮动的问题:浮动的子级,默认不会获取父级的宽度,也不会撑开父级的高度
清浮动操作以后(清浮动针对的是父级):父级在清浮动以后,可以重新被子级撑开高度
注意:当父级没有下兄弟标签(不影响上兄弟),可以不做清浮动操作。但是清浮动一般每次在浮动后都会处理的。
清浮动的四种方式:
1.设置父级的死高度(就是设置一个有效的高度值)
2.通过父级的兄弟设置clear:both
3.设置父级overflow 属性
例:.sub{overfolw:hidden;} overflow:hidden:隐藏超出盒子显示范围的内容
4.通过父级:after
. after{
content: '';
display: block;
clear: both;}
Python12/10--前端之display/overflow使用/清浮动的方式的更多相关文章
- 边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式
边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
- 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理
在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...
- web开发:清浮动
一.display总结 二.overflow 三.浮动布局 四.清浮动 五.清浮动的方式 一.display总结 <!DOCTYPE html> <html> <head ...
- 关于浮动与清浮动 float
浮动常见的几种属性值 float {left; right; none; } 主要是定义元素朝哪个方向浮动: 元素浮动后的特性 在一行显示,父级的宽度放不下,自己折行: 支持宽高等样式: 不设置 ...
- web前端浮动、清浮动问题
浮动的问题如下一一列举如有考虑不周的欢迎欢迎大家补充: 1.浮动,兼容性问题3px的问题,双边距的问题 在平时工作的过程中,解决3px的问题,一般都是初始化*{margin:0;padding:0px ...
- nginx 1.15.10 前端代理转发 将多个地址,代理转发到一个地址和端口 多系统公用一个cookie 统一token
nginx 1.15.10 前端代理转发 将多个地址,代理转发到一个地址和端口 多系统公用一个cookie 统一token 注意: proxy_pass http://192.168.40.54:22 ...
- 前端之CSS——盒子模型和浮动
一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- CSS清浮动处理(Clear与BFC)
在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class=&quo ...
随机推荐
- python之路——8
王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 学习内容 .1.文件操作 笔记.txt 1.文件路径:D:\python\Day8\笔记.txt 2.编码方 ...
- wps表格开发C#
1.需要添加引用etapi.dll,这个dll在你的wps的安装目录下面可以找到. 2.主要的类: Excel.Application:顶层对象 WorkBook:工作簿 WorkSheet:表 Ra ...
- 学习 MeteoInfo二次开发教程(三)
1.breakList的问题 ((PolygonBreak) aLS.breakList[0]).DrawFill=false; 新的类库将LegendScheme的breakList属性改为了Leg ...
- shell :将标准输出及标准错误输出写到指定文件
shell 脚本如下: logFile=/usr/local/log/$today.txt exec >> $logFile 2>&1 1为标准输出stdout.2为标准错误 ...
- 系统计划 Cron作业 为什么/etc/crontab /etc/cron.d /etc/cron.* 那么多的定义方式????
当我们要增加全局性的计划任务时,一种方式是直接修改/etc/crontab.但是,一般不建议这样做,/etc/cron.d目录就是为了解决这种问题而创建的.例如,增加一项定时的备份任务,我们可以这样处 ...
- Linux的Namespace与Cgroups介绍
Namespace 的概念 Linux Namespace 是kernel 的一个功能,它可以隔离一系列系统的资源,比如PID(Process ID),User ID, Network等等.一般看到这 ...
- MySQL InnoDB引擎B+树索引简单整理说明
本文出处:http://www.cnblogs.com/wy123/p/7211742.html (保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错 ...
- 最新WordConut
一.代码地址:https://gitee.com/cainiaoY/WordCount 二.项目分析:代码根据实现的功能不同分为两个模块,一个wcFuctiong类,一个wcTest类,其中wcFuc ...
- Django提交文件的方式
以上传图片为列, 提交图片文件后能在不刷新页面的前提下显示图片 首先写出一个简单的提交文件的页面: <h>文件上传</h> 选择文件<input type="f ...
- mysql修改EST时区,mysql时间修改
方法有两种 ###第一种 select NOW();show variables like "%time_zone%"; ##一:通过sql命令临时修改 set global ti ...