css面试题

BFC

BFC块级格式上下文，是页面上一个独立的容器，容器内的子元素不会影响到外边的元素，垂直方向边距重叠，计算高度是浮动元素也会计算

BFC触发：根元素（html），浮动元素（float不为none），绝对定位元素（position为absolute和fixed）,行内块元素（display为inline-block），overflow值不为visible，弹性元素（display为flex）

应用场景：设置元素为BFC防止浮动高度塌陷，避免外边距重叠

清除浮动

空div⽅法： < div style=“clear:both;”>< /div> Clearfix ⽅法：上⽂使⽤.clearfix类已经提到 overflow: auto或overflow: hidden⽅法，使⽤BFC

css可继承与不可继承的属性

不可继承：dislay、盒子模型的属性（width、height、margin、border …）、背景属性、定位属性

可继承：字体、文本属性（color、text-align）、visibility、cursor

css3新增的属性

CSS3 实现圆角（border-radius:8px;）， 阴影（box-shadow:10px）, 对文字加特效（text-shadow）, 线性渐变（gradient）， 旋转（transform）缩放，定位，倾斜 弹性盒布局模型

h5新增

语义化标签（header、nav、section、aside、article、footer） localStorage 和 sessionStorage audio video canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();

Media媒体查询

media属性用于为不同的媒介类型规定不同的样式，用于响应式设计

圣杯布局

<div id="bd"> <div id="middle">middle</div> <div id="left">left</div> <div id="right">right</div> </div>

将最外部的盒子设置padding，留出左右两边的距离，所有的都设置浮动，然后左右两边的内容定位，分别向左右移动，覆盖padding的位置

双飞翼布局

<div id="middle"> <div id="inside">middle</div> </div> <div id="left">left</div> <div id="right">right</div>

middle、left、right都是左浮动，设置inside的margin，将inside放在中间，left和right设置margin-left

link与@import

< link href=“CSSurl路径” rel=“stylesheet” type=“text/css” /> @import url(CSS文件路径地址);

在css和html中均可以使用@import link只在html中使用

首页link和import语法结构不同，前者< link>是html标签，只能放入html中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要< style type=“text/css”>标签，同时可以直接“@import url(CSS文件路径地址);”放如css文件或css样式里引入其它css文件。