首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS笔记(15)

display隐藏元素后,不再占有原来位置(和绝对定位一样特征). 后面应用及其广泛,搭配JS可以做很多网页特效....如果隐藏元素不想要原来位置,就用display : none 原图 隐藏后 3.overflow溢出 overflow属性指定了如果内容溢出一个元素框(超出其高度及宽度)时,会发生什么....属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸内容,超出部分隐藏掉 scroll 不管超出内容与否,总是显示滚动条 auto 超出自动显示滚动条,不超出不显示滚动条...这是溢出效果,相当于visible: hidden效果 scroll效果 当内容过多溢出时auto效果 当内容不溢出时auto效果,简单来说就是按需....下面做一个土豆网案例 当鼠标经过时,显示遮罩层和播放图标 这时就要用到我们隐藏和显示知识了,遮罩层应该是整个盒子一个子元素,不占有位置,因此要使用绝对定位,而元素隐藏使用是display

1.1K10

CSS学习记录及整理

基础选择器 .class--选中html中类名为class所有元素 #id--选择id为某值所有元素 *--通配符,选择所有元素 element--选择某元素,比如p/div/span等 div1,...div2--逗号,并列关系,选中所有列出元素 div1 div2--空格,下属关系,选中div1内所有的div2元素 div1>div2--大于号,父子关系,选中所有父元素div1div2元素 div1...--背景图像是否固定或滚动 background-color--背景颜色 background-image--背景图片 background-positon--背景图片开始位置 background-repeat...overflow--内容溢出时是否修剪 visible默认值,不会修剪,溢出部分会显示在框外 hidden隐藏,溢出部分会修剪掉 scroll内容会被修剪,始终显示滚动条 auto如果内容被修剪,则显示滚动条...absolute绝对定位,通过top/right/bottom/left定位 relative相对定位 fixed相对于浏览器窗口绝对定位,可以用来制作网站导航条,或者烦人广告 static默认值

6.9K80
您找到你想要的搜索结果了吗?
是的
没有找到

html笔记

position: absolute; 绝对定位 就是先移动到 提供 位置来 定义自己位置 没有绝对定位时候, 盒子默认会在左上角 当使用绝对定位,给盒子定义是 bottom(下)与right(右) ,那么盒子会 先跑到 右下角,然后再 基于右边...> 首先 固定定位 它 位置定义是基于绝对定位 ,当我上面代码中给他 设置right(右) 与 bottom(下) 时候,他就 和绝对定位一样 会先跑道右下角...与displaynone属性不同是,visibility会保留隐藏位置 overflow溢出显示 如果当前盒子内容超过了盒子大小,则显示滚动条或者不显示多余内容等 属性 描述 visible...默认值,不进行裁剪内容也不加滚动条 hidden 不显示超出内容,超出部分直接隐藏 scroll 总是显示滚动条 auto 超出就显示滚动条,不超出则不显示 我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容

1.8K10

CSS 技巧一则 -- 不定宽溢出文本适配滚动

