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发送微信消息
针对此 需要安装itchat第三方模块 采用pip安装就可以了 pip install itchat import itchatimport time#引入时间函数进行测试time_format= ...
- 手动卸载CAD 删除残留文件 清理遗留的文件
手动卸载基于 AutoCAD 产品的文件,从而删除所有残留文件. 清理安装失败所遗留的文件. 一.解决方案: 通过"控制面板"卸载该程序. 删除以下位置残留的 AutoCAD 文件 ...
- PUSU 拆分后发货和开票的时间节点问题
项目做到现在业务突然说流程要变,心中顿时无数个草草草掠过.这公司业务也真是够奇葩了,一天一个样.原来流程是由PU把产品生产完后就发给SU,由SU再来决定什么时候对客户和开票.而现在马上要上线了,突然冒 ...
- Chapter4 复杂度分析(下):浅析最好,最坏,平均,均摊时间复杂度
四个复杂度分析: 1:最好情况时间复杂度(best case time complexity) 2:最坏情况时间复杂度(worst case time complexity) 3:平均情况时间复杂度( ...
- 如何在idea里面新建一个maven项目,然后在这个maven项目里创建多个子模块
如何在idea里面配置maven我这里就不多说了 先新建一个maven项目作为总的管理项目 不用勾选什么,直接下一步 这样子一个普通的maven项目就创建成功了. 因为这个项目是用来管理多个子模块的, ...
- 杂谈1.py
Python命名规则: 1. 组成:数字/字母/下划线 只能以字母,下划线开头 不能包含空格 避免Python关键字和函数名 简短且具有描述性 描述数据形态及支持操作 Python动态类型 变量无类型 ...
- linux 配置vue环境
系统 [root@Gao conf.d]# uname -a 工具 1.Final Shell 2.工具截图 需要下载的部分 node.js npm cnpm vue-cli 安装nod ...
- solr schema.xml Field属性详解
<field name="id" type="string" indexed="true" stored="true&quo ...
- Source Code Pro 编程字体
Source Code Pro :是 Adobe 公司号称最佳的编程字体,而且还是开源的 它非常适合用于阅读代码,支持 Linux.Mac OS X 和 Windows 等操作系统,而且无论商业或个人 ...
- 2008nian元旦
我要做---->> 控制财务状况---1记账 2 炒股或基金 3预算 锻炼---每次要达到锻炼的效果 学习计划-- 1报班架构 2 项目管理 3读书 爱好---做饭,收拾整理 职业规划. ...