一、CSS特性 1.继承：子元素继承父元素的某些样式（因为有些元素有默认值，所以它们就不用继承父元素的）。 ... [6]:当父元素没有指定高度并且子元素有浮动时，这个父元素的高度不会自动增加. [7]:在给盒子的父盒子加居中时，一定要有宽度才能使得父盒子居中.... [8]:当有浮动元素有与浮动方向一样的外边距时，在IE6中会出现双倍间距的现象，解决方法是：给此元素加：display：inline;就可以很好的解决....十、部分CSS样式详解 1.CSS溢出 功能：设置当对象的内容超过其指定高度及宽度时如何显示 语法：Overflow:visible(默认值，不剪切内容，也不添加滚动条) ...auto(在必须时对象内容才会被裁切或显示滚动条) hidden(不显示超过对象尺寸的内容) scroll(总是显示滚动条) 2.Zoom
使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。...当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息...；当为auto时，将由浏览器决定如何处理溢出部分。...，最后让子容器并排充满父容器，代码如下 <!...设为border-box之后，padding和border的厚度可以随意调，并不会溢出父元素。
但当我们给子标签添加浮动float后，由于子标签的浮动状态导致父标签不会进行高度自适应，使其高度不存在。...记住哪个盒子的子元素有浮动，就在哪个盒子上添加清除浮动 具体方法为： .clearfix::after{ content: ''; display: block; clear: both;...} 事件伪类 事件伪类就是当进行对应事件时，会更改标签的样式，比较常见的如： li:hover{} //鼠标悬停 li:active{} //鼠标点击 input:focus{} //获取到焦点 列表伪类...这里有三个比较常见的： li:first-child{} //匹配父元素中的第一个子元素 li:last-child{} //匹配父元素中的最后一个子元素 最后一个为:nth-child(){}，这个伪类比较复杂...内容会被修剪，浏览器会显示滚动条以查看超出内容 auto 浏览器定夺，如果内容被修剪，就会显示滚动条 3.文本溢出省略 text-overflow 我们的目的是将超出内容省略，并用省略号表示，这一步就是
scollTop scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个”non-scrollable”属性）， scrollTop将被设置为...设置scrollTop的值小于0，scrollTop 被设为0 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值....总结：元素发生溢出时可以设置scrollTop，设置的值为元素里内容向上滚动的不可见区域的高度 scollHeight 判定元素是否滚动到底 如果元素滚动到底，下面等式返回true，没有则返回false.... element.scrollHeight - element.scrollTop === element.clientHeight 总结：当元素无溢出时为元素本身的高度，当元素发生溢出时为元素内容里面的总高度...，不如状态等于0的一个一个的置顶！
当出现滚动条时，对象不会随着滚动。 position: sticky（CSS3） 粘性定位，该定位基于用户滚动的位置。 在常态时,它的行为就像 position:relative，遵循常规流。...当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置， 脱离常规流。 position: inherit 从父元素继承 position 属性的值。...决定 bfc的区域不会与float的元素区域重叠 计算bfc的高度时，浮动元素也参与计算 bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素 具体特性解释，可移步至CSS中的BFC详解 什么是...示意图： image.png 解释下什么是浮动和它的工作原理？ 什么是浮动？ 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。...关于这一点，normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
-滚动条 scrollTop和scrollHeight 总结 重要的勾子 即将废弃的勾子 ---- 案例引入 需求:定义组件实现以下功能： 让指定的文本做显示 / 隐藏的渐变动画 从完全可见...---- 父子组件 在A的类组件的render方法中调用B组件的标签，此时A是父组件，B是子组件 class A extends React.Component { //初始化状态 state={...它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。...scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。...在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。
我们在日常编码的时候，隐藏一个 dom 元素有很多种方式，今天我们来盘点一下隐藏 dom 元素有哪些方式，最后一种，你绝对没有用过。...: hidden 隐藏的元素仍然会存在文档流中，也就是说它仍然会占据页面的位置空间，只是不可见而已。...只针对只包含文本内容的容器有效overflow 溢出隐藏通过设置容器的 height: 0 和 overflow: hidden，也能做到隐藏元素的效果。...因为可以把溢出来的内容直接隐藏掉，从而实现元素隐藏的效果。移动元素至视口外我们还可以通过障眼法，将元素脱离文档流并将其移动到视口外面实现元素隐藏的效果。...，以后在面对不同的需求时，就可以使用上述不同的方法去匹配相应的需求，从而达到事倍功半的效果。
较长的边会溢出 object-fit: cover; none 和父容器的宽高没关系。展示其图片最原始的宽高比，以自身图片的“中心”为基点，放置到父容器的“中心”位置。...在上面 object-fit 的展示中，我们发现可替换元素的对齐方式都是自动的。 比如 object-fit: fill; 的左上角和父容器的左上角对齐。...7、font-stretch 为字体定义一个正常或经过伸缩变形的字体外观，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。...参考的基准为父元素有多宽多高。 类似子元素的 div 撑满父元素的宽，fill-available 不仅可以撑满宽还能撑满高。...不同的是 max-content 在计算时按照文字不换行时计算，如果超过父元素，则不换行，直接产生滚动条；而 fit-content 在超过父元素后，换行，不产生滚动条。 ?
2. scrollWidth和scrollHeight 2.1 概念 element.scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。...element.scrollHeight ：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。...2.2 实例 在页面中，溢出说得更加通俗一些就是有没有滚动条出现，出现了，说明子元素有一部分被父元素遮挡了，就溢出了，下面给出两个实例，一个没有溢出（没有滚动条），一个溢出了，分别观察他们的scrollWidth...当我们拉动水平滚动条时，元素与视图就不再是左上角顶点重合了，水平之间是存在距离的（按左上角顶点重合计算),可以看到现在的scrollLef有了数值，因为没有移动垂直滚动条，因此垂直方向仍然是没有距离的。...当我将水平，垂直滚动条都拉到底部时，scrollLeft 和 scrollTop 都 分别为116.8 和156.8 ，我设置的元素宽高分别为：200 180 ，视图（子元素）宽高分别为：300 320
2.2.子元素宽度设为100%时的奇怪现象原理探究 父元素的宽度 = 图片宽度 + 文字内容宽度 浏览器渲染原理：先下载文档内容，加载头部样式资源，然后按从上到下、自外而内的顺序渲染dom内容。...本例的现象产生的原因就是：当渲染到父元素时，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候，父元素的宽度已经固定，此时的width:100%就是以固定好的父元素的宽度...overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠，不会影响布局: /* 父元素设置 */ .pd-...则不会，此时可以通过margin-bottom实现滚动容器的底部留白 其本质区别在于：chrome是子元素超过父元素content box尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding...box尺寸时触发滚动条显示 2.margin合并条件 块级元素，但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并的三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 *
radius 半径（距离） 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。...解决方案： 可以为父元素定义1像素的上边框或上内边距。 可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。...auto : 超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条 应用:溢出的文字隐藏 .hid-kk...# CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 注意： 1....即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。 行内样式优先。
35.在网页中的应该使用奇数还是偶数的字体？为什么呢？ 36.margin和padding分别适合什么场景使用？ 37.元素竖向的百分比设定是相对于容器的高度吗？ 38.全屏滚动的原理是什么？...49.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?...73.在vue项目中如果methods的方法用箭头函数定义结果会怎么样？ 74.vue怎么实现强制刷新组件？ 75.如何在子组件中访问父组件的实例？...170.当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？...191.["1","2","3"].map(parseInt)的结果是什么? 192.三种方法判别数组的优劣和区别？ 193.Vue父组件和子组件声明周期钩子函数执行顺序？
2.2.子元素宽度设为100%时的奇怪现象原理探究 父元素的宽度 = 图片宽度 + 文字内容宽度 浏览器渲染原理：先下载文档内容，加载头部样式资源，然后按从上到下、自外而内的顺序渲染dom内容。...本例的现象产生的原因就是：当渲染到父元素时，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候，父元素的宽度已经固定，此时的width:100%就是以固定好的父元素的宽度...overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠，不会影响布局: ?...其本质区别在于：chrome是子元素超过父元素content box尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding box尺寸时触发滚动条显示 2.margin合并条件 块级元素，...裁切界限:border box: 一个设置了overflow: hidden的元素同时设置了padding和border,则子元素超出容器宽高设置时,裁切的边界是border box内边缘而不是padding
当absolute元素覆盖另一个absolute元素，且HTML端不方便调整DOM的先后顺序时，需要设置z-index: 1。...使用overflow:hidden隐藏溢出内容 overflow:hidden这种方式可以隐藏掉固定区域外的内容，它可以有效控制显示区域。但应注意，使用它时需要给它定义宽度和高度，否则会无效。...Bootstrap框架中的网格系统就是将容器平分成12份。 你用过媒体查询，或针对移动端的布局/CSS 吗？...它的特殊之处在于它不用像absolute疯狂“找爸爸”，它天生参照于浏览器窗口！当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动。...4.流动布局 流动布局是各个区块的位置都是浮动的，不是固定不变的。 float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚到前面元素的下方，不会再水平方向溢出，避免了水平滚动条的实现。
对于inline的元素这个属性一直是0 offsetTop/offsetLeft/offsetRight/offsetBottom： 代表元素距离父级元素的相对距离，但是父级元素需要具有relative...+ 溢出内容的尺寸，这个只针对dom的子元素出现溢出情况时，才有效果，不然它始终和clientHeight相等 scrollTop 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度...在没有滚动条时scrollTop==0。...注意:当元素溢出浏览器的视口，值会变成负数。...就是元素底部距离滚动容器顶部的距离，再减去20像素，保证出现在视口中间 const needScroll = top - containerOffsetTop - 20; if (needScroll
当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。...一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。...scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。...设置scrollTop的值小于0，scrollTop 被设为0 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值 var scrollTop = element.scrollTop...var scrollWidth = element.scrollWidth; scrollHeight Element.scrollHeight 是一个只读属性，它是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容
仅供学习，转载请注明出处 css元素溢出 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。...当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。...当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。...当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。...当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
Element对象 Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。...Element.clientWidth属性返回元素节点的 CSS 宽度，同样只对块级元素有效，也是只包括元素本身的宽度和padding document.documentElement的clientHeight...（单位像素），包括溢出容器、当前不可见的部分。...Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素数量，Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的像素数量。...通常，这两个值是指相对于父节点的位移。 下面的代码可以算出元素左上角相对于整张网页的坐标。
通过将父元素设置为相对定位（position: relative;），而将子元素设置为绝对定位（position: absolute;），可以使子元素的定位基于父元素，而不是整个页面。...定位参考点 参考定位元素的视口 **视口 ：对于 ****PC**浏览器来说，视口就是我们看网页的那扇“窗户” 特点 脱离文档流，会对后面的兄弟元素、父元素有影响。...粘性定位的参考点 离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先 可滚动祖先： 使用overflow属性用来设置滚动机制 overflow: visible...粘性定位通常用于创建吸顶效果或侧边栏固定效果，当用户滚动页面时，元素会始终保持在视口内的特定位置。...滚动属性（特别是 overflow: auto;）可以在元素内容超出容器时提供滚动条，使用户能够滚动查看全部内容，与粘性定位结合使用时，可以在固定位置时仍然允许内容的查看和操作。
状态类伪类：选择元素的不同状态的样式，比如 a:hover（鼠标覆盖时）、a:focus（获得焦点时）等 结构类伪类：根据元素所处结构、位置等选择样式，比如 li:first-child（父元素中的第一个子元素...当要设置的属性值能自动继承并且父元素有相应的定义值时，该元素会继承父元素的值，即行为与`inherit`相同 2....当 box-sizing 值为 border-box 时，width 与 height 代表除了 margin 以外的盒模型的宽和高； 当 box-sizing 值为 content-box 时，width...控制盒内元素溢出方式，常用 visible、hidden、scroll 三种值，分别代表显示溢出内容、隐藏溢出内容、对溢出内容增加滚动条 # 块级 & 行级 块级盒子 行级盒子 在常规流中不和其他盒子并列摆放...可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
