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

能用CSS实现就不用麻烦JavaScript

从某种意义上说,它与Flexbox或CSS Grid工作原理类似,即您需要一个容器元素,在该容器元素上设置scrolln-snap-type和多个设置了scroll-snap-align子元素,...随着互动项目越来越复杂,移动设备大量增加,表现性能变得越来越重要。Flash 被抛弃,有天赋动画开发者使用 HTML5 去实现过去从未实现效果。...鼠标悬浮场景十分常见,例如导航菜单: [image.png] 一般要把隐藏东西菜单作为hover目标的子元素或者相邻元素,才方便用css控制,例如上面的菜单,是把menu当作导航一个相邻元素...--menu相邻li--> 用户 账户设置 登出... menu在正常态下是隐藏: .menu{ display: none; } 而当导航hover显示: ```js /*使用相邻选择器和hover

1.3K11

CSS技术入门

以下实例选取了所有 元素之后所有相邻兄弟元素 : div~p{background-color:yellow;}字体大小用em来设置字体大小为了避免 Internet Explorer...隐藏一个元素可以通过把 display 属性设置"none",或把 visibility 属性设置"hidden"。但是请注意,这两种方法会产生不同结果。...例如:一个内联元素设置 display:block 是不允许有它内部嵌套块元素。...media 规则媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同方式显示在屏幕上,在纸张上,或听觉浏览器等等。 @media 规则允许在相同样式表不同媒体设置不同样式。...通过设置 display 属性 flex 或 inline-flex将其定义弹性容器。弹性容器内包含了一个或多个弹性子元素。弹性容器外及弹性子元素内是正常渲染

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

59道CSS面试题(附答案)

浮动元素可以向左或向右移动,直到它外边缘碰到包含元素(父元素)或另一个浮动元素边框为止。要想使元素浮动,必须元素设置一个宽度( width)。...38、如果设置font-sze10rem,那么当用户重置或拖曳浏览器窗口,它文本会不会受到影响? 不会 39、谈谈你对BFC规范理解。...(1)当两个相邻外边距都是正数,折叠结果是它们两者中较大值 (2)当两个相邻外边距都是负数,折叠结果是两者中绝对值较大值。 (3)当两个外边距一正一负,折叠结果是两者相加和。...设置 display属性none,或者设置 visibility属性 hidden技巧性方式如下。 设置宽高0,透明度0,设置z- index位置-1000。...FOUC即样式内容闪烁( Flash Of Unstyled Content),是在IE下通过 @import方式导入CSS文件引起:< style type=" text/css" media

4.9K50

HTML5+CSS3

、:hover 权重值10 5、标签选择器和伪元素选择器,div、p、:before 权重值1 6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值0 权重计算实例...动画前后状态 none(缺省)|forwards(结束停留在最后一帧)|backwards(开始停留在定义开始帧)|both(前后都应用) 10、animation:name duration...,盒子及子元素显示方式 :overflow:hidden 超出子元素被裁切 display 设置盒子显示类型及隐藏,display:block 将盒子设置以块元素显示 display...=10) cursor 设置鼠标悬停在元素上指针形状 :cursor:pointer 设置手型 outline 设置文本输入框周围凸显蓝色线,一般是设为没有 :outline:...:10px 10px 5px 2px pink;设置盒子有粉色阴影 transition 设置盒子过渡动画:transition:all 1s ease;设置元素过渡动画为1秒完成,所有变动属性都做动画

2.1K21

CSS基础知识点整理笔记

拓展知识点 margin属性: 行内元素是没有上下外边距,只有左右外边距,所以尽量不要设置行内元素内外上下边距,设计宽高也是无效 两个相邻块级元素一个设置了margin-bottom、另一个设置...嵌套块元素垂直边距合并,当父级元素没有设置border、padding情况下,父子元素margin边距会合并,其取值较大值 css3新特性 答案解析 常用css3新特性:动画属性animation...'' ,权值1000 第二等:代表ID选择器,:#content ,权值0100 第三等:代表类、伪类、属性选择器,:.content 权值0010 第四等:代表标签选择器和伪元素选择器,div...定义后代选择器 div > p 定义子元素选择器 p + li 相邻兄弟选择器,两者有相同元素,选择是前一个选择器相邻后一个选择器 讲一下css3弹性布局 答案解析: 弹性布局是css3新属性...层叠上下文产生方法有:设置定位元素position且非static值并设置z-index属性具体数值、transform属性值不是none、父元素display属性值flex,子元素z-index

1.4K20

二、CSS

css文本设置 常用应用文本css样式: color 设置文字颜色,: color:red; font-size 设置文字大小,:font-size:12px;...块元素 块元素,也可以称为行元素,布局中常用标签div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中行为: 支持全部样式 如果没有设置宽度,默认宽度父级宽度100%...属性值设置子元素垂直对齐方式 这三种元素,可以通过display属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素,直接使用内联元素...、:hover 权重值10 5、标签选择器和伪元素选择器,div、p、:before 权重值1 6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值0 CSS3新增选择器...ease-out 结束慢速 ease-in-out 开始和结束慢速 steps 动画步数 5、animation-delay 动画延迟 6、animation-iteration-count 动画播放次数

1.8K70

Css学习手册之基本篇

希望 设置: div标签内部 p 标签中文本颜色等,常见组合有四种 b....效果取决于边框颜色值 border-color: 边框颜色 一个非常有意思点是,边框支持分别设置上下左右四个线形式,设置一个左右有颜色 <p style="border-left-style...显示 控制标签<em>的</em>显示隐藏等 <em>display</em>属性<em>设置</em>一个元素应如何显示 visibility属性指定一个元素应可见还是隐藏 a. <em>display</em> none可以隐藏某个元素,且隐藏<em>的</em>元素不会占用任何空间。...往往是用于图像,但它在布局<em>时</em>一样非常有用。 元素<em>的</em>水平方向浮动,意味着元素只能左右<em>移动</em>而不能上下<em>移动</em>。 一个浮动元素会尽量向左或向右<em>移动</em>,直到它<em>的</em>外边缘碰到包含框或另一个浮动框<em>的</em>边框为止。...(平移)和倾斜功 b. transition 过渡,配合上面的transform可以实现旋转or放大<em>的</em><em>动画</em>效果 如一个case,在鼠标放上去<em>时</em>,放大且旋转360° <em>div</em> {

1.8K60

面试官:CSS 面试题集锦

z-index 属性设置元素堆叠顺序,拥有更高堆叠顺序元素总是会处于堆叠顺序较低元素前面 该属性设置一个定位元素沿着 z 轴位置,z 轴定义垂直延申到显示区轴,如果正数,则离用户更加近...非常少见情况下多个absolute交错覆盖,或者需要显示最高层次模态对话框,可以设置z-index > 1。...缺点 图片合成比较麻烦; 背景设置,需要得到每一个背景单元精确位置,; 维护合成图片时,最好只是往下加图片,而不要更改已有图片。...有哪些隐藏内容方法? 使用display:none来隐藏所有内容 display:none可以让网页中所有内容不显示,代码、文字、链接、图片、div层,是推荐内容隐藏方式。...display:inline inline元素不会独占一行,多个相邻行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素内容而变化。

3.3K30

CSS学习记录及整理

其中,a标签文字颜色和下划线不能继承;h标签文字大小不能继承。 层叠性--指CSS处理冲突能力,当不同选择器选中同一标签并且设置了相同属性,就会出现冲突,这时CSS就会将多重样式层叠一个。...伪选择器 :link--例子:a:link 选择所有未被访问链接 :viseted--已经访问过链接 :hover--当鼠标指针移动到某链接上 :active--鼠标长按时链接 伪选择器可以用来设置页面中所有...另外,:hover还可以用于选中所有的其它标签,比如div:hover,当鼠标悬停到div区域上,会产生一个效果,可以用来设置动画。...--动画是否正在运行或暂停 animation-fill-mode--动画时间之外状态,比如值forwards代表动画结束保持最后一个属性值 背景 background--所有的背景属性 background-attachment...注意:块级元素垂直相邻外边距会合并,水平则不会。

6.9K80

57道CSS常问面试题及答案汇总

父级div定义zoom 17、设置元素浮动后,该元素display值是多少? 自动变成display:block 18、使用 CSS 预处理器吗?...兼容性问题:在IE5 IE6中,float盒子指定margin,左侧margin可能会变成两倍宽度。通过改变padding或者指定盒子display:inline解决。...多行文本垂直居中:需要设置display属性inline-block。 28、怎么让Chrome支持小于12px 文字?...用来指定一个动画开始执行时间,也就是说当改变元素属性值后多长时间开始执行过渡效果,它可以是正整数,负整数和0,非零时候必须将单位设置s(秒)或ms(毫秒)。...也就是translate(x,y),它表示对象进行平移,按照设定x,y参数值,当值负数,反方向移动物体,其基点默认为元素 中心点,也可以根据transform-origin进行改变基点。

2K10

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

初始尺寸none 2.min-height/min-width优先级高于max-width/max-height 要想实现如上图所示展开收起动画,就可以使用max-height/min-height...:display设置inline,inline-block,inline-table元素 内联盒模型: 内容区域:可以理解文本选中背景色区域(重点) 内联盒子:内联标签或者纯文本 行框盒子:由内联盒子组成一行...如下案例所示: 三.深入理解content 1.在web中,很多替换元素在没有明确尺寸设定情况下,其默认尺寸(不包含边框)300*150,video,iframe,canvas等,少数0,img...="checkbox" />      四.padding深入研究 1.对于盒模型设置box-sizing: border-box元素,如果padding足够大...padding box尺寸触发滚动条显示 2.margin合并条件 块级元素,但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并三种场景 相邻兄弟元素 父级和第一个/最后一个子元素

2.1K20

57道常被问CSS面试题及答案汇总,帮你查漏补缺

父级div定义zoom 17、设置元素浮动后,该元素display值是多少? 自动变成display:block 18、使用 CSS 预处理器吗?...兼容性问题:在IE5 IE6中,float盒子指定margin,左侧margin可能会变成两倍宽度。通过改变padding或者指定盒子display:inline解决。...多行文本垂直居中:需要设置display属性inline-block。 28、怎么让Chrome支持小于12px 文字?...用来指定一个动画开始执行时间,也就是说当改变元素属性值后多长时间开始执行过渡效果,它可以是正整数,负整数和0,非零时候必须将单位设置s(秒)或ms(毫秒)。...也就是translate(x,y),它表示对象进行平移,按照设定x,y参数值,当值负数,反方向移动物体,其基点默认为元素 中心点,也可以根据transform-origin进行改变基点。

2.4K31

面试必备 css面试必考点

,那如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见; (4)设置透明, 隐藏其中三个三角形 .box{ width:0px; height:0px; border:...} 22设置元素浮动后,该元素display值是多少? 自动变成display:block 23 移动布局用过媒体查询吗?...兼容性问题:在IE5 IE6中,float盒子指定margin,左侧margin可能会变成两倍宽度。通过改变padding或者指定盒子display:inline解决。...单行文本垂直居中:把line-height值设置height一样大小值可以实现单行文字垂直居中,其实也可以把height删除。...多行文本垂直居中:需要设置display属性inline-block。 35 怎么让Chrome支持小于12px 文字?

1.1K10

前端面试题2(CSS)

transform: scale(0); 将一个元素设置缩放无限小,元素将不可见,元素原来所在位置将被保留 HTML5属性,效果和display:none...属性值0,不加单位 属性值小于1小数,省略小数点前面的0 css雪碧图 浏览器是怎样解析CSS选择器?...当滚动鼠标滚轮,各图层以不同速度移动,形成视差 实现原理 以 “页面滚动条” 作为 “视差动画进度条” 以 “滚轮刻度” 当作 “动画帧度” 去播放动画 监听 mousewheel 事件,事件被触发即播放动画...例如,父级行高 1.5,子元素字体 18px,则子元素行高 1.5 * 18 = 27px 百分比:将计算后值传递给后代 设置元素浮动后,该元素 display 值会如何变化?...相邻 inline-block 元素之间有换行或空格分隔情况下会产生间距 非 inline-block 水平元素设置 inline-block 也会有水平间距 可以借助 vertical-align

2.8K11

每天10个前端小知识 【Day 13】

动画延迟时间 animation-iteration-count:动画执行次数,可以设置一个整数,也可以设置infinite,意思是无限循环 animation-direction:动画执行方向...当分别取消边框时候,发现下面几种情况: 取消一条边时候,与这条边相邻两条边接触部分会变成直 当仅有邻边, 两个边会变成对分三角 当保留边没有其他接触,极限情况所有东西都会消失 通过上图变化规则...>右侧 实现过程: 仅需将容器设置display:flex; 盒内元素两端对其,将中间元素设置100%宽度,或者设为flex:1,即可填充空白。...display:none 设置元素displaynone是最常用隐藏元素方法 .hide { display:none; } 将元素设置display:none后,元素在页面上将彻底消失...Transition和animation区别 transition是过度属性,强调过度,它实现需要触发一个事件(比如鼠标移动上去,焦点,点击等)才执行动画

10310

【愚公系列】2023年03月 其他-Web前端基础面试题(CSS_42道)

2、em是相对长度单位,相对于当前对象内文本字体尺寸。当前对行内文本字体尺寸未被人为设置,则相对浏览器默认字体尺寸。它会继承父级元素字体大小,因此并不是一个固定值。...当设置box-sizing:content-box,将采用标准模式解析计算; 当设置box-sizing:border-box,将采用怪异模式解析计算。...比如说htmlfont-size大小100px,一个divwidth1rem,则divwidth大小100px。...过渡属性transition可以在一定事件内实现元素状态过渡最终状态,用于模拟一种过渡动画效果,但是功能有限,只能用于制作简单动画效果; 动画属性animation可以制作类似Flash动画,...(1)当两个相邻外边距都是正数,折叠结果是它们两者中较大值 (2)当两个相邻外边距都是负数,折叠结果是两者中绝对值较大值。

3K20

CSS样式

子元素2 div>a{ color:red } 相邻兄弟选择器:选择紧跟E元素后F元素,用加号表示,选择相邻第一个兄弟元素,只能向下选择 h1元素...display 属性 flex 将其定义弹性容器 弹性容器内包含了一个或多个弹性子元素 <div class="flex-item...display 属性:display:flex;开启弹性盒,属性设置后子元素默认水平排列 flex-direction属性:flex-direction 属性指定了弹性子元素在父容器中位置 flex-direction...: name duration timing-function delay iteration-count direction; 值 描述 name 设置动画名称 duration 设置动画持续时间...timing-function 设置动画效果速率(如下) delay 设置动画开始时间(延时执行) iteration-count 设置动画循环次数,infinite无限次数循环 direction

23530

如何把控css方向感

display设置inline,inline-block,inline-table元素 内联盒模型: 内容区域:可以理解文本选中背景色区域(重点) 内联盒子:内联标签或者纯文本 行框盒子:由内联盒子组成一行...三.深入理解content 1.在web中,很多替换元素在没有明确尺寸设定情况下,其默认尺寸(不包含边框)300*150,video,iframe,canvas等,少数0,img,而表单元素替换尺寸和浏览器自身有关...="checkbox" /> 复制代码 四.padding深入研究 1.对于盒模型设置box-sizing: border-box元素,如果padding...但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 * 解决方案: 父级设置块级格式化上下文元素...触发margin:auto计算前提:width或height定值,元素是具有自动填充特性 ?

1.2K10

每天10个前端小知识 【Day 16】

常见动画效果有很多,平移、旋转、缩放等等,复杂动画则是多个简单动画组合。...其中timing-function值有如下: 注意:并不是所有的属性都能使用过渡display:nonedisplay:block 举个例子,实现鼠标移动上去发生变化动画效果 <style...: none; } 这样设置之后会有一个问题,就是当你放大网页,一般情况下字体也会随着变大,而设置了以上代码后,字体只会显示你当前设置字体大小,不会随着网页放大而变大了。...div),选择idbox元素内部所有的div元素 子选择器(.one>one_1),选择父元素.one所有.one_1元素 相邻同胞选择器(.one+.two),选择紧接在.one之后所有.two...h1-h6标签字体大下也是不能被继承 继承属性 display 文本属性:vertical-align、text-decoration 盒子模型属性:宽度、高度、内外边距、边框等 背景属性

10610
领券