比较常用的方法是，将 table 的 thead 和 tbody 拆分成两个表格，用 div 包起来，给 div 设置固定高度和 overflow: auto; 属性（其实只给 tbody 的 table... div> 此外，要给 table 添加一个 table-layout: fixed; 属性：使列宽由表格宽度和列宽度设定。其他属性参考这篇文章。...至于对齐，可以使用 固定宽度，只需要给第一行设置一个宽度，下面的会自动与之对齐。如果表格宽度是 100% ，可以给前几列固定宽度，最后一个不设置，使其宽度自适应。...注意：因为我直接使用的 Bootstrap ，没有出现问题，如果是原生的表格样式出现对不齐的现象，可以尝试把 div 设置为盒模型： .table-box{ box-sizing: border-box...; } 另外，滚动条和上下箭头可能会影响元素的高度或者宽度。
块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。...== visible 规则: 属于同一个 BFC 的两个相邻 Box 垂直排列 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 BFC 中子元素的 margin box 的左边，...div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。...若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 外层div使用position：relative；高度要求自适应的div使用position: absolute
引言 视差滚动（Parallax Scrolling）是一种效果， 能够使不同层次的元素以不同的速度进行滚动， 从而产生了视觉上的深度感和动态效果。...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中， 然后设置transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。...例如，较远的东西（即 z 轴上的负平移）会移动得更慢。相反，距离较近的东西（即 z 轴上的正平移）会移动得更快。 另一个物理效应是规模。 如果我们把一些东西移得更远，它就会显得更小。...核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能，地址栏有时可见，有时隐藏，改变了视口的可见大小。
时代发展，再辉煌的过去，如果没有改变，终将会被埋汰。...我们可以利用绝对定位元素的拉伸特性，使内滚动容器高度自适应匹配。...无法滚动的弹出层 基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： 对于黑色半透明覆盖层，传统实现是这样的：如果要兼容IE6浏览器...class="container"> div> 此时，弹框在一个可滚动的容器之中，妈妈再也不用担心我不能愉快地翻滚了！...五、结束语 由于传统窗体滚动已经深入人心，所以我们可能会觉得内滚动布局似乎有些坑；但是，如果当年是内滚动布局天下，我们又该如何看待新兴的窗体滚动布局呢？
6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？...BFC的区域不会与float box重叠。 BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 计算BFC的高度时，浮动元素也会参与计算。...div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。...若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 外层div使用position：relative；高度要求自适应的div使用position: absolute
6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？...BFC的区域不会与float box重叠。 BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 计算BFC的高度时，浮动元素也会参与计算。...text { /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的...若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 外层div使用position：relative；高度要求自适应的div使用position: absolute
看着此页面，立马让我想起了6年前刚毕业那会的青葱岁月，那时候的页面的基本上就是这样的调调，小小的空间里有着小小的世界。时代发展，再辉煌的过去，如果没有改变，终将会被埋汰。...我们可以利用绝对定位元素的拉伸特性，使内滚动容器高度自适应匹配。...但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...class="container"> div> 此时，弹框在一个可滚动的容器之中，妈妈再也不用担心我不能愉快地翻滚了！...五、结束语 由于传统窗体滚动已经深入人心，所以我们可能会觉得内滚动布局似乎有些坑；但是，如果当年是内滚动布局天下，我们又该如何看待新兴的窗体滚动布局呢？
一、渐变 渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变。...color2：过渡颜色，指定过渡颜色的位置 stop. color3：结束颜色。你还可以在后面添加更多的过渡颜色和位置，表示多种颜色的渐变。...，如果背景图定义在div里面，而显示的位置在浏览器范围内但是不在div的范围内的话，背景图无法显示。...*/ local与scroll的区别：当滚动的是当前盒子（div）里面的内容的时候， local:背景图片会跟随内容一起滚动； scroll:背景图片不会跟随内容一起滚动。...2、新增的background属性 2.1、background-size CSS里的 background-size 属性能够让程序员决定如何在指定的元素里展示，它通过各种不同是属性值改变背景尺寸呈现的大小
注意： 实际开发中，一个页面基本都包含了这三种布局方式 3.浮动 loat 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。...一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。 这是因为浮动会脱标，导致不和标准流在一起排序了，这样就可能导致浮动和标准流发生重叠。...父容器恢复高度 当产生浮动后，我们的浮动元素盒子默认高度是0，所以如果一个盒子里装的全是浮动盒子，该盒子高度就为0，就会坍塌掉，同时还会影响到后面标准流的布局。...（当然前面的标准流不会被影响） 这时如果想要不被影响，就要清除浮动，从而它们就能使浮动的盒子恢复到标准流中：高度能恢复成应有的高度，也不会被之前的标准流给重叠影响到，同时它们浮动盒子之间的布局也不会被影响...如果元素离开视口顶部时没有足够的空间放置它，它将像相对定位一样继续滚动，直到可以固定在指定位置。 粘性定位不脱标，原有空间一直不变。
定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。 一、文档流 在讨论CSS定位之前，我们首先需要理解“文档流”这一概念。... div class="block">这是另一个块级元素div> 在这个示例中，我们使用了一个块级元素和两个行内元素。...如果一个元素没有定位上下文，那么它将相对于视口进行定位。 直到滚动超过它的容器。...四、实战应用示例 一个固定导航栏 固定导航栏是一种常见的网页布局需求，它使导航栏在滚动页面时始终保持在视口的顶部。 <!
object-fit 属性: 指定可替换元素（例如： 或 ）的内容应该如何适应到其使用高度和宽度确定的框。...object-fit - 指定可替换元素的内容应该如何适应到其使用高度和宽度确定的框 描述: 你可以选择对容器内的图像作其他方式的处理。...round: 随着允许的空间在尺寸上的增长，被重复的图像将会伸展 (没有空隙), 直到有足够的空间来添加一个图像。...; /* values，一个定义 x 坐标，另一个定义 y 坐标 */ background-position: 25% 75%; /* values *...其效果类似于两张不透明的纸重叠（overlapping）在一起。 multiply: 最终颜色为顶层颜色与底层颜色相乘的结果。 如果叠加黑色层，则最终层必为黑色层，叠加白色层不会造成变化。
1、浮动的设置：css属性float：left/right/none 左浮动/右浮动/不浮动（默认） 2、浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘...3、浮动的影响：对附近的元素布局造成改变，使得布局混乱 因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是内部元素撑开的，但是当内部元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌...2、结尾处加空div标签clear:both ? 原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。...缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。 建议：不推荐使用，只建议高度固定的布局时使用。 4、父级div定义overflow:auto ? ...建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 5、父级div定义伪类:after和zoom ?
**位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。...如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。 如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。...取值：left、right、both 3.2 父元素高度塌陷问题 为什么要清除浮动，父元素高度塌陷 解决父元素高度塌陷问题：一个块级元素如果没有设置height，其height是由子元素撑开的。...3.3 清除浮动的方法 方法1：给父级div定义 高度 原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。...BFC这个元素的垂直方向的边距会发生重叠，垂直方向的距离由margin决定，取最大值 BFC 的区域不会与浮动盒子重叠（清除浮动原理）。 计算 BFC 的高度时，浮动元素也参与计算。
垂直方向上，自上而下排列，和文档流的排列方式一致 2. 在 BFC 中上下两个相邻的两个容器的 margin 会重叠 3. 计算 BFC 的高度时，需要计算浮动元素的高度 4....解决高度塌陷问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为 0。解决这个问题，只需要把父元素变成一个 BFC。常用的办法是给父元素设置overflow:hidden。 3....答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。...• 共同点： • 改变行内元素的呈现方式，将 display 改为 inline-block • 使元素脱离普通文档流，不再占据文档物理空间 • 覆盖非定位文档元素 • 不同点： • absolute...` 是浏览器滚动的过的距离； `imgs.offsetTop` 是元素顶部距离文档顶部的高度（包括滚动条的距离）； 内容达到显示区域的：`img.offsetTop < window.innerHeight
BFC的区域不会与float box重叠。 BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 计算BFC的高度时，浮动元素也会参与计算。...若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。 若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。...解决： 1、font-size 2、改变书写方式 3、使用margin负值 4、使用word-spacing或letter-spacing 33、有一个高度自适应的div，里面有两个div，一个高度100px...，希望另一个填满剩下的高度 外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left:...px实际上是一个按角度度量的单位。 54、用于控制背景图像滚动的属性是什么？ background-attachment：该属性设置背景图像是随页面其余部分滚动还是固定滚动。
CSS盒模型：标准模型 + IE模型 标准模型 div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化 box-sizing:content-box;.../*设置标准盒子*/ 怪异模型|IE模型 div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化 box-sizing:border-box...，另一个是border-box。...32、什么是外边距重叠？重叠的结果是什么？ 外边距重叠就是 margin- collapse在CSS中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...39、z-index属性在什么情况下会失效 通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。
div> div> div> 优点： content 可以动态改变高度(不需在 CSS 中定义)。...缺点： Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)....因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。...div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况) 追加元素 这种方法，在 content 元素外插入一个 div。...(这个方法的应用应该也很广) 设置宽度 这个方法使用了一个 position:absolute，有固定宽度和高度的 div。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
