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 ...
随机推荐
- Activiti的25张表
Activiti流程引擎的运行,背后需要数据库的25张表支持,这25张表, 主要是在流程运行过程中,记录存储一些参与流程的用户主体,以及流程定义的存储,流程执行时候的一些信息,以及流程的历史信息等. ...
- centos7安装elasticsearch6.3.x集群并破解安装x-pack
一.环境信息及安装前准备 主机角色(内存不要小于1G): 软件及版本(百度网盘链接地址和密码:链接: https://pan.baidu.com/s/17bYc8MRw54GWCQCXR6pKjg 提 ...
- form转化json
;(function($){ /** * 依赖jquery-1.4.2 * 依赖jquery.json-2.2,参考http://code.google.com/p/jquery-json/ * 用于 ...
- Java double 加、减、乘、除
double类型的数值接相加的时候,结果可能出现精度误差为此Java提供了高精度计算的方法:java.math.*里面提供了BigDecimal类 import org.junit.Test; imp ...
- Tools:apache部署https服务
转自:https://www.cnblogs.com/ccccwork/p/6529367.html 1.要搭建https,必须要具备的东西 1.超文本传输协议httpd(apache)和ssl模块( ...
- How to solve “Dynamic Web Module 3.1 requires Java 1.7 or newer” in Eclipse
How to solve “Dynamic Web Module 3.1 requires Java 1.7 or newer” in Eclipse Last updated on June 20t ...
- ajax用FormData方式提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Oracle 事务和异常处理
Oracle 的异常和回滚 DECLARE dept_no ) :; BEGIN --开始事务 INSERT INTO dept VALUES (dept_no, '市场部', '北京'); --插入 ...
- java正则表达式 需要转义的字符
特别字符 说明 $ 匹配输入字符串的结尾位置.如果设置了 RegExp 对象的 Multiline 属性,则 $ 也匹配 ‘\n' 或‘\r'.要匹配 $ 字符本身,请使用 \$. ( ) 标记一个子 ...
- 教女朋友写第一个php
1 首先 下载xampp 软件.按默认安装好之后 在电脑的右下角的箭头里能发现一个橘色的小图标 双击它 启动阿帕奇和mysql 会变绿 2 打开 C:\xampp\apache 文件夹 找到httpd ...