首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

web前端学习摘要。

对内容影响(尽管浮动元素脱离了默认文档流,但仍然会影响到默认文档流盒子里面装“内容”(图文),这些“内容”会给浮动元素留出占位。盒子还是那么大,但是内容给浮动元素让出了位置。内容为王。)...A:如果父元素只包含浮动元素,那么未设置高度同时,则父元素高度坍塌为零。 解决“塌陷”办法: step 1. 创建一个用来清除浮动CSS样式类(.clearfix) step 2....针对包裹全是浮动元素父级容器使用(.clearfix) 如下:相当于元素补一个内容,然后再做清除。...常用布局:word-break:break-all; 值 说明 break-all 允许文本在到达容器边缘时,可以任意位置断开,不受词语限制 keep-all 不允许词语断开,智能在出现词语分割空格或字符时才能换行...当用户点击邮箱链接时,会启动电脑邮件客户端程序,向指定邮箱地址发送邮件。如果用户电脑未安装邮件客户端程序,那么邮箱链接将无法工作。

3.6K30
您找到你想要的搜索结果了吗?
是的
没有找到

Excel公式练习35: 拆分字符分隔数字并放置同一列

本次练习是:单元格区域A1:A6,有一些数据,有的是单独数字,有的是由字符分隔一组数字,例如13-16表示13、14、15、16,现在需要将这些数据拆分并依次放置列D,如下图1所示。...公式 单元格D1输入数组公式: =IF(ROWS($D$1:$D1)>SUM(last-first+1),"",SMALL(IF(first+TRANSPOSE(ROW(INDIRECT("1:"&...实际,这个值代表我们从A1:A6字符范围最大字符串返回数字数量。...例如对于上面数组第4行{10,11,12,13},last数组对应值是11,因此剔除12和13,只保留10和11。...综上,单元格D1原来公式: =IF(ROWS($D$1:$D1)>SUM(last-first+1),"",SMALL(IF(first+TRANSPOSE(ROW(INDIRECT("1:"&MAX

3.6K10

CSS进阶09-定位体系差异分析

否则,如果元素为根元素, display 设置如下表,除了其CSS2.2未定义 list-item 指定值是否变为计算值 block 或 list-item 。...因此,所有的内容将被放置一个IFC,处于由P元素建立包含块内,产生类似如下内容: ?...作为outer子元素inner内容,会在标准流紧接"of outer contents"单词(1.5行)流入。...inner盒左侧行盒均被缩短,文档剩余文本会流入它们。 ? 为了展示'clear'属性效果,我们示例添加了一个兄弟元素: <!...作为变化条两个字符脱离标准流并位于当前行(由于'top:auto'),从其包含块(由P在其最终位置建立)左边缘开始右移'-1em'。结果是变化条似乎“浮动”到当前行左侧。

36830

前端打工人面试总结

但这还不是问题关键,模板字符关键优势有两个:模板字符,空格、缩进、换行都会被保留模板字符串完全支持“运算”式表达式,可以${}里完成一些计算基于第一点,可以模板字符串里无障碍地直接写...:(1)存在性判定:在过去,当判断一个字符/字符串是否字符时,只能用 indexOf > -1 来做。...浮动工作原理:浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)浮动元素碰到包含它边框或者其他浮动元素边框停留浮动元素可以左右移动,直到遇到另一个浮动元素或者遇到它外边缘包含框。...浮动框不属于文档流普通流,当元素浮动之后,不会影响块级元素布局,只会影响内联元素布局。此时文档流普通流就会表现得该浮动框不存在一样布局模式。...父元素高度无法被撑开,影响与父元素同级元素浮动元素同级浮动元素会跟随其后若浮动元素不是第一个元素,则该元素之前元素也要浮动,否则会影响页面的显示结构清除浮动方式如下:给父级div定义height

62280

css应知应会 第三集

文本颜色 属性:colo 取值:颜色值 2、文本排列 作用:控制文本,图像,行内块元素 元素水平排列方式...3、灵活性太低(缺点) 4、确定每列大小时使用 4、浮动 1、定位 所谓定位指就是页面元素页面位置 2、定位分类...文档流定位 ,页面元素默认定位方式 特点: 1、每个元素页面中都会占据一定空间 2、每个元素都是在其父元素从左上角开始排列...3、每个块级元素页面独占一行,每个块级元素都是按照从上到下方式排列 4、多个行内元素会在一行显示,显示不下再换行 问题:如何在页面解决多个块级元素一行内显示问题...左侧已有的浮动元素边缘 3、right 右浮动,让元素停靠在父元素右边 或 右侧已有的浮动元素边缘 4

1.6K20

阿里前端常考面试题汇总

JS 隐式转换,显示转换一般非基础类型进行转换时会先调用 valueOf,如果 valueOf 无法返回基本类型值,就会调用 toString字符串和数字"+" 操作符,如果有一个为字符串,那么都转化到字符串然后执行字符串拼接...浮动工作原理:浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)浮动元素碰到包含它边框或者其他浮动元素边框停留浮动元素可以左右移动,直到遇到另一个浮动元素或者遇到它外边缘包含框。...浮动框不属于文档流普通流,当元素浮动之后,不会影响块级元素布局,只会影响内联元素布局。此时文档流普通流就会表现得该浮动框不存在一样布局模式。...父元素高度无法被撑开,影响与父元素同级元素浮动元素同级浮动元素会跟随其后若浮动元素不是第一个元素,则该元素之前元素也要浮动,否则会影响页面的显示结构清除浮动方式如下:给父级div定义height...因此使用单独线程来计时并触发定时器,计时完毕后,添加到事件队列,等待JS引擎空闲后执行,所以定时器任务设定时间点不一定能够准时执行,定时器只是指定时间点将任务添加到事件队列;注意:W3C

1.4K40

【CSS】323- 深度解析 CSS 浮动

我觉得很多人float是啥意识都不知道,要知道很多特性原理是和其命名单词或者字母有密切关联,不是随便命名。从名字可以看到一些当初设计初衷。...,也就是我们有时会纳闷一点:设置浮动后,还是会挤占容器文本内容。...从上图会发现,即使图片浮动了,脱离了正常文档流,也覆盖没有浮动元素上了,但是其并没有将文本内容也覆盖掉,这也证实了float这个api在当初被设计出来主要目的:实现文字环绕图片排版功能。...我们可以看到,设置absolute容器,才是意义完全脱离正常文档流。覆盖在当前位置所有容器和文本内容之上。对比思考一下,会发现这又证明了float被设计出来主要目的。...如果content不是空字符串,那么就会在页面显示内容。

97520

CSS-伪类和伪元素

背景 写了这么多年代码,对CSS伪类和伪元素竟然没有细致进行过学习总结,由此可见实际代码开发,用也确实不多,也就用过一些:first-child,:hover之类吧,其它before...伪类和伪元素 伪类:是以一个冒号作为前缀,被添加到选择器末尾,当你希望特定状态下(:hover)才被呈现到指定元素时,可以往元素选择器后面加上伪类。...伪元素:用于创建一些不在文档树元素,并为其添加样式。比如::before是指得元素前添加文本,且为文本添加样式,虽然用户可以看到这些文本,但文本实际不在DOM结构。...content属性:空值、字符串、url、attr、counter。...} 字符串可以直接添加内容,不赘述。

1K20

CSS样式

12px h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} font-weight:设置文本粗细 值 描述 bold 定义粗体字符...左上角 left center 左 left bottom 左 下 right top 右上角 right center 右 right bottom 右 下 center top center...display 属性:display:flex;开启弹性盒,属性设置后子元素默认水平排列 flex-direction属性:flex-direction 属性指定了弹性子元素父容器位置 flex-direction...center 弹性盒子元素该行侧轴(纵轴)居中放置。...值 描述 left 元素向左浮动 right 元素向右浮动 浮动原理: 浮动以后使元素脱离了文档流 浮动只有左右浮动,没有上下浮动 脱离文档流之后,元素相当于页面上面增加一个浮层来放置内容。

24530

CSS基础知识巩固你前端基础

,该值必须是整个单词,可以前后有空格 E[attribute\|=value] 用于选取带有以指定值开头属性值元素,该值必须是整个单词或者后面跟着字符“-” 派生选择器 派生选择器根据元素在其位置上下文关系定义样式...: 伪元素名 说明 :first-letter 向文本第一个字母添加样式 :first-line 向文本第一行添加样式 :after 元素之后添加内容 :before 元素之前添加内容 css...css文本属性表: 属性 说明 color 文本颜色 direction 文本方向或者书写方向 letter-spacing 字符间距 line-height 文本行高 text-align 文本水平对齐方式属性...布局属性 布局属性是文档中元素排列显示规则 布局方式3种:普通文档流,浮动,定位 css浮动涉及到属性 属性 说明 float 设置框是否需要浮动以及浮动方向...clear 设置元素哪一侧不允许出现其他浮动元素 clip 裁剪绝对定位元素,该元素必须是绝对定位,右下左原则 overflow 设置内容溢出元素框时处理方式,值:visible,auto,hidden

2K10

1.5 万字 CSS 基础拾遗(核心知识、常见需求)

比如页面根元素 html 文本颜色默认是黑色,页面所有其他元素都将继承这个颜色,当申明了如下样式后,H1 文本将变成橙色。...IFC 渲染规则 子元素水平方向上一个接一个排列,垂直方向上将以容器顶部开始向下排列; 节点无法声明宽高,其中 margin 和 padding 水平方向有效垂直方向无效; 节点在垂直方向上以不同形式对齐...它分两种情况: 同一个层叠上下文中,它描述定义是该层叠上下文中层叠上下文元素 Z 轴上下顺序; 在其他普通元素,它描述定义是这些普通元素 Z 轴上下顺序; 普通节点层叠等级优先由其所在层叠上下文决定...因为浮动元素会脱离正常文档流,并不会占据文档流位置,所以如果一个父元素下面都是浮动元素,那么这个父元素无法浮动元素所撑开,这样一来父元素就丢失了高度,这就是所谓浮动造成元素高度坍塌问题。...; 长文本处理 默认:字符太长溢出了容器 字符超出部分换行 字符超出位置使用字符 单行文本超出省略 多行文本超出省略 查看以上这些方案示例:codepen demo 有意思是刚好前两天看到

1.1K30

1.5 万字 CSS 基础拾遗(核心知识、常见需求)

比如页面根元素 html 文本颜色默认是黑色,页面所有其他元素都将继承这个颜色,当申明了如下样式后,H1 文本将变成橙色。...它分两种情况: 同一个层叠上下文中,它描述定义是该层叠上下文中层叠上下文元素 Z 轴上下顺序; 在其他普通元素,它描述定义是这些普通元素 Z 轴上下顺序; 普通节点层叠等级优先由其所在层叠上下文决定...因为浮动元素会脱离正常文档流,并不会占据文档流位置,所以如果一个父元素下面都是浮动元素,那么这个父元素无法浮动元素所撑开,这样一来父元素就丢失了高度,这就是所谓浮动造成元素高度坍塌问题。...; 长文本处理 默认:字符太长溢出了容器 ?...字符超出部分换行 ? 字符超出位置使用字符 ? 单行文本超出省略 ? 多行文本超出省略 ?

1.4K20

Web前端温故知新-CSS基础

例如,字体、字号、颜色、行距等可以body元素中统一设置,然后通过继承影响文档所有文本。...(9)word-break :自动换行   normal 使用浏览器默认换行规则,不打断单词显示;   break-all 允许单词内换行;   keep-all 只能在半角空格或字符处换行;   ...合并后外边距为两者较大者,即使父元素外边距为0,也会发生合并。   如果希望外边距不合并,那么可以为父元素定义1像素上边框或内边距。...这里以定义父元素上边框为例,父div元素css样式假如以下样式: .father { border-top:1px solid #fcc; } 六、深入浮动    6.1 浮动原理   ...所谓静态位置就是各个元素HTML文档流默认位置。   静态定位状态下,无法通过边偏移属性(top、bottom、left或right)来改变元素位置。

3.5K40

Web前端温故知新-CSS基础

例如,字体、字号、颜色、行距等可以body元素中统一设置,然后通过继承影响文档所有文本。...(9)word-break :自动换行   normal 使用浏览器默认换行规则,不打断单词显示;   break-all 允许单词内换行;   keep-all 只能在半角空格或字符处换行;   ...合并后外边距为两者较大者,即使父元素外边距为0,也会发生合并。   如果希望外边距不合并,那么可以为父元素定义1像素上边框或内边距。...这里以定义父元素上边框为例,父div元素css样式假如以下样式: .father { border-top:1px solid #fcc; } 六、深入浮动    6.1 浮动原理   ...所谓静态位置就是各个元素HTML文档流默认位置。   静态定位状态下,无法通过边偏移属性(top、bottom、left或right)来改变元素位置。

2.3K20

CSS基础布局

* CSSBFC详解 https://www.cnblogs.com/chen-cong/p/7862832.html clear: both; 作用是:保证该元素左右两侧 没有浮动元素...* 像文本一样 排列block元素 * 没有 清除浮动 等问题,简单易用 * 但是需要 处理间隙 多个inline-block之间间隙 相当于 文字与文字 之间间隙。...* 让页面 不同设备 能正常使用 * 主要处理是 屏幕大小问题(严格来讲 还涉及到 是否有鼠标 是否是读屏软件 是否支持一些样式) * 具体方法 涉及到 设计 和 实现 两方面。...间隙原因:字符间距 解决方案:1.消灭空白字符:注释掉 标签之间空白字符 2.消灭字符间距:把父级元素字体大小设置为0,再设置元素自身字体大小。 4....* 设计:隐藏(不需要在移动端显示,就不让 移动端显示) 折行(pc端 横排东西,移动端可以少排一些 或者 竖排) 自适应(留下自适应空间)

2.9K20

每天10个前端小知识 【Day 15】

行框排列会受到中间空白(回车空格)等影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。...多数显示器默认频率是60Hz,即1秒刷新60次,所以理论最小间隔为1/60*1000ms = 16.7ms。 3. ::before 和 :after双冒号和单冒号有什么区别?...换句话说,其允许我们不改变内容情况下,改变页面的布局以精确适应不同设备。 6.为什么会出现浮动?什么时候需要清除浮动?清除浮动方式有哪些? 浮动元素碰到包含它边框或者浮动元素边框停留。...由于浮动元素不在文档流,所以文档流块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流块框上。...浮动带来问题: 父元素高度无法被撑开,影响与父元素同级元素浮动元素同级浮动元素(内联元素)会跟随其后 若非第一个元素浮动,则该元素之前元素也需要浮动,否则会影响页面显示结构。

10010

2022秋招前端面试题(八)(附答案)

浏览器会把inline内联元素空白字符(空格、换行、Tab等)渲染成一个空格。为了美观,通常是一个放在一行,这导致换行后产生换行字符,它变成一个空格,占用了一个字符宽度。...不足:有些容器是不能设置浮动,如左右切换焦点图等。(2)将所有写在同一行。不足:代码不美观。(3)将内字符尺寸直接设为0,即font-size:0。...不足:其他字符尺寸也被设为0,需要额外重新设定其他字符尺寸,且Safari浏览器依然会出现空白间隔。...两栏布局实现一般两栏布局指的是左边一栏宽度固定,右边一栏宽度自适应,两栏布局具体实现:利用浮动,将左边元素宽度设置为200px,并且设置向左浮动。...,左侧元素设置固定大小,并左浮动,右侧元素设置overflow: hidden; 这样右边就触发了BFC,BFC区域不会与浮动元素发生重叠,所以两侧就不会发生重叠。.

53720
领券