菜鸟之Vue前端面试题 - Css

萧壁宰治
356 阅读4分钟

CSS (布局，动画，适配)

介绍一下标准的CSS的盒子模型

1. 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin

20180415101948426.png

2. 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

20180415102006495.png

如何居中div

 1、 使用margin属性                      `margin:50px auto;`
 2、 使用绝对定位      
 3、 使用display弹性盒 使用transform属性  父级:`display:flex:`  子级:`justify-content: center;`
 4、 使用transform属性  子级定位         `top:50%;left:50;transform: translate(-50%,-50%);`

CSS3有哪些新特性？

（1） RGBA和透明度
 RGBA(R,G,B,A) 取值：
      R：红色值。正整数 | 百分数
      G：绿色值。正整数 | 百分数
      B：蓝色值。正整数 | 百分数
      A：Alpha透明度。取值0~1之间。
（2） background-image
 属性为元素设置背景图像。
 
 根据 background-repeat 属性的值，图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。
（3）background-origin
 语法:
     `background-origin(content-box/padding-box/border-box)`
 
 属性规定 background-position 属性相对于什么位置来定位
 注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
（4） background-size
 规定背景图像的尺寸

 语法:
     `background-size: length|percentage|cover|contain;`
 
     length
         设置背景图像的高度和宽度。
         第一个值设置宽度，第二个值设置高度。
         如果只设置一个值，则第二个值会被设置为 "auto"
     percentage
         以父元素的百分比来设置背景图像的宽度和高度。
         第一个值设置宽度，第二个值设置高度。
         如果只设置一个值，则第二个值会被设置为 "auto"。
     cover
         把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
         背景图像的某些部分也许无法显示在背景定位区域中。
     contain
         把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
（5） background-repeat
 属性定义了图像的平铺模式。
   
    repeat      默认  背景图像将在垂直方向和水平方向重复。
    repeat-x    背景图像将在水平方向重复。
    repeat-y    背景图像将在垂直方向重复。
    no-repeat   背景图像将仅显示一次。
    inherit     规定应该从父元素继承 background-repeat 属性的设置。
（6）word-wrap
对长的不可分割单词换行

 语法:
     `word-wrap:normal|break-word;`
  
    normal       只在允许的断字点换行（浏览器保持默认处理）。
    break-word   在长单词或 URL 地址内部进行换行。
（7）text-shadow
  语法:
      `text-shadow: h-shadow v-shadow blur color;`
  
    h-shadow   必需。水平阴影的位置。允许负值。
    v-shadow   必需。垂直阴影的位置。允许负值。
    blur       可选。模糊的距离。
    color      可选。阴影的颜色。
（8）font-face
  定义自己的字体  
     把自己定义的Web字体嵌入到你的网页中 
     比如说首页的Logo，Tags以及页面中的手写英文体
  语法:
       `@font-face {
            font-family: <YourWebFontName>;
            src: <source> [<format>][,<source> [<format>]]*;        
            [font-weight: <weight>];        
            [font-style: <style>];      
        }`
    取值说明

    1、YourWebFontName: 此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。
       如"font-family:"YourWebFontName";"
       
    2、source: 此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径;

    3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等;
（9）border-radius
 允许为元素添加圆角边框
 
 语法：
     `border-radius: 1-4 length| % / 1-4 length| % ;`
 以百分比定义圆角的形状。 四周 50% 你将会得到一个圆
(10) border-image
 边框图片
 
 语法:    
     `border-image:url(border.png) 30 30 round;`
 
 source    用在边框的图片的路径。
 slice     图片边框向内偏移。
 width     图片边框的宽度。
 outset    边框图像区域超出边框的量。
 repeat    图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
（11） box-shadow
 盒阴影
 
 语法:
     `box-shadow: 10px 10px 5px #888888;`
 
 h-shadow  必需的。水平阴影的位置。允许负值
 v-shadow  必需的。垂直阴影的位置。允许负值
 blur      可选。模糊距离
 spread    可选。阴影的大小
 color     可选。阴影的颜色。  (css|rgba|English)
 inset     可选。从外层的阴影（开始时）改变阴影内侧阴影
avatar
文章
阅读
粉丝