---- 本文将简单介绍在文本长度不确定,容器长度也不确定情况下,任意长度文本实现 hover 状态下,从左向右,滚动到文本末端,再滚动回初始位置,如此反复,像是这样: ?...像是这样: 我宽度是正常宽度 我宽度是溢出了一小部分 我宽度是溢出溢出了很大一部分 .wrap {...那么很容易得到需要滚动距离: 需要滚动距离 S = 溢出文本元素宽度 - 父元素宽度 这样,我们只需要找到一个可以表示并且当前文本宽度是变量值即可。即是 -- transoform。...不定宽文字跑马灯来回滚动展示 -- 父容器不定宽,子元素不定宽 部分不足之处 无法判断文本长度是否超出父元素宽度 当然,上述方案并非完美的方案,如果我们希望只针对本文长度溢出情况,hover 时候才进行滚动

1.8K20

革命性创新,动画杀手锏 @scroll-timeline

: 接下来,我们把这个动画和 @scroll-timeline 相结合,需要把它放置到一个可滚动容器中: F</div...Demo -- @scroll-timeline Demo 看到这里,大家应该能够理解 @scroll-timeline 作用及含义了,它赋予了 CSS 能够基于滚动滚动去控制动画行进能力!...: inline:不太常用,使用沿内联轴滚动位置,符合书写模式和方向性 scroll-offsets:滚动时间线核心,设定在滚动什么阶段,触发动画,可通过三种方式之一进行设置: scroll-offsets...第三种确定滚动偏移量方法是使用元素偏移量。这意味着可以指定页面内元素,其位置决定了滚动时间线以及要使用这些元素哪个边缘。指定元素是使用 selector() 函数完成,该函数接收元素 id。...而有了 @scroll-timeline 之后,我们终于可以将滚动动画这两个元素绑定起来,再实现滚动进度指示器,就已经非常轻松了: ...文本内容

90310

动画进阶】当路径动画遇到滚动驱动!

利用这个新特性,我们可以轻松将原本基于时间控制动画效果,交给页面的滚动特性进行控制,像是这样: 只是,该特性由于诸多原因,遭到了规范废弃。...animation-timeline: scroll(root),表示利用滚动进行元素动画控制,并且利用是 root 元素滚动,也就是 body 元素滚动进行控制。...滚动驱动动画终于正式支持了~ 借用 XboxYan 文章中一幅图: motion-path 运动路径动画 好,到目前位置,我们都还在铺垫内容,本文核心是当路径动画遇到滚动驱动。...利用这个规范规定属性,我们可以控制元素按照特定路径进行位置变换动画。并且,这个路径可以是非常复杂一条路径。...,指定运动几何路径 offset-distance:控制当前元素基于 offset-path 运动距离 offset-position:指定 offset-path 初始位置 offset-anchor

40730

CSS样式更改——框模型、定位、浮动、溢出

百分比来设置 它们都有四个值,你可以单个设置,也可以一起设置,顺序为top-right-bottom-left 2.定位Position 1).相对定位relative 相对于其正常位置进行定位 div...{ position:relative } 2).绝对定位absolute 相对于 static 定位以外第一个父元素进行定位 div{ position:absolute } 3).静态定位...相对于浏览器窗口进行定位 div{ position:fixed } 3.浮动Float 元素内容向某个方向移动 div{ float:left } left 左浮动 right...右浮动 none 不浮动 4.溢出Overflow 元素内容超过了框架大小 div{ overflow:scroll } visible 内容不会被修剪,会呈现在元素框之外 hidden...内容会被修剪,并且其余内容是不可见 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余内容 参考文档:W3C官方文档(CSS

1.2K10

CSS第五天-定位

CSS第五天-定位 静态定位:static 定位默认值,写边偏移也不会有效果 ---- 相对定位:relative 父元素搭配子绝父相使用 根据自身原来位置,进行定位 没有脱标,在页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位:absolute 根据最近带有定位(非静态)祖先元素来定位 子绝父相 脱离标准流,在页面不占有位置 绝对定位,固定定位,浮动,可以直接设置宽度和高度,默认宽度是内容宽度...---- 固定定位:fixed 永远根据浏览器可视区域定位,不会随着滚动滚动滚动 可以直接加宽高,默认宽度是内容宽度 脱离标准流,在页面不占有位置 解决分辨率问题有两种方法… ---- 定位层级...无论是否溢出,都显示滚动条overflow: scroll 根据是否溢出,自动显示或隐藏滚动条 overflow: auto white-space: nowrap;(设置文字在一行显示,不能换行)...(-50%) 行内元素、行内块元素、并列关系垂直居中对齐 设置vertical-align: middle ---- 垂直用法: 文本框和表单按钮无法对齐 input和img无法对齐 div文本框

2.7K40

css必知几个底层知识和技巧

,宽度不够只能溢出。...3.如何让元素支持height:100%效果 知识点:绝对定位宽高百分比是基于padding-box,而非绝对定位宽高百分比是基于content-box 方法如下: * 1.设置显示高度值 *...2.使用绝对定位 4.任意高度元素展开收起动画(max-height/min-height) 1.min-height/min-width初始尺寸为auto, max-height/max-width...box尺寸时触发滚动条显示 2.margin合并条件 块级元素,但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 *...端滚动条宽度约为17px 让页面滚动条不出现晃动方法: html{     /* ie8 */     overflow-y: scroll; } :root{     overflow-y: auto

2.1K20

CSS深入理解学习笔记之overflow

2、Overflow与滚动滚动出现条件:①auto/scroll;②内容超过盒子。...原因:绝对定位元素不总是被父级overflow属性裁剪,尤其当overflow在就对定位元素及其包含块(含position:relative/absolute/fixed声明父级元素,没有则是body...resize拖拽区域默认大小是17px * 17px。滚动尺寸也是17px。   文本溢出省略号显示属性text-overflow:ecllipsis。...6、overflow与锚点技术   (1)锚链和锚点     锚链:就是我们url中常见“#XXXX”。     锚点:就是标签ID。     锚点定位:通过锚链定位锚点位置。   ...(2)锚点定位本质     在页面可滚动容器中,通过锚链滚动到其对应锚点元素,即改变容器滚动高度。     前提:①容器可滚动;②锚点元素在容器内。

3.5K50

Day8:html和css

visibility: hidden 隐藏 dis和vis区别: dispaly 不占位置 visibility 站位置 overflow: hidden 溢出部分隐藏掉 visible 显示...auto 自动 超出就显示滚动条,不超出不显示 scroll 总是显示滚动条 用户界面: cursor鼠标样式 default 小白 text 文本 move 移动 pointer 小手...右侧偏移量,定义元素相对于其父元素右边线距离 position属性常用值 值 描述 static 自动定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 静态定位唯一用处...overflow 溢出 检索或设置当对象内容超过其指定高度及宽度时如何管理内容。 visible :  不剪切内容也不添加滚动条。...auto :   超出自动显示滚动条,不超出不显示滚动条 hidden :  不显示超过对象尺寸内容,超出部分隐藏掉 scroll :  不管超出内容否,总是显示滚动条 鼠标样式cursor

1.7K40

聊聊苹果营销页中几个有趣交互动画

sticky 元素固定相对偏移是相对于离它最近具有滚动祖先元素,如果祖先元素都不可以滚动,那么是相对于 viewport 来计算元素偏移量。 一个例子 ?...之后,元素将固定在与顶部距离 0px 位置。...「它用了 120 张图片,根据滚动距离来画出对应在这个滚动位置上该展示图片」,对,你没有听错。我之前也以为应该是 css3 控制盖角度从而实现翻盖效果,是我想多了,哈哈哈。 ?...('scroll', scrollEvent, false); // 开始动画滚动距离 // startOpen startOpen = $('#imgWrapper').offset(...「在进行动画时候,canvas 包裹容器应该是 sticky 定位在视口中,直到动画结束,canvas 包裹容器才会随着滚动滚动。」

1.9K60

23个项目管理经典案例_交互动画

javaScript动画项目案例 示例代码:我github demo效果演示示例:我demo网站 1.动画库编写 匀速运动 案例一 效果:匀速运动 <!...-当前位置)/动画系数 动画系数可以控制动画快慢 透明度运动 效果:透明度运动 通过修改透明度变化进而修改动画 <!...myAnimation.js /** * 动画函数 * @param {Object} obj 当前对象 * @param {Object} attr 当前元素对象属性 * @param...; // document.documentElement.scrollTop = i * document.documentElement.clientHeight; // 制作点击侧边栏,内容部分滚动相应位置动画...滚动到相应位置,侧边栏也会调整active window.onscroll = function () { // 如果用户不是因为点击侧边栏而触发滚动 if(!

1.7K30

CSS进阶知识

指定背景图像位置 1 background-size 指定背景图片大小 3 background-repeat 指定如何重复背景图像 1 background-origin 指定背景图像定位区域...子元素绝对定位 然后设置 left:50%; margin-left:子元素宽度一半;(已知宽高) /* 自身 */ .center{ position:absolute; left: 0...{ align-self:center; } 父元素相对定位 子元素绝对定位 然后设置 top:50%; margin-top:子元素高度一半;(已知宽高) /* 自身 */ .center{...visible 不显示滚动条,但是超出部分会显示。 hidden 不显示滚动条,超出部分不会显示。 scroll 显示滚动条,就算某个方向没超出也会显示。...inherit 继承父元素设置 CSS动画基本语法 transform transform: translate(x, y); //偏移 x: X 轴偏移量,可为百分比。

19810

如何实现一个丝滑点击水波效果

Varlet组件库提供了一个使元素点击时生成水波扩散效果指令: 点击 图片 接下来就从源码角度看看它是如何实现...比如touch事件或scroll事件默认行为都会触发页面的滚动,如果调用了preventDefault方法,那么就会阻止滚动,但问题是浏览器并不知道我们有没有在事件处理函数中调这个方法,那么就必须等待函数执行完毕才知道...,总体流程为先创建一个div元素,然后设置它透明度为0、初始位置、缩放、大小、背景颜色,然后添加为被点击元素元素,最后在20ms以后修改div位置、缩放、透明度,只要设置了它transation...;手指点击位置是水波圆初始中心点,然后计算其左上角坐标x、y为水波元素初始位置;水波圆最终中心点其实就是被点击元素中心点,换算成左上角坐标centerX、centerY即为水波元素最终位置。...,首先溢出需要设置为隐藏,否则水波圆扩散就会溢出元素完整显示出来,这显然不好看,然后前面提到过水波元素绝对定位,所以被点击元素定位不能是静态定位,最后层级设置笔者暂时没有想出来是为了解决什么问题

56020

一文带你响应式网页设计入门

在这种情况下,我们可以使用另一种技术-水平滚动。 使用内容溢出滚动条进行水平滚动 可能会有这样一种情况:您内容会溢出界面,而没有一种优雅处理方式去解决。...没关系,内容溢出滚动条可以为你解决这个问题。 此技术常见用途包括可滚动菜单和表格。下面是一个可滚动菜单示例。...这个CSS是关键,通过设置overflow,子元素将通过水平轴溢出并出现横向滚动条。...position: relative 容器元素元素允许子元素利用相对于其绝对位置。...position: absolute,top: 0并left: 0在iframe上进行设置,从而创建一种行为,其中元素相对于其父元素绝对定位自己……将其粘贴到左上方。

4.7K20
领券