css面试题总结

448 阅读2分钟

话不多说,直接进入主题----->

1、HTML5中新增的属性有哪些

h5中:header头部,nav导航,canvas定义图片,audio音频,video视频,footer页尾,section相当于div,dialog定义对话,time时间,figure图片/figcaption图片文字

input中:tel电话,emali邮件,number数字,color颜色,file文件选择框,search搜索框

form中:placeholder框里不输入东西会弹出提示 autofoucs自动获取焦点

2.css3新增属性

  • border-radius:圆角
  • box-shadow:阴影
  • border-image:边框图片
  • text-shadow:文字阴影
  • transform translate位移 rotate旋转 scale缩放 skew转动时给定的角度 rotateX/rotateY/rotateZ:3D旋转属性
  • box-sizing父级宽高不变,内容随便折腾

3.怎么制作小三角

width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid red;

4.使用css,让一个div消失在视野中

  • display: none;隐藏不占位
  • visibility: hidden;隐藏占位
  • opacity: 0;
  • background-color:transparent;透明
  • transform: scale(0);缩放

5.请列出你所知道的使用css让元素上下居中方案

1)文字居中

text-align:center
line-height=height

2)块级元素居中

1>先给父元素加一个定位属性,然后给子元素一个绝对定位,四个方向设置0,然后用margin居中
pisition:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
2>通过transform,让元素居中
position:absolute;
left:50%;
top:50%;
transform:transtlateY(-50%);
transform:transtlateX(-50%);
3>通过flex布局,

两种方法:

  • 给父元素添加display:flex,子元素添加margin:auto;
  • 父元素添加display:flex,justify-content:center,align-item:center,子元素不做任何处理

6.CSS中那个属性用来定位元素

  • position
  • static:默认值不脱离文档流
  • relative:相对定位,不脱离文档流,结合四个方位相对于自己的左上角进行定位
  • absolute:绝对定位,脱离文档流,结合四个值相对于离他最近的元素进行定位,注意:脱离文档流
  • fixed:固定定位,脱离文档流,相对于可视窗口进行定位,出现滚动条也不会随之滚动

7.什么叫做标签语义化

  • 有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。
  • 在没有CSS的时候能够清晰的看出网页的结构,增强可读性。
  • 便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。
  • 支持多终端设备的浏览器渲染
  • 以上就是扯淡简单理解就是:合理的标签做合理的事情

8.请描述css选择器的优先级原则

总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性