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 ...
随机推荐
- web--webstorm的一些常用快捷键
Webstorm的一些常用快捷键 下面是Webstorm的一些常用快捷键: Alt+回车 导入包,自动修正 1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录 ...
- SAS 删除数据和对缺失值处理代码程序
%INCLUDE '00@HEADER.SAS'; %LET dir=..\04@Model;LIBNAME cc "&dir"; %MACRO ModelVariable ...
- EL(Expression Language)和JSTL标签(JSP Standard Tag Library)
一.EL表达式: Expression Language提供了在 JSP 脚本编制元素范围外(例如:脚本标签)使用运行时表达式的功能.脚本编制元素是指页面中能够用于在JSP 文件中嵌入 Java代码的 ...
- FragmentTabHost切换Fragment时保存状态,避免切换Fragment走onCreateView和onDestroyView方法;
FragmentTabHost这个控件每次切换Fragment,都会走Fragment的onCreateView和onDestroyView方法,多以每次切换都会创建和销毁Fragment实例,先来看 ...
- disabled和readonly区别
disabled和readonly这两个属性有一些共同之处,比如都设为true,则form属性将不能被编辑,往往在写js代码的时候容易混合使用这两个属性,其实他们之间是有一定区别的: 如果一个输入项的 ...
- syslog-ng日志收集分析服务搭建及配置
syslog-ng日志收集分析服务搭建及配置:1.网上下载eventlog_0.2.12.tar.gz.libol-0.3.18.tar.gz.syslog-ng_3.3.5.tar.gz三个软件: ...
- jvm常见的面试题
1. 内存模型以及分区,需要详细到每个区放什么. 2. 堆里面的分区:Eden,survival from to,老年代,各自的特点. 3. 对象创建方法,对象的内存分配,对象的访问定位. 4. GC ...
- Java内存泄漏定位
Java虚拟机内存分为五个区域:方法区,堆,虚拟机栈,本地方法栈,程序计数器.其中方法区和堆是java虚拟机共享的内存区域,虚拟机栈,本地方法栈,程序计数器是线程私有的. 程序计数器(Program ...
- java细节知识
代码优化细节 (1)尽量指定类.方法的final修饰符 带有final修饰符的类是不可派生的.在Java核心API中,有许多应用final的例子,例如java.lang.String,整个类都是fin ...
- Mac 系统下 mysql 的安装与配置
1.mysql 的安装 1)官网下载 mysql 安装包:http://www.mysql.com/downloads/ 2)下载后解压打开安装包,点击 pkg 文件进行安装 3)注意:最后一步弹窗会 ...