从某种意义上说,它与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
以下实例选取了所有 元素之后的所有相邻兄弟元素 : div~p{background-color:yellow;}字体大小用em来设置字体大小为了避免 Internet Explorer...隐藏一个元素可以通过把 display 属性设置为"none",或把 visibility 属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。...例如:一个内联元素设置为 display:block 是不允许有它内部的嵌套块元素。...media 规则媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。 @media 规则允许在相同样式表为不同媒体设置不同的样式。...通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。弹性容器外及弹性子元素内是正常渲染的。
浮动的元素可以向左或向右移动,直到它的外边缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动,必须为元素设置一个宽度( width)。...38、如果设置的font-sze为10rem,那么当用户重置或拖曳浏览器窗口时,它的文本会不会受到影响? 不会 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
、: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秒完成,所有变动的属性都做动画
拓展知识点 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
选择器的权重和优先级 选择器的类型: id选择器(#myid) 类选择器(.myclassname) 标签选择器(div, h1, p) 相邻选择器(h1 + p) 子选择器(ul > li) 后代选择器...1000; 代表 ID 选择器,如#content,权值为 100; 代表类、伪类和属性选择器,如.content、:hover、[attribute],权值为 10; 代表元素选择器和伪元素选择器,...如div、p,权值为 1。...首先,使用@keyframes定义一个动画,名称为testAnimation,如下代码,通过百分比来设置不同的 CSS 样式,规定动画的变化。...,例如针对div元素设置动画,如下: div { width: 100px; height: 50px; position: absolute; animation-name
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 动画播放次数
,如希望 设置: 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> {
z-index 属性设置元素的堆叠顺序,拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 该属性设置一个定位元素沿着 z 轴的位置,z 轴定义为垂直延申到显示区的轴,如果为正数,则离用户更加近...非常少见的情况下多个absolute交错覆盖,或者需要显示最高层次的模态对话框时,可以设置z-index > 1。...缺点 图片合成比较麻烦; 背景设置时,需要得到每一个背景单元的精确位置,; 维护合成图片时,最好只是往下加图片,而不要更改已有图片。...有哪些的隐藏内容的方法? 使用display:none来隐藏所有内容 display:none可以让网页中所有内容不显示,如代码、文字、链接、图片、div层,是推荐的内容隐藏方式。...display:inline inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
其中,a标签的文字颜色和下划线不能继承;h标签的文字大小不能继承。 层叠性--指CSS处理冲突的能力,当不同选择器选中同一标签并且设置了相同的属性时,就会出现冲突,这时CSS就会将多重样式层叠为一个。...伪选择器 :link--例子:a:link 选择所有未被访问的链接 :viseted--已经访问过的链接 :hover--当鼠标指针移动到某链接上时 :active--鼠标长按时的链接 伪选择器可以用来设置页面中所有...另外,:hover还可以用于选中所有的其它标签,比如div:hover,当鼠标悬停到div区域上时,会产生一个效果,可以用来设置动画。...--动画是否正在运行或暂停 animation-fill-mode--动画时间之外的状态,比如值为forwards代表动画结束时保持最后一个属性值 背景 background--所有的背景属性 background-attachment...注意:块级元素的垂直相邻外边距会合并,水平则不会。
父级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进行改变基点。
的初始尺寸为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合并的三种场景 相邻兄弟元素 父级和第一个/最后一个子元素
,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见; (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 的文字?
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
:动画延迟时间 animation-iteration-count:动画执行次数,可以设置为一个整数,也可以设置为infinite,意思是无限循环 animation-direction:动画执行方向...当分别取消边框的时候,发现下面几种情况: 取消一条边的时候,与这条边相邻的两条边的接触部分会变成直的 当仅有邻边时, 两个边会变成对分的三角 当保留边没有其他接触时,极限情况所有东西都会消失 通过上图的变化规则...>右侧 实现过程: 仅需将容器设置为display:flex; 盒内元素两端对其,将中间元素设置为100%宽度,或者设为flex:1,即可填充空白。...display:none 设置元素的display为none是最常用的隐藏元素的方法 .hide { display:none; } 将元素设置为display:none后,元素在页面上将彻底消失...Transition和animation的区别 transition是过度属性,强调过度,它的实现需要触发一个事件(比如鼠标移动上去,焦点,点击等)才执行动画。
2、em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。...当设置为box-sizing:content-box时,将采用标准模式解析计算; 当设置为box-sizing:border-box时,将采用怪异模式解析计算。...比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。...过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态,用于模拟一种过渡动画效果,但是功能有限,只能用于制作简单的动画效果; 动画属性animation可以制作类似Flash动画,...(1)当两个相邻的外边距都是正数时,折叠的结果是它们两者中较大的值 (2)当两个相邻的外边距都是负数时,折叠的结果是两者中绝对值较大的值。
子元素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
: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为定值时,元素是具有自动填充特性的 ?
常见的动画效果有很多,如平移、旋转、缩放等等,复杂动画则是多个简单动画的组合。...其中timing-function的值有如下: 注意:并不是所有的属性都能使用过渡的,如display:nonedisplay:block 举个例子,实现鼠标移动上去发生变化动画效果 <style...: none; } 这样设置之后会有一个问题,就是当你放大网页时,一般情况下字体也会随着变大,而设置了以上代码后,字体只会显示你当前设置的字体大小,不会随着网页放大而变大了。...div),选择id为box元素内部所有的div元素 子选择器(.one>one_1),选择父元素为.one的所有.one_1的元素 相邻同胞选择器(.one+.two),选择紧接在.one之后的所有.two...h1-h6标签字体的大下也是不能被继承的 无继承的属性 display 文本属性:vertical-align、text-decoration 盒子模型的属性:宽度、高度、内外边距、边框等 背景属性
领取专属 10元无门槛券
手把手带您无忧上云