杂乱的知识点
em:大小尺寸是希望与父级的字号建立关联。
rem:大小尺寸是希望与根级(html)的字号建立关联。
16px=1em
:target 定义通过超链接(miao点) 所跳转的目标区块 的样式定义
:target{
background-color: black;
}
DRY:不要重复你的代码
outline:5px solid deeplink (描边)可以用 outline-offset属性控制它与边缘属性的间距
.content{
width: 200px;
height: 200px;
background-color: #B5AAB0;
outline: 5px solid deeppink;
outline-offset: -15px;
}//创造一个内联的描边
backgroud-position:right bottom 可以设置背景图片放置在整个区域的右下;
backgroud-position:right 20px bottom 10px;后面的数字为相对前面方位的偏移值。
backgroud-position:默认是以padding-box为边界的,backgroud-orgin:可以设置backgroud-position的边界口
backgroud-orgin:conten-box 则是以内容盒子 作为边界的
calc()方案 用在backgroud-position中 backgroud-position:calc(100%-30px) calc(100%-10px);
用运算的方式解决 问题
可以用 两个元素 实现 内联元素 有圆角边框的效果:“ 内部的元素,使用border-radius:”/
打造 条纹背景 用 backgroud:liner-gradient(#fb3 50%,#58a 50%);和backgroud-size:100% 30px; 原理就是把渐变 当做 完全的背景图片,
再用backgroud-size设置背景图片的大小
平分的两个色块
background: linear-gradient(#fb5 50%,#58a 50%);
backgroud:line-gradient(to right,#fb3 50%,#58a 50%) 垂直条纹
关于工作中的CSS3问题
什么是CSS Hack
? Hack即不合法但是生效的写法
? 主要用于区分不同的浏览器
? 缺点:难理解 难维护 易失效
? 替代方案:特性检测 针对性加class
? 标准属性写在前面,hack写在后面。
html面试
1.doctype的意义是什么?
? 让浏览器以标准模式渲染,让浏览器知道元素的合法性
2.HTML,XHTML,HTML5的关系
? HTML是属于SGML
? XHTML属于XML,是HTML进行XML严格化的结果
? HTML5不属于SGML或者XML,比XHTML宽松
3.HTML有什么变化
? 新的语义化元素
? 表单增强
? 新的API(离线,音视频,图形,实时通信,本地存储,设备能力)
? 分类和嵌套变更
4.em和i有什么区别
? em是语义化的标签,表示强调
? i是纯样式的标签,无意义,现在一般用来做icon图标
5.语义化的意义是什么
? 开发者便于理解
? 机器容易理解 (SEO)
? semantic microdata 把页面元素进行标记,更一步语义化
6.哪些元素可以自闭合
? 表单input
? 图片img
? br hr
? meta link
7.HTML和DOM 的关系
? HTML是”死”的
? DOM是由HTML解析而来的,是活的
? JS可以维护DOM
8.property(特性) 和attribute(属性)的区别
? attribute一旦确定 就不会改变
? property是会改变的
9.form的作用有哪些
? 直接提交表单
? 使用submit/reset按钮
? 便于浏览器保存表单
? 第三方库可以整体取值
? 第三方库可以进行表单验证
css面试题
1.css样式(选择器)的优先级
? 计算权重确定
? !important
? 内联样式
? 后写的优先级高
2.雪碧图 的作用
? 减少http的请求数
? 可以减少图片的大小
? 结合CSS3 sprite animation 写出动画效果
.box{
background: url('img.png');
width: 160px;
height: 185px;
background-size: 1120px 212px;
-webkit-animation: demo 2s steps(7) infinite;
}
@-webkit-keyframes demo{
0%{ background-position: 0 0 }
100%{ background-position: -1120px 0}
}
<div class="box">
<div class="girl"></div>
</div>
3.自定义字体的使用场景
? 宣传/品牌/banner等固定文案
? 字体图标
4.base64的使用
? http://www.letuknowit.com/images/wg.png”/> 也可以这样显示: 我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。
? 适用于小图片
? base64的体积约为原图发4/3
5.伪类和伪元素的区别
? 伪类表状态
? 伪元素是真的有元素
? 前者单冒号,后者双冒号
6.如何美化checkbox
? label[for] 和id
? 隐藏原生的input
? :checked +label 是变换样式
7.实现两栏布局或者三栏布局的方式
? 表格布局
? float+margin 布局
? inline-block布局
? flexbox布局
8.position:absolute / fixed有什么区别
? 参照物不同
? absolute 相对于最近的relative或者absolute方式定位的元素
? fixed 相对于viewport 视口进行定位
9.inline-block 为什么会有间隙
? 原因:字符间距
? 解决:消灭字符—在html中不要留有空隙
? 消灭间距—设置font-size:0;
10.如何清除浮动
? 浮动元素不在标准文档流中,可能会超出父元素,从而对其他元素产生影响,对布局也产生影响。
使用伪元素方法
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
11.如何适配移动端的页面
? viewport
? rem/viewport/media query
? 设计上:隐藏 折行 自适应
12.CSS动画的实现方式有几种
? transition —过渡动画
? keyframes(animation) —关键帧动画
13.过渡动画和关键帧动画的区别
? 过渡动画需要有状态变化
? 关键帧动画不需要状态变化
? 关键帧动画能控制更精细
14.如何实现逐帧动画
? 使用关键帧动画
? 去掉补间(steps)
15.css动画的性能
? 性能好
? 部分情况下优于JS
? 但JS可以做到更好
? 部分高危属性 box-shadow。。
CSS布局
技巧性布局为主
flexbox(弹性盒布局)/grid(网格布局)
实现左边固定宽度,右边自适应
.container{
width: 800px;
height: 200px;
display: flex;
border:1px solid #333;
}
.left{
background-color: red;
width: 200px;
display: flex;
}
.right{
background-color: blue;
display: flex;
flex: 1;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
实现垂直水平居中
?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
display: flex;
display: -webkit-flex;
border: 1px solid #0000FF;
height: 200px;
width: 400px;
align-items:center; //垂直居中
justify-content:center; //水平居中
}
.item{
width: 50px;
height: 40px;
border: 1px solid #00C1B3;
}
</style>
</head>
<body>
<div id="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
- flex-direction 属性决定主轴的方向(即项目的排列方向)。
? .box { flex-direction: row | row-reverse | column | column-reverse;} flex-wrap 默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse;}flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box { flex-flow: || ;}- justify-content justify-content 属性定义了项目在主轴上的对齐方式。
? .box { justify-content: flex-start | flex-end | center | space-between | space-around;} - align-items align-items属性定义项目在交叉轴上如何对齐。
? .box { align-items: flex-start | flex-end | center | baseline | stretch;} - align-content align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
? .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
响应式布局
? rem/viewport/media query
? 1rem=16px
@media (max-width:320px){
html{
font-size:20px;
}
}
利用媒体查询,动态改变html元素的font-size,借助rem.实现响应式
以设备宽度作为视口大小
? 通过隐藏区块的办法来实现响应式
? 通过折行的办法来实现响应式
常用布局方法
? table表格布局
? float浮动+margin ————float 会使元素变为BFC,使其可以设置宽高,
? inline-block布局
? flexbox布局——最合适的布局方式
display 确定元素的显示类型
? display:block/inline/inline-block
position 确定元素的位置
? static/relative/absolute/fixed 与left/top/bottom/right 相关
CSS动画
实现逐帧动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
@-webkit-keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
div{
width:140px;
height:140px;
background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s steps(1, start) infinite;
-webkit-animation:run 1s steps(1, start) infinite;
}
</style>
</head>
<body>
<div></div>
</body>