css3面试的时候需要记忆的东西
1.响应式布局：
<link rel="stylesheet" href="1.css" media="screen and (min-width:1000px)">
<style>
@media screen and (min-width: 600px) {
.one{
border:1px solid red;
height:100px;
width:100px;
}
}
</style>
and 逻辑与 not only ,设备列表
**这是一个简单的demo*******
<style>
@media screen and (min-width:1024px){
.list{
min-width:1024px;
height:300px;
border:1px solid red;
}
.left{
width:70%;height:100%;float:left;background:blue;
}
.right{
width:30%;height:100%;float:left;background:green;
}
}
@media screen and (max-width:1024px){
.list{
min-width:1024px;
height:300px;
border:1px solid red;
}
.left{
width:100%;height:100%;float:left;background:blue;
}
.right{
display:none;
}
}
</style>
*****************************
2.边框
border-style:solid;
border-width:2px;
border-radius:0;
border-color:red;
********************
box-shadow:2px 2px 5px #000;//x方向的偏移量，y方向的偏移量，阴影的模糊程度，阴影的颜色。
IE8需要做兼容的。
border-image-source:url(border.png);//用在边框图片的路径
border-image-slice:26; //图片边框向内偏移
border-image-width:26;//
border-image-outset:5;//边框图片超出边框的量
border-image-repeat:stretch round;//边框图片应该平铺repeat，铺满round，或拉伸stretch
/********这是利用背景属性的一个轮播图的demo**********/
3.
<script>
window.onload=function () {
var div=document.getElementsByTagName("div")[0];
var positionArr=(getStyle(div,"backgroundPosition")).split(",");
var num=0;
setInterval(function(){
if(num==positionArr.length){
num=0;
}
for (var i=0; i<positionArr.length; i++) {
if(i==num){
positionArr[i]="0 0";
}else{
positionArr[i]="-500px -500px";
}
}
div.style.backgroundPosition=positionArr.join(",");
num++
},3000)
}
function getStyle (obj,attr) {
if(window.getComputedStyle){
return getComputedStyle(obj,null)[attr];
}else{
return obj.currentStyle[attr];
}
}
</script>
<style>
div{
width:200px;height:200px;
background-image:url(1.jpg),url(2.jpg),url(3.jpg);
background-repeat:no-repeat;
background-size:100% 100%,100% 100%,100% 100%;
background-position:0px 0px,-500px -500px,-500px -500px;
}
</style>
</head>
<body>
<div>
</div>
</body>
/*******************/
4.文本模型：
使用文字溢出隐藏 text-overflow 属性： div.test { text-overflow:ellipsis; }
注:该容器必须设置 overflow:hidden
允许对长单词进行拆分，并换行到下一行： p {word-wrap:break-word;}
white-space:nowrap;中文强制不换行
/*简单的demo*/
<style>
div{
width:50px;border:1px solid red;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis ;//变为了..
}
div:hover{
overflow:visible;
}
</style>
</head>
<body>
<div>
我们都是祖国的花朵
</div>
</body>
****************************
-webkit-text-fill-color:blue;
-webkit-text-stroke:1px red;//stroke可以理解为边框的意思
-webkit-text-stroke-width:1px;
-webkit-text-stroke-color:pink;
text-shadow: 5px 5px 5px #FF0000;//水平阴影、垂直阴影、模糊距离，以及阴影的颜色
/*这是一个简单的demo*/
<style>
div{
cursor:pointer;font-size:40px;
}
div:hover{
/*text-shadow:1px 1px 3px #000000;*/
}
</style>
<script>
window.onload=function () {
var div=document.getElementsByTagName("div")[0];
var num=0;
var t;
div.onmouseover=function () {
clearInterval(t);
t=setInterval(function(){
num++;
if(num>=5){
clearInterval(t)
}else{
div.style.textShadow=num+"px "+num+"px "+num+"px #333";
}
},60)
}
div.onmouseout=function () {
clearInterval(t);
t=setInterval(function(){
num--;
if(num<=0){
clearInterval(t)
}else{
div.style.textShadow=num+"px "+num+"px "+num+"px #333";
}
},60)
}
}
</script>
</head>
<body>
<div>
这是一首欢快的欢乐颂，哈哈哈，
</div>
5.颜色和渐变
HSL色彩模式是工业界的一种颜色标准，
background:hsla(0,100%,60%,0.5);// 色调，饱和度，亮度，透明度
注意：如果想让背景实现全透明，可以使用，background:transparent
简单的css3线性渐变 有一些版本较低的浏览器需要前缀，最新版本的都不需要加前缀
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
/* 标准的语法 */ 默认的渐变方向从上到下
从左到右的渐变
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
/* 标准的语法 */ （从右向左 to left）
从左上角到右下角
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
/* 标准的语法 */ (同理 其他对角线) 使用角度
background: -webkit-linear-gradient(40deg, red, blue);
background: -o-linear-gradient(40deg, red, blue);
background: -moz-linear-gradient(40deg, red, blue);
background: linear-gradient(40deg, red, blue);
/* 标准的语法 */
*************************************************************
多个颜色节点的渐变
渐变
background: -webkit-linear-gradient(red, green, blue);
background: -o-linear-gradient(red, green, blue);
background: -moz-linear-gradient(red, green, blue);
background: linear-gradient(red, green, blue);
/* 标准的语法 */ 示例：
彩虹渐变
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
/*标准的语法*/
需要定义每种颜色所在的位置可以在颜色后面跟上百分号
background:linear-gradient(to right bottom,red 0%, green 50%, blue 100%);
/*标准的写法*/ 需要使用透明度可以将颜色格式设置为
rgba(255,255,255,0);
重复的线性渐变
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法 */
矢量渐变：
简单的css3径向渐变 颜色结点均匀分布的径向渐变：
background: -webkit-radial-gradient(red, green, blue);
background: -o-radial-gradient(red, green, blue);
background: -moz-radial-gradient(red, green, blue);
background: radial-gradient(red, green, blue);
/* 标准的语法 */ 颜色节点分布不均匀的径向渐变：
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
background: -o-radial-gradient(red 5%, green 15%, blue 60%);
background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
background: radial-gradient(red 5%, green 15%, blue 60%);
/* 标准的语法 */
重复的径向渐变
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法 */
**********************************************************
还有一种特殊的文字的渐变：
<style>
div{
font-size:12em;
color:green;
background:-webkit-gradient(linear,0 0,0 bottom,from(red),to(green));
-webkit-background-clip:text;
-webkit-text-fill-color:rgba(0,0,0,0);
}
</style>
</head>
<body>
<div>
莫愁前路无知己，天下谁人不识君
</div>
*********************************************************************
6.列的几个属性：
column-count 规定元素应该被分隔的列数。
column-gap 规定列之间的间隔。
column-rule 设置所有 column-rule-* 属性的简写属性。
column-width 规定列的宽度。
7. resize: none|both|horizontal|vertical; //最后两个属性的意思是，一个表示可以调整的宽度，一个表示可以调整的高度。
8. box-sizing: content-box|border-box|inherit;
9.除了IE剩下都支持
outline:2px solid green;
outline-offset:9px;
10.css3清楚浮动
selector:before,selector:after { content: " "; display: block; } selector:after { clear: both; }
11.
css3面试的时候需要记忆的东西的更多相关文章
- MySQL 三万字精华总结 + 面试100 问，吊打面试官绰绰有余（收藏系列）
写在之前:不建议那种上来就是各种面试题罗列,然后背书式的去记忆,对技术的提升帮助很小,对正经面试也没什么帮助,有点东西的面试官深挖下就懵逼了. 个人建议把面试题看作是费曼学习法中的回顾.简化的环节,准 ...
- 面试官问我redis数据类型，我回答了8种
面试官:小明呀,redis 有几种数据结构呀? 小明:8 种 面试官:那你说一下分别是什么? 小明:raw,int,ht,zipmap,linkedlist,ziplist,intset,skipli ...
- Java面试指导
Java面试指导 想要成为合格的Java程序员或工程师到底需要具备哪些专业技能,面试者在面试之前到底需要准备哪些东西呢?本文陈列的这些内容既可以作为个人简历中的内容,也可以作为面试的时候跟面试官聊 ...
- Java简历与面试
尊重原创:http://blog.csdn.net/love_java_cc/article/details/78292347 Java就业指导 想要成为合格的Java程序员或工程师到底需要具备哪 ...
- 软件测试工程师这样面试，拿到offer的几率是80%
面试难还是不难?取决于面试者的底蕴(气场+技能).心态和认知及沟通技巧.面试其实可以理解为一场聊天和谈判,在这过程中有心理.思想上的碰撞和博弈.其实你只需要搞清楚一个逻辑:“面试官为什么会这样问?他希 ...
- 大厂面试官：Java工程师的“十项全能”
想要成为合格的Java程序员或工程师到底需要具备哪些专业技能,在面试之前到底需要准备哪些东西呢?面试时面试官想了解你的什么专业技能,以下都是一个合格Java软件工程师所要具备的. 一.专业技能 熟练的 ...
- LSTM（Long Short-Term Memory）长短期记忆网络
1. 摘要 对于RNN解决了之前信息保存的问题,例如,对于阅读一篇文章,RNN网络可以借助前面提到的信息对当前的词进行判断和理解,这是传统的网络是不能做到的.但是,对于RNN网络存在长期依赖问题,比如 ...
- 【转】javascript 中的很多有用的东西
原文:https://www.cnblogs.com/ys-ys/p/5158510.html ---------------------------------------------------- ...
- 重新想，重新看——CSS3变形，过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
随机推荐
- MAC、IDFA、IMEI正则表达式
一.安卓: MAC:接入网络的设备的序号,唯一值.用 16 进制数表示,由 0-9,A-F 组成,如:44:2A:60:71:CC:82 Uuid 正则表达式: ^([0-9a-fA-F]{2})(( ...
- redis watch multi exec 关系
EXEC 执行所有事务块内的命令. 假如某个(或某些) key 正处于 WATCH 命令的监视之下,且事务块中有和这个(或这些) key 相关的命令,那么EXEC 命令只在这个(或这些) key 没有 ...
- 技巧：利用 Workflow 显示附近的免费 Wi-Fi
得益于 Workflow 自 1.5.3 版本起更新的 Get Content of URL 动作,该 App 的潜力得到了极大的提升.本文分享一种有趣的用法,搜寻附近的免费 Wi-Fi 并择一显示在 ...
- NOIP2011提高组 聪明的质监员 -SilverN
题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每个矿石都有自己的重量 wi 以及价值vi .检验矿产的流程是: 1 .给定m 个区间[L ...
- HDU 1394 & ZOJ 1484 Minimum Inversion Number
(更新点查询区间) 这题重在想到,写代码很容易了..这题是利用线段树求逆序数,不按给定的顺序建树,而是有序地插入.比如每插入一个数,就统计之前插入的那些数里比他大的有多少个,这个数就是此时的逆序数,然 ...
- springMVC+ajax分页查询
项目用到ajax技术的查询,查询结果很多时候要分页展示.这两天摸索了一下,在这里做一总结,方便自己随时查看, 也方便后人参考. 这里的顺序遵从从前台页面到后台控制器,业务层,Dao层,Mapper 下 ...
- 在springmvc中使用hibernate-validate
在springmvc.xml中加入 <!-- 国际化配置 --> <bean id="localeResolver" class="org.spring ...
- bootstrap学习总结-css组件(三)
今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用.关于前两篇中,css样式和布局的文章,大家可以在首页进行阅读.http://www.cnblogs. ...
- Maven简介与简单使用
Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. Maven 除了以程序构建能力为特色之外,还提供高级项目管理工具.由于 Maven 的缺省构建 ...
- Managing the Lifecycle of a Service
service的生命周期,从它被创建开始,到它被销毁为止,可以有两条不同的路径: A started service 被开启的service通过其他组件调用 startService()被创建. 这种 ...