css世界笔记以及css面试题

1.object-fit属性 指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框

正常video标签定义width:100%是有效的;但在IE低版本浏览器下是不生效的 需定义object-fit:fill;

2.filter(滤镜) 属性

修改所有图片的颜色为黑白 (100% 灰度):
img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

3.vw、vh、vmin、vmax 的含义

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

4.image的srcset属性  解决了页面图片适应不同屏幕密度的情况

<img src="image-128.png"
  srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
  sizes="(max-width: 360px) 340px, 128px" />

5.autocomplete 属性 清除input框输入存留历史值,防止下拉历史值显示

6.html4和html5下拉列表的显示
  html4：
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="vw">VW</option>
    <option value="audi" selected>Audi</option>
  </select>
  html5：
  <input id="myCar" list="cars" />
  <datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
  </datalist>

7.CSS3 appearance 属性 允许您使元素看上去像标准的用户界面元素。
  appearance: normal|icon|window|button|menu|field;
  浏览器支持
  所有主流浏览器都不支持 appearance 属性。
  Firefox 支持替代的 -moz-appearance 属性。
  Safari 和 Chrome 支持替代的 -webkit-appearance 属性

8.empty伪类  是一个css选择器 当元素里面无内容的时候进行匹配

9.background-clip 属性
  border-box    背景被裁剪到边框盒。    
  padding-box    背景被裁剪到内边距框。
  content-box    背景被裁剪到内容框。

10.美化实体字符
   font-family:simsun;

11.vertical-align作用的前提
   vertical-align属性只能作用在display计算值为inline，inline-block，inline-table或table-cell的元素上。因此
，默认情况下，<sapn>、<strong>、<em>等内联元素，<img>、<button>、<input>等替换元素，非HTML规范的自定义标签
元素，以及<td>单元格，是支持vertical-align属性的，其他块级元素则不支持。

12.清除浮动的方式以及优缺点 工作原理

   浮动原理：浮动元素会脱离文档流并向左/向右浮动，不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度
   清除浮动：1.使用空标签清除浮动clear:both
             2.父级div定义overflow:hidden或者auto
             3、父级div定义伪类:after和zoom(用于非IE浏览器)
             4、父级div定义height

13.自定义滚动条
   
  ::-webkit-scrollbar{   /* 定义血槽宽度 */
     width: 8px;
  }
  ::-webkit-scrollbar-thumb{  /* 定义拖动条 */
     background-color: red;
     border-radius: 6px;
  }
  ::-webkit-scrollbar-track{  /* 定义背景槽 */
     background-color: #ddd;
     border-radius: 6px;
  }

14.position属性

   fixed        生成固定定位的元素，相对于浏览器窗口进行定位。
   relative    生成相对定位的元素，相对于其正常位置进行定位。
   absolute     生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
   static    默认值。没有定位，元素出现在正常的流中
   initial    设置该属性为默认值
   inherit    规定应该从父元素继承 position 属性的值。

15.clip属性

   剪裁绝对定位元素，同时也可以隐藏该元素只需设置clip:rect(0 0 0 0)
   用法：img{
    position:absolute;
    clip:rect(0px 50px 200px 0px)  
   }                                                                                                                                                                          
16.w3c盒子模型和IE盒子模型 什么是盒子模型，content模式和border模式有何区别？
    
    盒子模型的四要素分别是content，border，padding，margin
    W3C标准下padding、border所占的空间不在width、height范围内，
    IE盒模型width包括content尺寸＋padding＋border的总和
    content-box：padding和border不被包含在定义的width和height之内
    border-box：padding和border被包含在定义的width和height之内

17.display：none和visibility：hidden的区别
 
   display:none        彻底消失，不在文档流中占位，浏览器也不会解析该元素；
   visibility:hidden   视觉上消失，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素

18.css引入的方式有哪些？link和@import的区别
   
   1.内联方式
   2.嵌入方式
   3.链接方式
   4.导入方式
   
   两者都是外部引用CSS的方式，但是存在一定的区别

   区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
　 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
　 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
　 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

19.px,em,rem的区别？
   
  px 是 pixel 的缩写，它的含义是像素的意思，在指定字体大小和元素的宽高的时候使用。像素是相对于显示器屏幕分辨率而言的
  em是一个相对长度的单位，是相对于当前对象内文本的字体尺寸。如过我们未设置当前文本的字体尺寸，那么em就会相对于浏览器的默认字体尺寸
  rem是CSS3中新增的一个相对单位，它与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。它的使用非常简单，通过改变根元素的大小就可以改变它的值

20.文本的控制
   text-indent     对文本进行缩进控制
   letter-spacing  控制字符之间的间距，这里的“字符”包括英文字母、汉字以及空格等。
   word-spacing    增加空格的间隙宽度，有空格就有效
   text-transform  字符大小写
   text-transform：uppercase 全大写
   text-transform：lowercase 全小写

21.writing-mode 实现文字竖向呈现