你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器? CSS scroll snap 可以做到这一点。在早期的前端开发中，我依靠 JS 插件来创建滑块组件。...根据CSS规范，为开发者提供良好控制的滚动体验是引入 CSS scroll snap的主要原因之一。它增强了用户体验，并使其更容易实现滚动体验。...: auto; } 多年来，使用white-space: nowrap是一种流行的CSS解决方案，用于强制元素保持内联。...但是，如果该值是proximity，则浏览器将完成这项工作，它可能会吸附到定义的点(在我们的例子中start)。注意，proximity 是默认值，但是为了清晰起见，我们这里还是声明一下它。...参见下图： 滚动容器的 start 子项目将吸附到其水平滚动容器的开始处。 滚动容器的 center 子项目将吸附到其滚动容器的中心。 滚动容器的 end 子项将对齐到其滚动容器的末尾。
你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器? CSS scroll snap 可以做到这一点。在早期的前端开发中，我依靠 JS 插件来创建滑块组件。...image.png 根据CSS规范，为开发者提供良好控制的滚动体验是引入 CSS scroll snap的主要原因之一。它增强了用户体验，并使其更容易实现滚动体验。...: auto; } 多年来，使用white-space: nowrap是一种流行的CSS解决方案，用于强制元素保持内联。...但是，如果该值是proximity，则浏览器将完成这项工作，它可能会吸附到定义的点(在我们的例子中start)。注意，proximity 是默认值，但是为了清晰起见，我们这里还是声明一下它。...参见下图： image.png 滚动容器的 start 子项目将吸附到其水平滚动容器的开始处。 image.png 滚动容器的 center 子项目将吸附到其滚动容器的中心。
后来还是觉得这种方式需要涉及js对页面结构的改变，于是乎… 实现：如何实现文首展示的效果 这基于position定位是会“重合”的：在两个行内元素都设置了定位属性（但没有加top/left/bottom...，第三个元素则写了展示时的“默认大小”：如你所看，box承载的是页面，所以它是100vw，而class为“z_two_page”的元素这里设置了12rem ，你完全可以将这个值换掉！...那如何将“哈哈哈”展示在视野中？—— js控制“代表页面的元素”整体移动即可。...但是本文上面css代码中加了 pointer-events 属性：元素是否穿透；设置为none时就可以不用在意对应元素是否存在了（从事件上看此时有和没有一样了），也就不用控制display什么的，大大增强性能了有木有...，比如：右侧留白问题、原生手势对页面整体的影响等，我们一般会在css中设置 html{max-width: 100vw;overflow-x: hidden;} 。
或将white-space设置为nowrap 的元素 Overflow 有哪些值 overflow属性可以有收下属性： visible, hidden, scroll, auto .element {...第一个值用于水平轴，第二个值用于垂直轴。 Visible ? overflow 默认值为 visible，其中的内容可以超出其父值。...MDN 上这样说到： 注意: 设置一个轴为visible（默认值），同时设置另一个轴为不同的值，会导致设置visible的轴的行为会变成auto`。...接下来，我们将讨论与overflow相关的longhand属性 Overflow-X 该家伙负责x轴或元素的水平边。 Overflow-Y 该家伙负责y轴或元素的垂直边。...下图是使用基于动量的滚动的效果。 ? 内联块元素 根据CSS规范： 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈在同一行内，允许空格。
行内元素和块级元素有什么区别？ 定义 行内元素：没有宽高不能换行，不可以改变宽高。 块级元素：有宽高能换行，可以改变宽高。 区别 1、默认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。...这里设置的text-align是设置在外层的div当中，评论区有提到，因为上面讲了行内元素设置宽高是无效的，所以我们需要的居中其实是将块级元素当中的行内元素居中。...如何使用css来实现禁止移动端页面的左右划动手势？ CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。...如何检测浏览器所支持的最小字体大小？ 可以使用 JS 设置 DOM 的字体为某一个值，然后再取出来，如果值设置成功，就说明支持。 7. css sprites是什么，怎么使用？...除了auto (1 1 auto) 和 none (0 0 auto)这两个快捷值外，还有以下设置方式： 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取
一、所有的菜单项单行显示，不换行 前端的默认布局方式是 流式布局 ，块级元素 在流式布局中独占一行，块级元素会自上而下的排列且在默认宽度是父类元素的100%而高度默认被内容撑开，例如 div。...二、菜单可以左右滑动 CSS 中有一个属性 overflow 可以控制对于超出可视区域的内容如何处理。...: inherit; 五、点击按钮，让某个菜单滚动到中间 其实就是一个方法 Element.scrollTo() ，可以使界面滚动到给定元素的指定坐标位置。.../day6.js"> 利用CSS让元素可以左右滑动 </head...有一个属性 overflow，它可以控制对于超出可视区域的内容如何处理 */ /* x轴可以滚动 */ overflow-x: scroll; /* y轴内容超出隐藏 */
（IE8+） 注：overflow-x与overflow-y值不同，其中一个属性值被赋予visible，而另一个被赋值为hidden/scroll/auto，则visible会被重置为auto。...因为IE7下width宽度计算为整400px，然而垂直滚动条占用了部分宽度，所以出现了水平滚动条。想要去掉这个水平滚动条，只需要删除width:100%就可以了。 ...答：①overflow元素自身作为包含块； ②overflow元素子元素为包含块； ③transform声明当作包含块：ⅰoverflow元素自身transform（仅支持：IE9+/FireFox... CSS3的resize属性，起作用的前提是overflow不能是visible。 ...（2）锚点定位的本质 在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。 前提：①容器可滚动；②锚点元素在容器内。
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。...可选值 row：主轴方向为水平向右 column：主轴方向为竖直向下 row-reverse:主轴方向为水平向左 column-reverse:主轴方向是竖直向上。...弹性盒子元素将向结束位置对齐。...css3 是否使用css3 transform来实现滚动效果，默认true，不用修改，CSS3的动画效率比较js高。...loopTop 滚动到顶部后是否连续滚动到底部，默认false loopBottom 滚动到底部后是否连续滚动到顶部，默认false continuousVertical 是否循环滚动，默认为false
overflow-x/y（ie8+）规范： 如果overflow-x、overflow-y的值相同，则等同于overflow设置了这个值。...如果overflow-x、overflow-y的值不相同，且其中一个属性的值被赋予visible，而另一个被赋予scroll、auto、hidden等值，那么visible会被重置为auto。...比如：overflow-x：hidden；那么overflow-y就会被重置为auto。...其overflow值默认为auto。 所以，如果在单页应用中想要去掉页面的默认滚动条效果，只需要： html{overflow: hidden;} 没有必要设置body。...利用overflow形成BFC的应用： 清除浮动影响 父元素设置overflow：auto/scroll/hidden；可以清除子元素浮动带来的影响。
例如，您可以定制滚动条样式以匹配网站的外观和感觉。在本文中，我们将讨论何时设置水平和垂直滚动条，如何设置它们以及如何使用CSS自定义它们的外观。...body的高度以使其足够长以滚动以下CSS代码片段描述了如何将初始导航栏样式设置为侧边栏并调整body的底部边距。...overflow-y属性接受两个值之一：scroll或auto。将属性的值设置为scroll会指示浏览器始终向容器添加滚动条。无论目标容器是否有超出其边界的内容，容器始终会有一个滚动条。...将overflow-x属性的值设置为scroll可以将水平滚动条添加到容器的底部。您的网站用户将能够平稳地滚动容器中的内容。您已成功创建了水平和垂直滚动条。...为默认滚动条设置样式默认滚动条出现在网页的右侧。要为默认滚动条设置样式，我们选择body标签并向其添加样式。
最近复习html和css的内容，想起来一个之前没想明白的问题，为什么块级元素margin：0 auto可以实现水平居中，而margin:auto不能实现水平垂直双居中呢？...{ height: 100px; width: 100px; background: red; margin: 0 auto; } 块级元素设置居中的前提是设置了width，若在css中没写width...auto指平分剩余空间 比如上图中我父div宽度为200px，子div宽度为100px,则水平方向平分剩余宽度为(200-100)/2 我们知道margin:0 auto和margin:0 auto 0...divmargin:0 auto 0 0，只给了右边设置了auto相当于让右边自己平分剩余空间，即把父div的剩余空间全都给了右侧； 怎么实现垂直方向居中 为什么margin:auto不能实现在垂直方向上的居中呢...因为默认垂直方向上没有剩余空间 如果子元素设置了绝对定位且四边都设为0，子元素会填充整个父元素的所有剩余空间，auto就能平均分配水平和垂直方向的剩余空间了。
前端课程——显示与隐藏 显示与隐藏 display display:none; 这种方式将元素设置隐藏后，该元素不会在占用空间。 设置为以下属性时，会取消display的隐藏。...block 将元素设置为块级元素 inline 将元素设置为内联元素 inline-block 将元素设置为行内块级元素 visibility visibility:hidden; 这种方式设置元素为隐藏后...，该元素依旧占有页面空间 通过将visibility属性值设置为visible将元素显示 ?...始终提示滚动条，效果不好 auto：浏览器决定 如果内容溢出，提供相应的滚动条；没有溢出不做任何处理 overflow-x属性 水平方向上的溢出 visible: 默认值。...auto: 由浏览器决定，如果内容被修剪，就会显示滚动条。 overflow-y相似。 text-overflow text-overflow属性确定如何向用户发出未显示的溢出内容信号。
text-align text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。...背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。 ---- background-position background-position 为背景图片设置初始位置。...span只需要修改一下对应的display属性即可 ---- white-space white-space CSS 属性是用来设置如何处理元素中的 空白 (en-US)。...取值： left：表明元素必须浮动在其所在的块容器左侧的关键字。 right：表明元素必须浮动在其所在的块容器右侧的关键字。 ---- clear 有时，你可能想要强制元素移至任何浮动元素下方。...---- align-items CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。
.css单位 1.尺寸单位 1. px 像素(由一连串的点来组成，像素越高点越多) 2....1.块元素：能设置 div p h1-h6 ul ol 2.行元素：不能设置 a span i u del 3.行内块元素：input ...overflow-x :水平溢出 overflow-y :垂直溢出 取值 visible ...代表溢出显示(默认) scroll 代表出现滚动条 auto 代表自动 ...:80px; } /*div是整个页面尺寸，当div包含的p尺寸大小超过自身时候溢出才出现滚动条，一般overflow的取值为auto*/
五、盒子模型 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ ? 其实网页布局的本质就是： 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。...： 盒子必须指定了宽度（width） 然后就给左右的外边距都设置为auto， 实际工作中常用这种方式进行网页布局，示例代码如下： .header{ width:960px; margin:0 auto;...} 5.4.2、文字居中和盒子居中区别 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐 块级盒子水平居中 左右margin 改为 auto text-align...: center; /* 文字 行内元素 行内块元素水平居中 */ margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以...定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。 6.2、什么是浮动(float) 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。
高度、宽度直接设置是无效的。 默认高度就是它本身内容的宽度。 行内元素只能容纳文本或其他行内元素。 注意 链接里面不能再放链接 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。 「3....块级盒子水平居中 盒子必须指定宽度（width） 然后就给左右的外边距都设置为auto 实际工作中常用这种方式进行网页布局，示例代码如下： .header { width: 960px; margin...浮动 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 C. 定位 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。 「2....什么是浮动」元素的浮动是指设置了浮动属性的元素会 脱离标准普通流的控制,不占位置，脱标 移动到指定位置。 作用 让多个盒子(div)水平排列成一行，使得浮动称为布局的重要手段。...1.1 display 显示（重点） display设置或检索对象是否显示或如何显示。 display: none 隐藏对象 特点：隐藏之后，不再保留位置。
常用的为去掉a标签默认的自划线： a { text-decoration: none; } 首行缩进 将段落的第一行缩进 32像素： p { text-indent: 32px; }...right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。...overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向） 十一、position定位 static static 默认值，无定位，不能当作绝对定位的参照物...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...因为它原本所占的空间仍然占据文档流。 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
content-visibility: auto 可以告诉浏览器暂时跳过该元素的布局和渲染工作，直到这个元素滚动到当前视口，从而可以加快整个页面的初始渲染，并且缩短用户和页面可交互需要花费的时间。...交互 CSS 滚动捕捉 CSS 滚动捕捉可以让用户完成滚动之后将视口锁定到某个元素的位置，这种效果经常出现在某些官网的网站里。...比如我们在网页的右下角放了个机器人聊天窗口，我们在滚动聊天消息的时候，如果滚动到了底部，页面的其他部分也会跟着滚，这时候就可以用 overscroll-behavior-y: contain; 来设置在当前区域已经滚动到底部时...touch-action touch-action 可以用于设置触摸屏用户如何操纵元素的区域（平滑、缩放、单指平移手势、手指平移和缩放等等），一般我们会在适配移动端操作的网站上会用到，变化趋势也不大，不再多说...'element'); // 当鼠标移动到该元素上时给该元素设置 will-change 属性 el.addEventListener('mouseenter', hintBrowser); // 当
; 此处 使用 Flex 弹性布局管理宽度 , 右侧的按钮直接设置一个固定大小 , 左侧的搜索框设置 flex: 1; 样式 , 也就是 自动占据剩余空间 ; Flex 子项目的 flex 样式默认都为...流式布局 块级元素 上方设置按钮 会自动将文字挤到下面显示 */ display: block; /* 设置图标的宽高 */ width: 23px; height:...: 104px auto; /* 设置用户信息按钮外边距 */ margin: 4px auto -2px; } 5、CSS3 中的垂直居中对齐 - 行高 = 内容高度 ( 总高度 -...*/ overflow-x: hidden; } /*点击高亮我们需要清除清除 设置为transparent 完成透明*/ * { -webkit-tap-highlight-color...::before { /* 使用伪元素方式 插入 用户栏头像图片 */ content: ""; /* 设置显示样式 流式布局 块级元素 上方设置按钮 会自动将文字挤到下面显示
) 子元素设置position: absolute 简称为“子绝父相” 当然，也有 子绝父绝 子绝父固 不要死记 1.2. position设置absolute/fixed特性 将position设置为...0、top: 0、bottom: 0、margin: auto 另外，还得设置具体的宽高值(宽高小于定位参照对象的宽高) auto到底是什么?...800 = 200 + ml0 + mr0 + 0 + 0 auto -> 交给浏览器你来出来 width: auto; 1.行内非替换元素 -> width: 包裹内容 2.块级元素 -> width...(右)浮动，浮动元素的左(右)边界不能超出包含块的左(右)边界 浮动规则三 规则三: 浮动元素之间不能层叠 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素(左浮找左浮...，右浮找右浮) 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止 浮动规则四 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出 比如行内级元素、inline-block
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
