由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。...优势：不影响结构与表现的分离，语义化正确，代码量少 弊端：盒模型属性已经改变，会造成其他问题 方案6 使用内容生成的方式清除浮动 .clearfix:after { content:""...疑问 为什么会margin边距重叠？...overflow:hidden, 语义应该是溢出:隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为0了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？...我们可以看到，虽然有浮动的元素top，但是bottom的左边依然与包含块的左边相接触。
定义和用法 vertical-align 属性设置元素的垂直对齐方式。 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。...vertical-align: text-top; /*把元素的顶端与父元素字体的顶端对齐*/ vertical-align: text-bottom; /*把元素的底端与父元素字体的底端对齐。...*/ vertical-align: middle; /*把此元素放置在父元素的中部*/ vertical-align: top; /*把元素的顶端与行中最高元素的顶端对齐*/...我们能看见，图片是和文字x的下边缘，也就是基线对齐的，并不是和底线对齐。 现在我们调整图片的 vertical-align 属性值 为bottom，看看会怎样 <!...既然我们知道了这些，那我们就能想到更多的解决方案了。 1、设置vertical-align的值，不使用baseline，使用bottom/middle/top都是可以。
后，如上图所示，此时的父元素的高度就是高度最大的子元素的高度，即上面第一个子元素的高度 再添加 margin-bottom，值为 padding-bottom的负值，就会让父元素收缩成只有最高的子元素的高度...flex布局 因为flex布局，项目默认会拉伸为父元素的高度。...当然，想让它不拉伸为父元素的高度也可以，只需要设置父元素 align-items来防止拉伸，因为 align-items是设置项目在侧轴的排列方式，默认值为 stretch，即会拉伸。...grid-auto-flow为 column即可，会自动规划好元素如何排列。...为什么？因为我们设置的 main盒子的高度为100%，也就是说当内容超过屏幕高度时就会溢出。
防止垂直方向margin合并 实现多栏弹性布局 BFC的生效条件 以下CSS属性会触发元素生成BFC结界: 根元素（） 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的...为 flex 或 inline-flex 元素的直接子元素） 网格元素（display 为 grid 或 inline-grid 元素的直接子元素） 多列容器（元素的 column-count 或 column-width...绝对定位元素脱离文档流，相对于最近的非 static 祖先元素定位，可以利用left/right/top/bottom定位元素位置。...left/top/right/bottom都有值的定位 当对立位置（left与right，top与bottom）都设置值且元素没用固定宽高 此时元素的宽高是根据元素位置决定的，张鑫旭大佬在《CSS世界》...上述demo，box-item之所以能够垂直居中，得益于top/bottom设置了值，使元素产生高度100%的外部尺寸，而width/height固定元素的内部尺寸，使得 外部尺寸高度-内部尺寸高度=元素剩余可用空间高度
没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。 inherit 规定从父元素继承position 属性的值。...利用padding-bottom|margin-bottom正负值相抵； 设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom...时的高度， 当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度， 其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。...清除浮动的方式 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。...因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据， 这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。
top 与 bottom 对于内联元素，指的是元素的顶部（底部）和当前行框盒子的顶部（底部）对齐；即与 line-box 的顶部（底部）对齐。...2、百分比则是基于 line-height 来计算的 需要注意的是：除了 top 与 bottom 是使元素相对于整行垂直对齐外，其他属性值都是相对于父元素。...为什么不学以致用呢？按照之前的讲解，我们可以借助空白节点，空白节点我们看不见，但是如果可以给它设置一个高度，让它与父级高度一致，就解决了这个问题。怎么给高度呢？答案是借助伪元素。...那么我们解决这类问题就可以使用以下步骤了： 主体元素 inline-block 化 0 宽度 100% 高度的辅助元素（伪元素） vertical-align : middle 案例 2：实现多图列表的两端对齐...我们会惊喜的发现这个现象就是上面所说的任意一个块级元素，里面若有图片，则块级元素高度基本上都要比图片的高度高问题，那么产生的原因就知道了，是 line-height 与 vertical-align
通过元素的位置信息和滚动条滚动的高度 在这里，我们先介绍几个元素的位置信息和大小： Element.clientWidth Element.clientWidth 属性表示元素的内部高度，以像素计。...如果一个元素在视窗之内的话，那么它一定满足下面四个条件： top 大于等于 0 left 大于等于 0 bottom 小于等于视窗高度 right 小于等于视窗宽度 function isContain...() 方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回 null boundingClientRect：目标元素的矩形区域的信息 intersectionRect：目标元素与视口（或根元素）...root 属性，rootMargin 属性 很多时候，目标元素不仅会随着窗口滚动，还会在容器里面滚动（比如在iframe窗口里滚动）。容器内滚动也会影响目标元素的可见性。...它使用 CSS 的定义方法，比如 10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值。
设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin...网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。...如果我们在文档中添加 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。...内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top.../bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。
一般都要配合"left"、"top"、"right" 以及 "bottom" 属性使用。 **static:默认位置。...设置为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。 **relative:相对定位。...**相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么 样。...取值：left、right、both 3.2 父元素高度塌陷问题 为什么要清除浮动，父元素高度塌陷 解决父元素高度塌陷问题：一个块级元素如果没有设置height，其height是由子元素撑开的。...对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。
实践过程中经常会遇到某个属性的使用，浏览器渲染效果与预期效果不符，虽然通过死记硬背能避免或巧妙应用这种效果，但总感心虚发慌、毫无自信，因为不知晓背后的原理。...现介绍两个绝对定位的使用技巧： 1. 绝对定位元素，水平方向（top和bottom）或和垂直方向（left和right）的定位值不设置时，其位置受其前面的兄弟元素影响，如同其在常规流中的位置。...同样，由于触发按钮的高度是可能变化的，那么下拉列表与触发按钮顶端的绝对距离是不固定的，使用单位px是无法达到自适应的，通常的技巧是设置top:100%，其实利用我们上面提到的技巧，对top和bottom...一般为了水平居中会在水平方向上设置auto，为什么这种情况下，在垂直方向上设置auto，会导致垂直居中的效果呢？...对于绝对定位的元素，垂直尺寸的使用值必须满足下面约束： ‘top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ +
js 实现需要监听 scroll 事件，而且滚动时有可能是频繁的 scroll 事件触发，有可能会造成一定的性能浪费，所以我们来一起学习 css 实现方案 使用CSS实现阅读进度 使用 CSS 实现阅读进度的方法很有意思...类似于 js 的功能检查，可以检查 CSS 中某一属性或功能当前浏览器是否支持。...: linear-gradient(to right top, #0089f2 50%, #DDD 50%); /* 通过 calc 函数配合 100vh 就可以从总长中删除一屏的高度 */...; } 复制代码 设置盖住蓝块的白块 阅读进度条的高度为 3px ，因此设置白块的高度为 100% \- 3px，可以另外加一个 div 元素来设置白块，但小包推荐使用为元素 :before/:after...top 和 bottom 可以拉伸 height */ /* 设置高度为 100% - 3px */ top: 3px; bottom: 0; width: 100%;
+ padding-bottom + border-top + border-bottom border-box: width 和 height 属性设置的值就为元素整体的宽高，内边距和边框在已设定的宽度和高度内进行绘制...垂直属性 如果 margin-top 和 margin-bottom 都设为 auto（对于定位元素会有不同），会将它们计算为0。 height 设为 auto，一般等于其包含的子元素的总高度。...对于替换元素来说，元素行内框的高度等于元素的 height + margin-top + margin-bottom + padding-top + padding-bottom + border-top...替换元素 替换元素的 margin, border. padding 会影响行内框的宽度和高度 可以对替换元素设置 width 和 height。如果不设置宽高，会使用元素本来的宽度和高度。...table-row-group 此元素会作为一个或多个行的分组来显示（类似 tbody）。 table-header-group 此元素会作为一个或多个行的分组来显示（类似 thead）。
实践过程中经常会遇到某个属性的使用，浏览器渲染效果与预期效果不符，虽然通过死记硬背能避免或巧妙应用这种效果，但总感心虚发慌、毫无自信，因为不知晓背后的原理。...现介绍两个绝对定位的使用技巧： 1. 绝对定位元素，水平方向（top和bottom）或和垂直方向（left和right）的定位值不设置时，其位置受其前面的兄弟元素影响，如同其在常规流中的位置。...同样，由于触发按钮的高度是可能变化的，那么下拉列表与触发按钮顶端的绝对距离是不固定的，使用单位px是无法达到自适应的，通常的技巧是设置top:100%，其实利用我们上面提到的技巧，对top和bottom...一般为了水平居中会在水平方向上设置auto，为什么这种情况下，在垂直方向上设置auto，会导致垂直居中的效果呢？...对于绝对定位的元素，垂直尺寸的使用值必须满足下面约束： 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom
position: 指定一个元素在文档中的定位方式，top，right，bottom和 left 属性则决定了该元素的最终位置。...元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。...没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right 或者 z-index 声明）。...transparent; border-right: 50px solid transparent; } 浮动相关 为什么要清除浮动 主要是为了解决父元素高度坍陷问题。...: 50%; left: 50%; transform: translate(-50%,-50%); } 3、使用margin-top -一半的高度 .parent{ height: 600px
定位为什么需要定位> 定位可以让盒子在指定盒子内自由移动位置，并压住其他盒子，而浮动只能让盒子排在一行；定位的组成>定位是定位模式+边偏移> 定位模式用于指定一个元素在文档中的定位方式，使用CSS属性...> 必须要有left，top right bottom中的一个属性- 定位总结；!...设置自身元素宽度的一半- 定位的特殊特性> 行内元素添加定位，可以直接设置宽度和高度> 块内元素添加定位，默认的是内容的高度和宽度> 脱标的盒子不会触发外边距塌陷问题- 浮动和定位的区别： > 浮动会压住后面的盒子...，不会压住盒子中的文字；(浮动最初的目的是为了做文字环绕效果的，文字会围绕着浮动元素)> 绝对定位会压住标准流的盒子内容；网页布局总结：网页布局是通过标准流，浮动，定位一起完成的；标准流可以让盒子上下或左右排列浮动可以让多个块级元素一行显示或左右对齐盒子定位有层级概念...html结构导航栏的实际开发中，不会直接使用连接a,而是使用li包含链接的做法> 直接使用a,搜索引擎会辨别为关键字堆砌，有降权的风险
屏幕可见区域高（内容的可视高度，不包括边框，边距或滚动条）：document.body.clientHeight 正文内容高（整个元素的高度，包括带滚动条的隐蔽的地方）：document.body.scrollHeight...一、先来这个我平时用的比较多的，height 它主要是返回元素的高度或者说这个div的内容的高度，它是jquery对像，如果只是想取到某个内容的高度，那完全可以使用这个，按照上面所设置的参数，得到的就是...三、我么怎么用的clientHeight和scrollHeight clientHeight在页面上返回内容的可视高度（不包括边框，边距或滚动条），结果显示上图h3； scrollHeight返回整个元素的高度...在.outerHeight()计算中总是包含padding-top ,padding-bottom 和 border-top，border-bottom ；如果includeMargin参数是true，...那么margin (top 和 bottom)也会被包含。
（1）外层div使用position：relative；高度要求自适应的div使用position:absolute;top:100px;bottom:0; left:0;right:0; （2）使用...因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请 求头的大小，降低请求时间，从而达到降低整体请求延时的目的。...（2）top和bottom这两个垂直方向的百分比值计算跟height的百分比值是一样的，都是相对高度计算的。...（3）当相对定位元素同时应用对立方向定位值的时候，也就是top/bottom和left/right同时使用的时候，只有一个方向的定位属性会起作用。...而谁起作用则是与文档流的顺序有关的，默认的文档流是自上而下、从左往右，因此top/bottom同时使用的时候，bottom失效；left/right同时使用的时候，right失效。
地址'"/> 注意：如果使用不当，在IE内核的浏览器下会造成死循环。... 值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | | <percentage...:baseline(元素的基线与父元素的基线对齐) vertical-align:sub(降低元素的基线到父元素合适的下标位置) vertical-align:super(升高元素的基线到父元素合适的上标位置...:top(把对齐的子元素的顶端与行框顶端对齐) vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐) vertical-align:middle(元素的中垂点与父元素的基线加...1/2父元素中字母X的高度对齐) vertical-align:(+-n)px(元素相对于基线上下偏移npx) vertical-align:x%(相对于元素的line-height值) vertical-align
下面都以高度来说，详细的区别在取某块或某元素高度的时候，这些height、offsetheight、clientheight、scrollheight、innerheight、outerheight的不同的地方...jquery给取出值并放在各自的框中 一、先来这个我平时用的比较多的，height 它主要是返回元素的高度或者说这个div的内容的高度，它是jquery对像，如果只是想取到某个内容的高度，那完全可以使用这个...三、我么怎么用的clientHeight和scrollHeight clientHeight在页面上返回内容的可视高度（不包括边框，边距或滚动条），结果显示上图h3； scrollHeight返回整个元素的高度...在.outerHeight()计算中总是包含padding-top ,padding-bottom 和 border-top，border-bottom ；如果includeMargin参数是true，...那么margin (top 和 bottom)也会被包含。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
