2019 Css3 面试题

小鱼儿 2024-04-19 11:11 67阅读 0赞

# CSS3 #

*  **隐藏网页中的元素有几种方式？这些方法有什么区别？**  
    答：有三种方法
    
    1.  display:none; 脱离文档流，不占页面空间,会改变页面布局。
    2.  visivility:hidden ；不会脱离文档流，不会改变页面布局，仍占页面空间
    3.  opacity:0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件
 *  **如何解决子元素的上外边距溢出？**  
    答：在父元素的第一个子元素位置处添加一个空的table标记.
 *  **常用来设置透明度的方式有几种？他们之间有何区别？**  
    答：opacity或rgba  
    opacity能设置与元素相关各种颜色的透明度  
    rgba()只能设置当前某一种颜色的透明度
 *  **浮动会对父元素的高度带来什么影响？如何解决这个问题？**  
    答：子元素一旦浮动，父元素的高度为0，在父元素最后一个子元素位置处添加一个空的块级元素，  
    并设置其clear属性值为both.

clear:after{
     				display:block;
    				content:””;
    				clear:both;
    	}

*  **哪些元素默认有外边距？**  
    答：body，p，h1-h6，ul，ol，dl，pre
 *  **网页中如何定义锚点？如何连接到锚点位置？**  
    答：a标记用name定义锚点，其他标记用id属性定义锚点，连接到锚点的位置：href="\#锚点名称"
 *  **框模型默认的计算方式是什么？要改变默认的计算方式用哪个属性及值？**  
    答：实际占地宽度=左右外边距+左右边框+左右内边距+width  
    实际占地高度=上下外边距+上下边框+上下内边距+height  
    改变计算方式 box-sizing:border-box
 *  **实现时针转动效果需要用到CSS中哪些关键技术？**  
    答：旋转，动画，绝对定位
 *  **设置行内元素居中对齐用什么属性？**  
    答：text-align：center
 *  **如果要将表单中控件的值提交给服务器必须为控件设置什么属性？**  
    答：name和value属性
 *  **transition和animation的区别？**  
    答：Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，  
    而animation不需要触发任何事件的情况下也会随时间改变属性值，并且transition为2帧，从from … to，而animation可以一帧一帧的，也可以理解为一个animation是由多个transition组成。
 *  **如何实现水平垂直居中？**  
    答：(1)定位+外边距 盒子宽高已知，  
    position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;  
    (2)定位+transform 盒子高宽已知，  
    \#container\{ position:relative; border:1px solid red; width:800px; height:600px; \}  
    \#center\{ width:100px; height:100px; background:blue; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); \}  
    （3）flex 布局  
    父级：  
    display: flex;  
    align-items: center;  
    justify-content: center;
 *  **盒子模型你是怎么理解的？**  
    答案：元素框处理元素内容，内边距外边距以及边框的计算方式。盒子模型有两种，W3C和IE盒子模型  
    （1）w3c的盒模型width=content，不包括margin，padding,border  
    （2）IE盒模型width=content+padding+border  
    （3）box-sizng border-box在已设定的宽度和高度之内去设定padding和border  
    content-box在已设定的高度和宽度之外设置padding和border
 *  **src和href的区别？**  
    答：（1）href：  
    href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。  
    并行下载该文档，不会停止对当前文档的处理  
    （2）src：  
    src是source的缩写，src指向的内容会嵌入到文档当前标签所在位置  
    如img、script、iframe当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。
 *  **说出link和import的区别？**  
    答：（1）使用方法不同：  
    link一般在html头部定义，作为html标签，链接资源，主要用于链接外部的样式表  
    import一般定义在css内部，并且一定要在其他所有规则之前，也就是一般写在文件头部，并且专门拿来链css的。  
    （2）加载顺序差别  
    import比link延迟一些，它会等到页面下载完后才加载，因而可能会产生闪烁
 *  **改变页面元素位置的定位方式及他们的区别？**  
    答：relative 相对定位 相对于自身原来位置进行偏移，仍处于标准文档流中；  
    absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照， 完全脱离文档流；  
    fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在固定的位置。固定定位也会脱离文档流。
 *  **display有哪些值，说明他们的作用？**  
    答：display的取值可以是none/inline/block/inline-block/table  
    none:元素隐藏不可见，并且元素也不占页面空间。  
    Inline:元素将呈现行内元素的特点，多个元素在一行中显示，不允许修改尺寸，也不能设置垂直外边距。  
    block:元素将呈现块级元素的特点，每个元素独占一行，允许修改尺寸。  
    inline-block:元素将呈现行内块元素的特点，多个元素在一行中显示，但是可以修改尺寸。  
    table:元素将呈现表格的特点，由内容决定表格的显示方式。元素独占一行，允许修改尺寸。
 *  **有两个div，外框和内框高度宽度都不定，内框垂直水平居中，利用css如何实现？**

