初级前端面试题——CSS(1)

一、display: none; 与 visibility: hidden; 的区别


相同: 它们都能让元素不可见
区别:display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility:hidden;是继承属性,子孙节点消失由于继承了 hidden,通过设置 visibility: visible;可以让子孙节点显式修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘读屏器不会读取 display: none;元素内容;会读取 visibility: hidden 元素内容

二、css hack 原理及常用 hack


原理:利用不同浏览器对 CSS 的支持和解析结果不一样编写针对特定浏览器样式。常见的 hack 有 1)属性 hack。2)选择器 hack。3)IE 条件注释
IE 条件注释:适用于[IE5, IE9]常见格式如下

 <!--[if IE 6]> 
 Special instructions for IE 6 here 
<![endif]-->


选择器 hack:不同浏览器对选择器的支持不一样

 /***** Selector Hacks ******/  
 /* IE6 and below */
  * html #uno  { color: red }  

/* IE7 */
 *:first-child+html #dos { color: red }  

/* IE7, FF, Saf, Opera 
 */ html>body #tres { color: red }  

/* IE8, FF, Saf, Opera (Everything but IE 6,7)*/
 html>/**/body #cuatro { color: red } 

 /* Opera 9.27 and below, safari 2 */
 html:first-child #cinco { color: red } 

 /* Safari 2-3 */ html[xmlns*=""] 
 body:last-child #seis { color: red }  

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
 body:nth-of-type(1) #siete { color: red }  

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
 body:first-of-type #ocho {  color: red }  

/* saf3+, chrome1+ */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
  #diez  { color: red  }
 }  
/* iPhone / mobile webkit */
 @media screen and (max-device-width: 480px) {
  #veintiseis { color: red  }
 }  
/* Safari 2 - 3.1 */
 html[xmlns*=""]:root #trece  { color: red  }  

/* Safari 2 - 3.1, Opera 9.25 */
 *|html[xmlns*=""] #catorce { color: red  }  

/* Everything but IE6-8 */
 :root *> #quince { color: red  }  

/* IE7 */
 *+html #dieciocho {  color: red }  

/* Firefox only. 1+ */
 #veinticuatro,  x:-moz-any-link  { color: red }  

/* Firefox 3.0+ */
 #veinticinco,  x:-moz-any-link, x:default  { color: red  }
 


属性 hack:不同浏览器解析 bug 或方法

 /* IE6 */
 #once { _color: blue }  

/* IE6, IE7 */
 #doce { *color: blue; /* or #color: blue */ }  

/* Everything but IE6 */
 #diecisiete { color/**/: blue }  

/* IE6, IE7, IE8 */
 #diecinueve { color: blue\9; }  

/* IE7, IE8 */
 #veinte { color/*\**/: blue\9; }  

/* IE6, IE7 -- acts as an !important */
 #veintesiete { color: blue !ie; } /* string after ! can be anything */


三、link 与 @import 的区别

link 是 HTML 方式, @import 是 CSS 方式

link 最大限度支持并行下载,@import 过多嵌套导致串行下载,出现 FOUC

link 可以通过 rel="alternate stylesheet" 指定候选样式

浏览器对 link 支持早于@import ,可以使用 @import 对老浏览器隐藏样式

@import 必须在样式规则之前,可以在 css 文件中引用其他文件

总体来说:link 优于@import

四、CSS 有哪些继承属性

关于文字排版的属性如:

font

word-break

letter-spacing

text-align

text-rendering

word-spacing

white-space

text-indent

text-transform

text-shadow

line-height

color

visibility

cursor

五、display,float,position 的关系

如果 display 为 none,那么 position 和 float 都不起作用,这种情况下元素不产生框

否则,如果 position 值为 absolute 或者 fixed,框就是绝对定位的,float 的计算值为 none,display 根据下面的表格进行调整

否则,如果 float 不是 none,框是浮动的,display 根据下表进行调整

否则,如果元素是根元素,display 根据下表进行调整

其他情况下 display 的值为指定值 总结起来:绝对定位、浮动、根元素都需要调整 display

六、外边距折叠(collapsing margins)


外边距重叠就是 margin-collapse
相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠,结合而成的外边距称为折叠外边距
折叠结果遵循下列计算规则:

两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值

两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值

两个外边距一正一负时,折叠结果是两者的相加的和

七、介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?

有两种, IE 盒子模型、W3C 盒子模型;

盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);

标准(W3C)盒模型:元素宽度 = width + padding + border + margin

怪异(IE)盒模型:元素宽度 = width + margin

区 别: IE 的 content 部分把 border 和 padding 计算了进去;

标准浏览器通过设置 css3 的 box-sizing: border-box 属性,触发“怪异模式”解析计算宽高

八、CSS 选择符有哪些?

