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; } ...
随机推荐
- Oracl 12c (课本)
一.安装和部署:https://www.cnblogs.com/-xuan/p/10211387.html 二. (1)体系结构 Oracle体系结构 实例:实例是后台进程和内存的集合 数据库:数据库 ...
- A Chess Game POJ - 2425
Let's design a new chess game. There are N positions to hold M chesses in this game. Multiple chesse ...
- 4.1.2 A Funny Game(POJ 2484)
Problem description: n枚硬币排成一个圈,A和B轮流从中取一枚或两枚硬币,不过取两枚时,所取的两枚硬币必须是连续的.硬币取走之后留下空位,相隔空位的硬币视为不连续的.A开始先取,取 ...
- array_multisort以及php中的排序函数
1. array_multisort(array_column($arr, $key), SORT_DESC, $arr); // 根据二维数组中的某一列对数组进行增序或者降序排列 什么是关联数组呢? ...
- LCS(最长公共子序列)问题
例题见挑战程序设计竞赛P56 解释:子序列是从原序列中按顺序(可以跳着)抽取出来的,序列是不连续的,这是其和子串最大的区别: 我们可以定义dp数组为dp[i][j],表示的是s1-si和t1-ti对应 ...
- Educational Codeforces Round 48 (Rated for Div. 2)G. Appropriate Team
题意:求满足条件的(i,j)对数:\(gcd(v,a_i)=x,lcm(v,a_j)=y\) 题解:\(x|a_i,a_j|y\),\(x|y\),考虑质因子p,假设a_i中p次数为a,x中次数为b, ...
- HttpClient4 警告: Invalid cookie header 的问题解决(转)
原文地址:HttpClient4 警告: Invalid cookie header 的问题解决 最近使用HttpClient4的时候出现如下警告信息 org.apache.http.client.p ...
- 小程序-wepy学习
组件通信与交互 推荐网址:https://tencent.github.io/wepy/document.html#/?id=%e7%bb%84%e4%bb%b6%e9%80%9a%e4%bf%a1% ...
- python中字典内置方法
- js问题 项目问题
项目问题1. js 中字符串替换函数var a = 'fajlfjal'a.replace(/b/,'a') // 不能直接改变a 而是返回替换后的值 2. vue 属性绑定中 class style ...