伪元素 概念：使用CSS模拟标签，创建网页中不重要的图 用法：找父级，在父级中添加子标签 伪元素 作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...先找已经定位的父级（一般是 相对定位），以这个父级为参照物 子绝父相 就近找定位的父级，如果逐层找不到这样的父级，就以浏览器窗口为参照物定位。...如果父级没有定位，那么以浏览器窗口为参照物。...： 属性：overflow： 属性值 效果 visible 默认值，溢出部分可见 hidden 溢出部分隐藏（⭐常用） scroll 无论是否溢出，都显示滚动条 auto 根据是否溢出...，自动显示或者隐藏滚动条 五、显示隐藏 元素本身隐藏 让某元素本身在屏幕中不可见。
前端课程——显示与隐藏 显示与隐藏 display display:none; 这种方式将元素设置隐藏后，该元素不会在占用空间。 设置为以下属性时，会取消display的隐藏。...隐藏的部分不会被看到 scroll:内容会被修剪，浏览器会显示滚动条以便查看其余内容。...内容不会被修剪，会显示在父级容器之外。 hidden:内容会被修剪，并且其余内容不可见。. scroll: 内容会被修剪，浏览器会显示滚动条以便查看其余内容。...auto: 由浏览器决定，如果内容被修剪，就会显示滚动条。 overflow-y相似。 text-overflow text-overflow属性确定如何向用户发出未显示的溢出内容信号。...它可以被剪切，显示一个省略号(…)或显示一个自定义字符串。该属性具有以下几个值: clip:将文本内容超出父级容器的部分隐藏。 ellipsis:将文本内容超出父级容器的部分使用省略号(…)表示。.
涵盖内容 1.熟悉css基本语法，以及css工作原理 2.熟练使用css selector 常规选择器class，id,元素，后代，通用，了解选择器的优先级 3.熟悉浮动，定位，盒模型，背景，字体，...重叠的元素 z-index属性指定了一个元素的堆叠顺序 一个元素可以有正数或负数的堆叠顺序 overflow 属性用于控制内容溢出元素框时显示的方式。 值 描述 visible 默认值。...scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。...以下实例选取了所有位于 元素后的第一个 元素: div+p { background-color:yellow; } 后续兄弟选择器 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素
写前端UI的朋友们也许都遇到过这样的问题：我们需要实现这样一个需求，在一个父级元素中隐藏一个可能过长的文本： 这个文本可能是单行的： 也可能是多行的： 下面我就给大家展示如何简单或优雅地实现这种需求 单行文本溢出的省略... demo: 但方案二也有一些问题 1在文本没有溢出父级元素时也同样显示省略号： 2末尾处文本可能有被“裁剪”的副效果： 多行文本溢出的省略（...）方案三 --简洁优雅的解决方案...，在溢出的时候隐藏并显示省略号呢？答案是有的！...先看看我们最终实现的demo: 在文本没有溢出父级元素时： 文本溢出父级元素时： 下面是HTML和JS代码： <div id='view' style='border:1px solid red;width...'; break; } } 首先我们需要弄清楚offsetHeight和scrollHeight所表示的高度： 1溢出显示滚动条时： 2没有溢出时：
CSS第五天-定位 静态定位：static 定位的默认值，写边偏移也不会有效果 ---- 相对定位：relative 父元素搭配子绝父相使用 根据自身原来的位置，进行定位 没有脱标，在页面还占有位置...transition 让元素样式慢慢变化，常配合hover使用，增强网页交互体验 过度所有属性：transition: all 1s === 给盒子添加阴影效果 transition: 过度属性 花费时间...（重点）： 开发中经常会通过 display属性完成元素的显示隐藏切换 display：none；（隐藏）、 display：block；（显示） visibility：hidden 隐藏元素本身，隐藏后的元素还占有位置...50%) 溢出隐藏：overflow 默认值 overflow: visible 溢出部分溢出 overflow: hidden 无论是否溢出，都显示滚动条overflow: scroll 根据是否溢出...，自动显示或隐藏滚动条 overflow: auto white-space: nowrap;（设置文字在一行显示，不能换行） text-overflow: ellipsis;（规定当文本溢出时，显示省略号来代表被修剪的文本
一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。... 效果如下： 一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。...white-space: nowrap; /*规定文本不进行换行*/ text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（...）*/ } 效果如下： 二....overflow:hidden 清除浮动 一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。...当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。
]] 验证日期及时间格式，格式为：YYYY/MM/DD hh:mm:ss AM|PM dateRange[string] validate[dateRange[grp1]] 验证 grp1 的值是否符合日期范围...[Demo] dateTimeRange[string] validate[dateTimeRange[grp1]] 验证日期及时间范围，增加了时间的对比，其他的和 dateRange 一样。...100000 自动隐藏提示信息的延迟时间 (ms) fadeDuration 0.3 隐藏提示信息淡出的时间 addPromptClass ” 给提示信息增加 class Ciaoca 增强版中，增加样式如下...showOneMessage false 是否只显示一个提示信息 doNotShowAllErrosOnSubmit false 在提交表单时不显示所有的错误信息（建议使用参数 showOneMessage...，格式为 jQuery 的选择器。
1.2.4 input日期表单元素 type 说明 date 获取日期 年/月 /日 ， yyyy:年 mm:月 dd:日 datatime 手动输入一个日期和时间 time 用于选择一个时间...低版本的浏览器不兼容 week 用于选择周和年 低版本的浏览器不兼容 datetime-local 用于选择日期和时间 month 用于选择一个年份+月份 选择时间: 选择周和年: 选择日期和时间...新增的结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 2.2.1 选择器和描述 选择器 描述 div:first-child 选择父元素的第一个子元素...p元素，并且是父元素的第二个元素，若不是则选择失败；p:nth-of-type(2)直接选取父元素下第2个p元素。
常见块级元素、行内元素、行内块元素的特点和区别 块级元素 (常见的块级元素div，p，h，form，li) 一行显示一个; 宽度默认为容器的100%； 可以设置高度宽度内外边距 块级元素可以包含其他的块级元素和文本...important（infinite）>id（1000）>class（100）>伪类选择器（:first-of-type）>伪元素选择器（::after）元素选择器（div） 如果优先级相同，选择最后出现的样式...高度塌陷 原因 很多情况父盒子不方便给高度，子盒子浮动脱离文档流不占位置，使父盒子高度为0 解决方案 在浮动元素末尾加一个空标签，设clear:both 父级添加overflow:hidden 使用...scroll //必会出现滚动条 auto //子元素内容大于父元素，显示滚动条，超出显示，不超出不显示 visible //溢出内容出现在父元素之外 hidden //溢出隐藏 10....溢出文字的省略显示 单行文本 white-space: nowrap //(强制一行显示) overflow: hidden //(溢出隐藏) text-overflow: ellipsis //(显示省略标记
（visible默认值溢出显示，hidden溢出隐藏，auto溢出滚动（超出内容才加滚动条），scroll溢出滚动（无论内容是否溢出都会加滚动条）） display 转变格式（inline行内，inline-block...val （jQuery中的val是专门来修改访问value属性值的） value 值 prop 访问修改属性值 css 控制css属性的函数 siblings 同级的 parent 父级的 children...子级的 addClass 添加类 removeClass删除类 hover 鼠标滑过 eq 找下标 animate 自定义动画函数 slideUp 隐藏（向上滑，就是把东西收起来，就隐藏了） slideDown...显示 （向下滑，向下展开，就显示了） slideToggle 一会显示一会隐藏 stop 停止（清除动画机制，在形成动画函数之前加stop） fadeIn 淡入 fadeOut 淡出 fadeToggle...： append 新增节点 appendTo新增节点 perpend给前面新增节点 perpendTo给前面新增节点 给父级加： after给后面增加节点 insertAfter给指定的后面新增节点 before
但如果认真阅读一下css规范，会发现overflow:hidden其实并不一定隐藏溢出内容。...overflow:hidden并不隐藏所有溢出的子元素 对于overflow:hidden的最大误解时：当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时，其内部的任何溢出的内容都将被剪裁...而普通元素在水平方向上的溢出被隐藏，垂直方向上撑开父元素。也就是说，普通元素的表现符合我们的预期，而绝对定位元素并不如很多人想当然的那样被隐藏。 理论依据 那么，这个原理到底是什么呢？...但如果后代元素的包含块是整个视区（通常指浏览器内容可视区域，可以理解为body）或者是该容器（定义了overflow的元素）的父级元素时，则不受影响。 即使是我重新整理过的语言，还是感觉有点绕。...这个大家其实比较熟悉，一个绝对定位的元素，其包含块是最近的拥有relative或者absolute定位属性的祖先元素，如果任何一级祖先元素都不符合，则其包含块是body元素（更正：浏览器内容区域）。
块级盒子：没有设置宽度时默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定 行内盒子：原本的宽度默认和内容一样宽，直接设置高宽无效，但是添加浮动后，它的宽度和高度可以直接设置，无需用display...浮动元素不会压住标准流文字 浮动元素会脱标，当它压住标准流时，文字不会被压住，会环绕在周围显示。 而定位元素脱标压住标准流时，文字会被压住。...5.显示和隐藏元素 display 属性可以用于设置一个元素应如何显示, display:none;隐藏对象 display:block;除了转换为块级元素之外，同时还有显示元素的意思 display...overflow: hidden; 内容溢出时将被隐藏，不会显示在元素框外部。还能消除内部浮动 overflow: scroll; 无论内容是否溢出，始终显示滚动条。...overflow: auto; 仅在内容溢出时显示滚动条，否则不显示。这个我们经常用。
a 等 ; 浮动 : 盒子模型 在 普通流 基础上 覆盖显示 , 多个 块级元素 可以在同一行 相互覆盖显示 ; 定位 : 盒子模型 在 浏览器 指定位置 显示 ; 普通流 相当于 Android 中的...简介 在开发页面时 , 遇到下面的情况 , 父容器 没有设置 内容高度 样式 , 容器中的 子元素 设置了 浮动样式 , 脱离了标准流 , 高度会默认设置为 0 像素 , 这样就会导致各种显示混乱情况...: 父容器 检测高度时 , 会考虑 浮动子元素 的高度 , 将浮动元素的高度 计算在父容器的总高度中 ; 2、清除浮动 语法 - 额外标签法 清除浮动语法 : CSS 选择器 { clear: 属性值...} overflow 样式可设置的属性值 : hidden auto scroll 父级元素设置 overflow 样式 清除浮动 的优缺点 : 优点 : 代码简单 缺点 : 无法显示 溢出 的元素...; 父级元素设置 overflow 属性 , 会 将溢出元素隐藏 , 或 生成滚动条 , 导致显示结果不理想 ; 这里提出第三种 清除浮动的方法 , 使用 after 伪元素清除浮动 ; 5、清除浮动
），注意：本地地址在预览时是不可用的，需要生成本地html才能生效，触发时在父级窗口打开url地址页面，这种一般适用于打开外部的地图、统计图表等内容。...1.3.2 父级框架父级框架对应内联框架，具体是指A框架内包含B框架，把框架内页面的能同个此交互控制A框架打开的页面。这个交互在实际运用中极少，作者还没使用过。...），注意：本地地址在预览时是不可用的，需要生成本地html才能生效，触发时在父级框架打开url地址页面，这种一般适用于打开外部的地图、统计图表等内容。...2.3 设置文本设置文本最常见的就是设置文本=输入框的内容，或者是设置显示文字的样式；除此之外也会用到一些函数，例如时间、日期、角度等等。...设置文字为标准时间——这是会用于系统的顶部或者底部设置文字为日期——获取系统日期，常用于维护后记录维护日期设置文字为时间——获取系统时间，常用于维护后记录维护时间设置保留小数点位数——计算后常用交互，例如计算百分比等
text-overflow: clip | ellipsis clip: 不显示省略标记(...) ellipsis: 当对象内文本溢出,显示(....)...both // 父级添加overflow属性方法 给父级添加： overflow为 hidden|auto|scroll 都可以实现 使用...auto :超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条 鼠标样式cursor cursor...text-overflow 文字溢出 text-overflow : clip | ellipsis clip : 不显示省略标记（...）...，而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记 如果看了觉得不错 点赞！转发！ 达叔小生：往后余生，唯独有你 You and me, we are family !
什么是 css 元素溢出当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。...overflow的设置项：visible 默认值, 显示子标签溢出部分。hidden 隐藏子标签溢出部分。auto 如果子标签溢出，则可以滚动查看其余的内容。2....示例代码 .box1{ width: 100px; height: 200px; background: red; /* 在父级上设置子元素溢出的部分如何显示...小结overflow样式属性是设置子标签溢出的显示方式常用使用overflow:hidden;来解决元素溢出
border-radius: 50%; 1.6display属性 display用于控制HTML元素的显示效果。 值 描述 none HTML文档中元素存在，但是在浏览器中不显示。...使块级元素变成行内元素 inline-block 使元素同时具有行内元素和块级元素的特点 display的none和visibility的hidden的区别：两者都可以隐藏元素，但是display将元素隐藏之后...浮动常用的三种方式：l left 向左浮动 right 向有浮动 none 默认值，不浮动 1.8.1浮动带来的影响 会使浮动框的父标签塌陷，就是当边框是父标签的时，如果子标签设置为浮动，则外边框就会塌陷成一条线...scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。
在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号。...：规定当文本溢出时，显示省略符号来代表被修剪的文本 white-space：设置文字在一行显示，不能换行 overflow：文字长度超出限定宽度，则隐藏超出的内容 overflow设为hidden，...普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略 white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow...：ellipsis生效的基础 text-overflow属性值有如下： clip：当对象内文本溢出部分裁切掉 ellipsis：当对象内文本溢出时显示省略标记（…） text-overflow只有在设置了...: hidden：文本溢出限定的宽度就隐藏内容 text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本 p { width
缺点：增加空标签，不利于页面优化 清除浮动方式4：父级定义overflow：auto 优点：简单，代码少，兼容性好 缺点：内部宽高超过父级div时，会出现滚动条 清除浮动方式5：万能清除法： 给塌陷的元素添加伪对象...） 4).不知道父元素高度，子绝父相，子元素top：50%，transform：translateY（-50%） 5).创建一个隐藏节点，让隐藏节点的height为剩余高度的一半 6).给父元素display...查找被选中的标签 伪元素选择器 ：：selection设置选中文本内容的高亮显示（只能用于背景色和文本颜色） 否定伪类选择器 not（） 语言伪类选择器 lang（取值） 优先级（权重）： 元素选择器...当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了） 6....1、后代选择器 示例：$(“p span”) 选取元素里的所有的元素（注：后代选择器选择父元素所有指定选择的元素，不管是儿子级，还是孙子级） 2、子选择器 $(“parent>child
溢出(重点) 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。...实际开发场景： 清除浮动 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。...3.2 去除图片底侧空白缝隙 原因： 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。 就是图片底侧会有一个空白缝隙。...给img 添加 display：block; 转换为块级元素就不会存在问题了。 4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式。...，而是简单的裁切 text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
