display总结 overflow知识
# display总结:
# inline总结: # 1.同行显示, 就相当于纯位文本, 当一行显示不下, 如就是一字显示不下, 那么显示不下的那个字会自动换行;
# 和纯文本的区别就是有纯文本的概念, 标签与标签间有一个空格隔断. * /
# 2.支持部分CSS样式, 不支持宽高 | 行高不支持(行高会映射到父级block标签) | margin上下 | 支持margin左右 * /
# 3..content由文本内容撑开 * /
# 4.inline标签只嵌套inline标 # inline-block总结:
# 1.同行显示,当一行显示不下,标签会作为整体换行显示
# 2.支持所有css样式
# 3.contebt默认由文本(图片)内容撑开,也可以自定义宽高(显示区域不足时,内容会在标签内容换行显示,可能会超出显示区域)
# 4.inline-block标签不建议嵌套任意标签 # block总结
# 1.异行显示,不管自身区域多大,都会独占一行
# 2.支持所有css样式
# 3.width默认继承父级,height由内容(文本,图签,子标签)撑开,当设置自定义宽高后,一定采用自定义宽高
# 4.block标签可以嵌套任意标签,多数作为架构和布局层出现 # overflow知识
# 本质
# overflow:处理内容超出盒子区域
# auto自适应,内容超出,滚动显示超出部分,不超出则正常显示
# scroll:一直采用滚动方式显示
# hidden:隐藏超出盒子显示范围内容
display总结 overflow知识的更多相关文章
- 前端(七)—— 盒模型之display、overflow、隐藏、border、margin、样式支持,层级结构
display.overflow.隐藏.border.margin.样式支持,层级结构 一.盒模型之display 1.三种样式 block 块 inline 内联/行内 inline-block 内 ...
- position,display,float,overflow,margin,padding之间的相互影响
1.元素分为块级元素和行内元素, 块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题.行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且 ...
- display:none,overflow:hidden,visibility:hidden之间的区别
一,display:none; 隐藏元素,不占网页中的任何空间,让这个元素彻底消失(看不见也摸不着) 二,overflow:hidden; 让超出的元素隐藏,就是在设置该属性的时候他会根据你设置的宽高 ...
- 同行span标签设置display:inline-block;overflow:hidden垂直对齐问题
1 问题描述:一个div包含 三个span 当span2 类样式设置如下图时,将导致垂直方向不对齐的情况 2解决方案: 将前面的也设置同样的样式 overflow:hidden; display:in ...
- display和overflow
一.display <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- Intel WIDI (Wireless Display) 相关技术知识分析
一. WIFI 1.如何查找WIFI设备 非p2p设备 Beacons 包(同步,SSID) 速率 1M/s 2.4G HZ 13个信道,1,6,11三个信道不重叠 2.P2P 认证 客户端在每个通道 ...
- position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...
- 边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式
边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
- Runloop基础知识
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
随机推荐
- grid 操作实例
1.下载selenium server 地址http://www.seleniumhq.org/download 2.这里以2.44.0.jar为例+windows 平台+在一台主机上运行 3.cmd ...
- Artem and Array CodeForces - 442C (贪心)
大意: 给定序列$a$, 每次任选$a_i$删除, 得分$min(a_{i-1},a_{i+1})$(无前驱后继时不得分), 求最大得分. 若一个数$x$的两边都比$x$大直接将$x$删除, 最后剩余 ...
- python中for循环的底层实现机制 迭代
在python中,存在2种循环方式:for循环和while循环. while循环的实现很简单, 其本质就是一个条件语句,自定义条件,当条件满足的时候,不断执行while代码块. 但是for循环,究竟是 ...
- 前端VUE框架
一.什么是VUE? 它是一个构建用户界面的JAVASCRIPt框架 vue不关心你页面上的是什么标签,它操作的是变量或属性 为什么要使用VUE? 在前后端分离的时候,后端只返回json数据,再没有 ...
- jquery attr方法获取input的checked属性问题
1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase <input type="checkbox" id= ...
- 为什么使用 npm Scripts 构建项目
http://www.css88.com/archives/7025#more-7025 https://github.com/damonbauer/npm-build-boilerplate 这个我 ...
- LeetCode 回溯法 别人的小结 八皇后 递归
#include <iostream> #include <algorithm> #include <iterator> #include <vector&g ...
- Java:多个文档合并输出到一个文档
多个文档合并输出到一个文档 方法:Java NIO package First; import java.io.File; import java.io.FileInputStream; import ...
- RabbitMQ 设置队列的过期时间
设置队列的过期时间非常简单,在声明队列时,设置x-expires参数即可.当队列的生存周期超时后,RabbitMQ server会自动将该队列删除. 代码如下: channel.QueueDeclar ...
- 每天CSS学习之color
color意为颜色,其作用是设置字体的颜色. 设置颜色的方式有以下几种: 1.使用颜色单词,如:red: 2.使用十六进制,如:#FFFFFF: 3.使用rgb(255,0,0); 让我们来实践一下, ...