CSS常见面试题
关注
分享
扫一扫
文章平均质量分 52
sjinsa
在成为IT工程师路上不断奋斗的小白
展开
-
CSS3有哪些新特性？
css3把很多以前用图片或脚本实现的效果、甚至动画效果，只需短短的几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡，动画等。 CSS3最重要的模块包括：选择器框模型背景和边框文本效果2D/3D 转换动画多列布局用户界面css3都有哪些强大的功能呢？ 1、强大的选择器 2、圆角效果 3、块阴影和文字阴影 4、色彩：CSS3支持更多的颜色和更广泛的颜色定义 5原创 2017-04-27 14:58:09 · 4732 阅读 · 1 评论 -
display有哪些值？说明他们的作用？
常用的有： none：此元素不显示。 block：将元素显示为块级元素，前后会带换行符。 inline:默认值，元素会被显示为内联元素，前后没有换行符。 inline-block:行内块级元素。原创 2017-04-26 18:25:37 · 15507 阅读 · 1 评论 -
CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先？
CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先？ 选择符类型 例子 例子描述 通用选择器 * 类别选择器(.class) .intro 选择class=”intro”的所有元素 ID选择器(#id) #first 选择id=”first”的所有元素 标签选择器(element原创 2017-04-25 23:26:57 · 6796 阅读 · 0 评论 -
如何居中正常元素、浮动元素以及绝对定位元素
一、元素水平居中1.行内元素的水平居中（父元素设置text-align:center）<body> <div style="width:250px;height:100px;background:#ccc;text-align:center;"> <span>行内元素水平居中</span> </div></body>效果图如下： 2.块级元素水平居中（margin原创 2017-04-26 15:34:45 · 675 阅读 · 0 评论 -
cors跨域资源共享方法
cors是一个服务端和客户端协作声明的方式来确保请求的安全性。服务端在HTTP请求头增加一些列的请求头信息（例如Access-Control-Allow-Orign等），说明哪些域的请求可以接受，或哪些类型的请求可以接受。客户端在发起请求时，也必须在请求头中声明自己的源（Orign），否则服务器将不予处理。如果客户端不作声明，请求可能会被浏览器阻止，到不了服务器端。HTTP请求到达服务器之后会与原创 2017-05-06 15:34:03 · 480 阅读 · 0 评论 -
CSS盒子模型
1、介绍一下标准的CSS盒子模型？与低版本IE的盒子模型有什么区别？标准的盒子模型 盒模型由content（内容），padding（内填充），border（边框），margin（外边距）组成。例如对div定义宽高时，只定义content中的内容。比如对一个盒子分别设置宽高，padding值，border值，margin值：div{ width:200px; height:200px原创 2017-04-25 22:39:46 · 278 阅读 · 0 评论 -
常见的浏览器内核有哪些？
Trident-IE浏览器内核 Gecko-火狐浏览器内核Mozilla Blink(Webkit的分支)-谷歌浏览器内核 Presto，现为Blink-Opera浏览器内核原创 2017-05-01 22:23:32 · 3868 阅读 · 0 评论 -
CSS 优化、提高性能的方法有哪些？
CSS优化主要是4个方面：加载性能 主要是从减少文件体积，减少阻塞加载，提高并发方面入手选择器性能渲染性能可维护性较为具体的优化方案： 慎重使用高性属性：浮动、定位； 去除空规则； 属性值为0时，不加单位； 属性值为浮点数0.**时，可以省略小数点前的0； 标准化各种浏览器前缀，带浏览器前缀的在前，标准的在后； 不使用@import前缀，它会影响css加载速度； 充分利用原创 2017-05-01 22:20:18 · 5696 阅读 · 0 评论 -
浏览器是怎样解析CSS选择器的？
按照从上到下，从右到左的顺序解析。.list a {color:blue;}先解析到 a 标签，并将页面上所有 a 标签的字体颜色都按照 color:red 进行渲染（蓝色），再解析到 .list ，将页面上所有 .list 类目下的 a 标签的字体渲染成蓝色。是的，你没有看错，浏览器解析CSS从来就是这么苦逼。 http://www.cnblogs.com/zhaodongyu/p/334108原创 2017-04-30 23:24:04 · 4846 阅读 · 0 评论 -
深入理解margin属性
百分比margin的计算规则普通元素的百分比margin都是相对于容器的宽度计算的<div style="width:600px;height:200px;"> <img src="1.jpg" style="margin:10%"></div>计算之后水平方向的margin和垂直方向的margin都是60px绝对定位元素的百分比margin是相对于第一个定位祖先元素（relativ原创 2017-04-30 11:18:36 · 1831 阅读 · 0 评论 -
请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
为什么出现浮动？浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。什么时候清除浮动？ 如果想要实现三个块级元素并排显示，期望效果如下图所示： 给三个块级元素都加上float属性后，页面效果如下图所示： 问题出现了，父元素高度塌陷了一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-原创 2017-04-28 18:25:36 · 15210 阅读 · 0 评论 -
用纯CSS创建一个三角形的原理是什么？
1.采用的是均分原理非常有意思的是盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部 2.代码的实现第一步 保证元素是块级元素第二步 设置元素的边框第三步 不需要显示的边框使用透明色.square{ width:0; height:0; margin:0 auto; border:6px solid transparent;转载 2017-04-28 13:04:01 · 6999 阅读 · 0 评论 -
CSS中visibility属性的collapse属性值有什么用？在不同浏览器下有什么区别？
visibility有如下属性值： 属性值 属性值描述 visible 默认值。元素是可见的。 hidden 元素是不可见的，相当于display：hidden；，但此时仍占用页面空间 collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。原创 2017-04-28 17:30:06 · 5427 阅读 · 4 评论 -
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
有时，在写页面的时候，会需要将<li>这个块状元素横排显示，此时就需要将display属性设置为inline-block，此时问题出现了，在两个<li>元素之间会出现大约8px左右的空白间隙，下面举例说明：<html><head><title>demo</title><style type="text/css">*{ margin:0; padding:0;}body {原创 2017-04-28 16:55:53 · 15714 阅读 · 2 评论 -
为什么要初始化CSS样式?
因为浏览器的兼容性，每个浏览器设计时都有自己的特性，因此在解析标签的时候就产生一些差异，因此显示页面的时候就会出现微小的差异。常见的初始化如下： 本人常用的常见初始化如下：body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {原创 2017-04-28 14:07:53 · 1302 阅读 · 0 评论 -
一个满屏品字布局怎么设计？
需要用到技术1. 元素水平居中对齐1) 使用margin对齐(推荐)2) 使用left：50%3) 使用text-align：行内元素居中对齐，给父元素设置text-align： center 2. 元素对相对窗口定位1) 使用filxed（推荐）：总是根据浏览器的窗口来进行元素的定位2)原创 2017-04-28 13:08:34 · 11841 阅读 · 0 评论 -
position的值relative和absolute的定位原点是？
relative（相对定位）：定位原点是元素本身所在位置； absolute（绝对定位）：定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的原创 2017-04-26 19:57:54 · 13018 阅读 · 1 评论