面试题 css html
1. 左200px 中 右200px 中间先加载
<style>
.container {
width: 100%;
float: left;
}
.middle {
background-color: aqua;
margin-left: 200px;
margin-right: 200px;
}
.left {
background-color: red;
float: left;
width: 200px;
margin-left: -100%;
}
.right {
background-color: blue;
float: left;
width: 200px;
margin-left: -200px;
}
</style>
<div class="container"><div class="middle">1</div></div>
<div class="left">2</div>
<div class="right">3</div>
2. 清除浮动
1 .clearfix::after{content: ""; clear: both;
display: block; height: 0; visibility: hidden;}
2 overflow:hidden
3 空div{clear:both} 父height
3 盒子模型
标准盒子模型 宽高是content的 box-sizing:content-box
低版本ie盒子 宽高是content+padding+border的 box-sizing:border-box
4 元素
| 元素 (display) | 换行 | width, height | padding, margin | line-height |
|---|---|---|---|---|
| 块 (block) div ul li p h1 dl dt标题 dd内容 |
✔ | ✔ | ✔ | ❌ |
| 行内块 (inline-block) img input select |
❌ | ✔ | ✔ | ❌ |
| 行内 (inline) a b span |
❌ | ❌ | 左右可以,上下不行 | ✔ |
5 选择器与优先级
伪类 :hove :focus :checked :first-child :nth-child() :nth-of-type(n)
// p:nth-of-type 父元素p集合的第n个，p:nth-child 父元素子集合的第n个
伪元素 ::before ::after ::first-line
属性选择器: 匹配属性[title] [href][title] 匹配属性值[href~ | ^ $ =""]
// title=“figure_1 DEF” ~="figure_1" |="figure"
!important > 行内 > id > class(伪类,属性) > 元素(伪元素) > * > 继承
//优先级相同选择写在后边的
6 css3新增伪类
:checked :target
:first-child :last-child :only-child
:nth-child() :nth-last-child()
:nth-of-type() :nth-last-of-type()
7 浏览器内核
Trident ie/360/搜狗/百度 双内核(webkit)
Geoko 火狐
webkit Chrome谷歌, Safari[səˈfɑːri]苹果
8 浏览器兼容
- *{margin:0 padding:0} reset.css
- Css3新属性，加浏览器前缀
`-moz-` **火狐浏览器**
`-webkit-` **Safari,谷歌浏览器等使用Webkit引擎**
`-o-` **Opera浏览器(早期)**
`-ms-` **IE**
.myClass {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn; /* 不带前缀的放到最后 */
}
- 设置较小高度标签(一般小于10px)，在IE6，IE7，遨游中高度超出自己设置的高度
overflow: hidden
- 几个图片放在一起默认有间距, 使用float属性为img布局(所有图片左浮动)
- IE浏览器div最小宽度和高度不生效 , IE不认得
min-这个定义, 只写min-等于没有宽高
#box{ width: auto; height: auto; min-width: 80px; min-height: 35px; }
9 html5新标签及兼容
canvas
video 和 audio
footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
IE9 以下版本浏览器兼容HTML5的方法，使用百度静态资源的html5shiv包：
<head> <!--[if lt IE9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> 并在CSS加上以下代码，手工把它们转为块状元素方便布局： /*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}10 Doctype作用？
告知浏览器解析这个文档的标准
标准模式: 以该浏览器支持的最高标准运行
兼容模式: 在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