.center{
    	    display:flex;
    		justify-content:center;
    		align-items:center;
    	    }

*  **说说em和rem的区别？**  
    答：rem是基于html元素的字体大小来决定，而em则根据使用它的元素的字体大小决定（很多人错误以为是根据父类元素，实际上是元素继承了父类的属性才会产生的错觉）
 *  **浏览器的内核分别是什么?**  
    答：IE 浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、 Opera 内核原为 Presto，现为 Blink；
 *  **为什么要初始化 CSS 样式？**  
    答：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对 SEO 有一定的影响，但力求影响最小的情况下初始化。最简单的初始化方法就是： \* \{padding: 0; margin: 0;\} （不建议）淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td \{ margin:0; padding:0; \}  
    body, button, input, select, textarea \{ font:12px/1.5tahoma, arial, /5b8b/4f53; \}  
    h1, h2, h3, h4, h5, h6\{ font-size:100%; \}  
    ul, ol\{ list-style:none;\}  
    a\{text-decoration:none; \}  
    a:hover \{text-decoration:underline; \}  
    img\{ border:0;\}  
    button,input, select,textarea\{ font-size:100%; \}  
    table \{ border-collapse:collapse; border-spacing:0; \}
 *  **CSS哪些属性可以继承？**  
    答：可继承的样式： font-size ,font-family ,color, background等;  
    不可继承的样式：border, padding ,margin ,width ,height ;
 *  **优先级算法如何计算？**  
    答：优先级就近原则，同权重情况下以最近者为准;  
    优先级为: !important > id > class > tag  
    important 比 内联优先级高
 *  **CSS3 新增伪类有那些？**  
    答：:first-child 选择属于其父元素的首个元素。  
    :last-child 选择属于其父元素的最后一个元素。  
    :only-child 选择属于其父元素唯一的元素。  
    :nth-child(n) 选择属于其父元素的任意一个子元素。  
    :empty 选择没有子元素的元素。  
    :not(selector) 将满足指定选择器的元素给排除在外。
 *  **描述 css reset 的作用？**  
    答：reset 重置浏览器为元素设置的默认样式，浏览器的种类不同，样式可能不同，重置是为了让他们统一样式。
 *  **清除浮动带来影响的几种方式，各自的优缺点？**  
    答：1、直接设置父元素高度，但不是每次都知道父元素的高度。  
    2、设置父元素也浮动，但不是任何时候父元素都需要浮动，而且浮动会影响后续元素。  
    3、为父元素设置 overflow属性，但如果有内容需要溢出显示的话，也会一同被隐藏。  
    4、在父元素中，追加空子元素，并设置其clear:both,但页面中会多出一个空元素。  
    5、用内容生成的方式:after\{content:””;display:block;clear:both;\}
 *  **px 和 em 的区别？**  
    答：px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。  
    em 的值不是固定的，并且 em 会继承父级元素的字体大小。  
    浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em