id 选择器( # myid)

类选择器(.myclassname)

标签选择器(div, h1, p)

相邻选择器(h1 + p)

子选择器(ul > li)

后代选择器(li a)

通配符选择器( * )

属性选择器(a[rel = "external"])

伪类选择器(a:hover, li:nth-child)

九、CSS3 新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素的每个 元素。

p:last-of-type 选择属于其父元素的最后元素的每个元素。

p:only-of-type 选择属于其父元素唯一的元素的每个元素。

p:only-child 选择属于其父元素的唯一子元素的每个元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。

:after 在元素之前添加内容,也可以用来做清除浮动。

:before 在元素之后添加内容

:enabled 选择器匹配每个已启用的元素(大多用在表单元素上)。

:disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中

十、如何居中 div?如何居中一个浮动元素?如何让绝对定位的 div 居中?


如果需要居中的元素为常规流中 inline 元素,为父元素设置 text-align: center;即可实现
如果需要居中的元素为常规流中 block 元素,1)为元素设置宽度,2)设置左右 margin 为 auto。3)IE6 下需在父元素上设置 text-align: center;,再给子元素恢复需要的值

 <body>
  <div class="content">
     aaaaaa aaaaaa a a a a a a a a
  </div>
 </body>  
 <style>
    body {
         background: #DDD;
         text-align: center; /* 3 */
    }
    .content {
         width: 500px;      /* 1 */
         text-align: left;  /* 3 */
         margin: 0 auto;    /* 2 */
         background: purple;
     }
 </style>


如果需要居中的元素为浮动元素,1)为元素设置宽度,2)position: relative;,3)浮动方向偏移量(left 或者 right)设置为 50%,4)浮动方向上的 margin 设置为元素宽度一半乘以-1

 <body>
  <div class="content">
     aaaaaa aaaaaa a a a a a a a a
  </div>
 </body>
 <style>
  body {  background: #DDD;     }
  .content {  width: 500px;         /* 1 */
  float: left;   position: relative;   /* 2 */
  left: 50%;            /* 3 */
  margin-left: -250px;  /* 4 */
   background-color: purple;    
 }
 </style>


如果需要居中的元素为绝对定位元素,1)为元素设置宽度,2)偏移量设置为 50%,3)偏移方向外边距设置为元素宽度一半乘以-1

 <body>
  <div class="content">
     aaaaaa aaaaaa a a a a a a a a
  </div> 
</body>  
<style>
  body {  background: #DDD;  position: relative;     }
  .content { 
 width: 800px; 
  position: absolute; 
  left: 50%;
  margin-left: -400px; 
  background-color: purple;  
   }
 </style>

 

绝对定位居中 如果需要居中的元素为绝对定位元素,1)为元素设置宽度,2)设置左右偏移量都为 0,3)设置左右外边距都为 auto

<body>
  <div class="content">
     aaaaaa aaaaaa a a a a a a a a
  </div>
 </body>  
<style> 
 body {  background: #DDD;  position: relative;     }
  .content {  width: 800px;   position: absolute;  margin: 0 auto;  left: 0;  right: 0;   background-color: purple;   
  }
</style>
 

十一、如何竖直居中一个元素


如果居中的是行内元素,可以设置父级 height 与 line-height 相等
设置 margin/padding 居中
相对位置偏移居中
flex 居中 设置 align-items:center 即可

十二、display 有哪些值?说明他们的作用

block 象块类型元素一样显示。

none 缺省值。象行内元素类型一样显示。

inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示,并添加样式列表标记。

table 此元素会作为块级表格来显示

inherit 规定应该从父元素继承 display 属性的值

十三、position 有哪些值 relative 和 absolute 定位原点是?

absolute 生成绝对定位的元素,相对于值不为 static 的第一个父元素进行定位。

fixed (老 IE 不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位。

relative 生成相对定位的元素,相对于其正常位置进行定位。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right - z-index 声明)。

inherit 规定从父元素继承 position 属性的值

十四、 CSS3 有哪些新特性?

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

弹性盒模型 display: flex;

多列布局 column-count: 5;

媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}

个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}

颜色透明度 color: rgba(255, 0, 0, 0.75);

圆角 border-radius: 5px;

渐变 background:linear-gradient(red, green, blue);

阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);

倒影 box-reflect: below 2px;

文字装饰 text-stroke-color: red;

文字溢出 text-overflow:ellipsis;

背景效果 background-size: 100px 100px;

边框效果 border-image:url(bt_blue.png) 0 10;

平滑过渡 transition: all .3s ease-in .1s;

动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

转换

旋转 transform: rotate(20deg);

倾斜 transform: skew(150deg, -10deg);

位移 transform: translate(20px, 20px);

缩放 transform: scale(.5);

用纯 CSS 创建一个三角形的原理是什么?

 /* 把上、左、右三条边隐藏掉(颜色设为 transparent)*/ 
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
 }
  • 24
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值