1.简要说一下CSS的元素分类
块级元素:div,p,h1,form,ul,li;
行内元素 : span>,a,label,input,img,strong,em;
2.CSS隐藏元素的几种方法(至少说出三种)
Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局,能让元素保持可以操作;
Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;
3.CSS清除浮动的几种方法(至少两种)
使用带clear属性的空元素
使用CSS的overflow属性;
使用CSS的:after伪元素;
使用邻接元素处理;
4.CSS居中(包括水平居中和垂直居中)
内联元素居中方案
水平居中设置:
1.行内元素
设置 text-align:center;
2.Flex布局
设置display:flex;justify-content:center;(灵活运用,支持Chroime,Firefox,IE9+)
垂直居中设置:
1.父元素高度确定的单行文本(内联元素)
设置 height = line-height;
2.父元素高度确定的多行文本(内联元素)
a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle;
b:先设置 display:table-cell 再设置 vertical-align:middle;
块级元素居中方案
水平居中设置:
1.定宽块状元素
设置 左右 margin 值为 auto;
2.不定宽块状元素
a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto;
b:给该元素设置 displa:inine 方法;
c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%;
垂直居中设置:
使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;
利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;
利用display:table-cell属性使内容垂直居中;
使用css3的新属性transform:translate(x,y)属性;
使用:before元素;
5.写出几种IE6 BUG的解决方法
双边距BUG float引起的 使用display
3像素问题 使用float引起的 使用dislpay:inline -3px
超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
Ie z-index问题 给父级添加position:relative
Png 透明 使用js代码 改
Min-height 最小高度 !Important 解决’
select 在ie6下遮盖 使用iframe嵌套
为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
6.对于SASS或是Less的了解程度?喜欢那个?
语法介绍
7.Bootstrap了解程度
特点,排版,插件的使用;
8.页面导入样式时,使用link和@import有什么区别?
link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;
9.介绍一下CSS的盒子模型?
有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;
盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
10.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
id选择器( # myid)
类选择器(.myclassname)
标签选择器(div, h1, p)
相邻选择器(h1 + p)
子选择器(ul > li)
后代选择器(li a)
通配符选择器( * )
属性选择器(a[rel = “external”])
伪类选择器(a: hover, li: nth – child)
可继承的样式: font-size font-family color, UL LI DL DD DT;
不可继承的样式:border padding margin width height ;
优先级就近原则,同权重情况下样式定义最近者为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
11.CSS3有哪些新特性?
CSS3实现圆角(border-radius:8px),阴影(box-shadow:10px),
对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba