我们传统的前端更多的是用javascript实现各种复杂动画，自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。 1.实现内部虚线边框知识点：outline核心代码 .dash-border{width: 200px;height: 100px;line-height: 100px;outline: 1px dashed #fff;outline-offset: -10px; } web前端开发学习Q-q-u-n：784783012 ，分享...
好程序员web前端教程分享HTML/CSS部分常见面试题。准备参加web前端面试的小伙伴们一起看一看吧，希望对大家有所帮助！ 1、什么是盒子模型? 在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容(content)，元素的内边距(padding)，元素的边框(border)，元素的外边距(margin)四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒...
文章目录 1、说一下 css 盒模型2、画一条 0.5px 的线3、link 标签和 import 标签的区别4、transition 和 animation 的区别5、Flex 布局6、BFC（块级格式化上下文，用于清楚浮动，防止 margin 重叠等）7、垂直居中的方法8、关于 JS 动画和 css3 动画的差异性9、说一下块元素和行元素10、多行元素的文本省略号11、visibility=hidden, opacity=0，display:none12、双边距重叠问题（外边距折叠）15、css3 新特性16、CSS 选择器有哪些，...
css有几个不同的单位用于表示长度。长度由一个数字和单位组成如10px，2rem等 数字与单位之间不能出现空格。如果长度值为0，则可以省略单位。 对于一些css属性，长度可以是负数。 有两种类型的长度单位：相对和绝对 1.相对长度em, ex, ch, rem, vw, vh, vmin, vmax, % em:它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位，一般浏览器字体大小默认为16px, 则2em=32px; ex:依赖于英文字母小x的高度 ch:数字0的高度 r...
一，盒模型 ??说到 CSS 布局这块的内容，首当其冲的就是我们的盒模型宽度计算问题，在开始我们的问题之前，我们首先要搞懂这些概念：盒模型里面的内容(content): 也就是实实在在要展现的内容，比如 P 标签里面的文字。在没有设置box-sizing: border-box之前我们可以把它的宽度理解为就是width的值，不包括padding和border 盒模型的内边距(padding): 是内容与边框内部之间的距离 盒模型的边框(border): 边框也可以设置宽度 盒模型的...
一，relative、absolute 的区别 ??我们还是来说常见的地方。首先就是relative,absolute的区别：relative是依据自身来定位的 absolute则是依据离其最近一层的定位元素来定位的。最近一层，指的就是包裹着它的最近的一层父元素或以上层级。如果没有定位元素，那么就依据body来定位二，水平居中 ??我们来按照元素的种类来区分：inline 元素：设置text-align: center即可 block 元素：设置margin: auto即可 absolute 元素：设置left：5...
??图文样式这，我们挑了一个最常见的来说：line-height继承问题。从三个方面来考虑： 如果是具体的数值，则继承该数值 body{font-size:32px;line-height:40px; }.container{font-size:16px;line-height:???/*40px*/ } 如果是比例的数值(类似 1.2 2.3 这种)，则继承该比例 body{font-size:32px;line-height:1.2; }.container{font-size:16px;line-height:???/*16*1.2=19.2px*/ } ??然后就是需要注意的地方了。 如果是百分比(100% 20...
1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ （1）有两种， IE 盒子模型、W3C 盒子模型； （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)； （3）区 别： IE的content部分把 border 和 padding计算了进去; 2.CSS选择符有哪些？哪些属性可以继承？选择符 （1）id选择器（ # myid） （2）类选择器（.myclassname） （3）标签选择器（div, h1, p） （4）相邻选择器（h1 + p） （5）...
在一些面经中，经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形，而常见的回答通常也只有使用 border 进行绘制一种方法。 而 CSS 发展到今天，其实有很多有意思的仅仅使用 CSS 就能绘制出来的三角形的方式，本文将具体罗列讲讲。 通过本文，你能了解到 6 种使用 CSS 绘制三角形的方式，并且它们都非常好掌握。 当然本文仅是抛砖引玉，CSS 日新月异，可能还有一些有意思的方法本文遗漏了，欢迎大家在留言区补充~ 使用 ...
css div 垂直水平居中，并完成 div 高度永远是宽度的一半（宽度可以不指定） <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}.outer {width: 400px;height: 100%;background: blue;margin: 0 auto;display: flex;align-items: center;}....
1、CSS的优先级 ①通配和继承：0000 ②元素选择器：0001 ③类、伪类： 0010 ④ID选择器： 0100 ⑤行内样式： 1000 （加了 ‘！important’ 的优先级为无穷大） 2、外边距塌陷（外边距合并） ①、上下元素之间的外边距塌陷 当一个元素出现在另外一个元素的上面时，第一个元素的下外边距与第二个元素的上外边距将发生合并。合并的结果是外边距变成上述两者中大的一个。 ②包含元素之间的外边距塌陷 当一个元素包含在另一个元素中，父...
1.水平居中的 margin：0 auto;关于这个，大家也不陌生做网页让其居中用的比较多, 这个是用于子元素上的，前提是不受float影响<style> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 3px solid red; /*text-align: center;*/ } img{ display: block; width: 100px; height:...
1.XML和HTML有什么不同 一、基础语言不同 1、XHTML是基于可扩展标记语言（XML）。 2、HTML是基于标准通用标记语言（SGML）。 （HTML最大的特点是简单性和跨平台性） 二、语法严格程度不同 1、XHTML语法比较严格，存在DTD定义规则。 2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。 三、可混合应用不同 1、XHTML可以混合各种XML应用，比如MathML、SVG。 2、HTML不能混合其它XML应用。 四、大小写敏感度不同 1、XHTML对大...
1.css水平、垂直居中的写法，请至少写出4种？ 这题考查的是css的基础知识是否全面，所以平时一定要注意多积累 水平居中 行内元素: text-align: center 块级元素: margin: 0 auto position:absolute +left:50%+ transform:translateX(-50%) display:flex + justify-content: center 垂直居中 设置line-height 等于height position：absolute +top:50%+ transform:translateY(-50%) display:flex + align-items: center display:tabl...
css面试题 1、谈谈你对CSS布局的理解常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding2. 请列举几个清除浮动的方法 （1）使用clear属性 <div style="clear:both"></div>（2）使用br标签和其自身的HTML属性 <br clear="all" />（3）通过设置父元素的样式，实现清除浮动，例如： 父元素设置 overflow:hidden父元素设置 overflow:auto父元素设置 display:table父元素也设置浮动样式 （4）使用 :af...