less与sass的使用
less 框架应用
1复用
命名前面加上@可以进行复用
@mycolor: red;
@width : 200px;
@hight : 200px;
.box2 {
width : @width ;
height : @hight ;
background-color: @mycolor;
@font-size : 20px;
font-size : @font-size;
}
2局部使用:局部使用只能在花括号里使用
.box2 {
width : @width ;
height : @hight ;
background-color: @mycolor;
@font-size : 20px;
font-size : @font-size;
}
3嵌套
.box3 {
width : @width;
height: @hight;
div {
width : 100px;
height : 100px;
background-color: pink;
}
a {
text-decoration: none;
}
}
3mixins混入技术
.border{
border: 3px solid;
}
.box4{
width : @width;
height: @hight;
.border
}
.li(@radius,@padding,@sie,@color:pink){
border-radius: @radius;
padding: @padding;
font-size: @sie;
color: @color;
}
.box5{
width : @width;
height: @hight;
background-color: @mycolor;
.li(100%,20px,100px)
}
数值可以运算 可以进行加减乘除 除法需要用括号括起来 减号需要空格
.box6{
width : (@width/2);
height: @hight;
background-color: @mycolor;
}
scss与less的区别
变量符号为$
混入时用@minxin 用@incluble导入
@mixin border {
border-radius: 20%;
}
// 用@include引入
button{
@include border;
}
继承类用@extend
.box{
height:$width ;
width:$height ;
background-color: red;
}
.box2{
@extend.box;
}
占位符用% less与css的区别
1:注释有区别
2:可以嵌套使用,根据dom机构嵌套
3:可以进行运算,仅限数值
4:可以定义变量 有局部和全局变量
5:minxins混入,声明样式块直接带入运用 可以进行传参
响应式布局
针对不同屏幕显示不同效果,用同一套代码适用于不同的终端
媒体查询
通过媒体查询去实现适应哪一种屏幕
如何定义:
1.通过@media关键字定义查询媒体
2.定义宽度
min-width屏幕最小宽度
屏幕宽度不超过600 */
@media(max-width:600px) {
.box2 {
width: 400px;
height: 400px;
background-color: rgb(226, 17, 17);
}
}
max-width 屏幕最大宽度
/* 屏幕宽度大于等于600时显示 */
/* @media(min-width:600px) {
.box2{
height: 200px;
width: 200px;
background-color: rgb(150, 127, 255)};
} */
3.给定范围时通过and链接起来
/* 屏幕宽度最小600到最大1000 */
@media(min-width:601px) and (max-width:1000px){
.box2{
width: 500px;
height: 500px;
background-color: black;
}
}
开发方式:
渐进增强,优雅降级
渐进增强:更新新功能 新任务 新玩法
优雅降级:特殊性企业为了保证安全等,一直保持低版本
业务挂钩,用户群体
开发采用的方式跟项目类型和所针对的群体有关,不同项目有不同的开发方式
浏览器兼容
所谓的浏览器兼容问题,是指:因为不同的浏览器对同一段代码右不同的解析,造成页面的现实效果不同意的情况。
浏览器见内核差异会产生兼容问题时产生兼容性的根本原因
浏览器 排版引擎
IE | trident、edgehtml |
---|---|
Chrome | webkit、blink |
Firefox | gecko |
Safari | webkit |
Opera | presto |
浏览器的工作模式常被称为渲染模式
2009年3月19日,微软发布的IE8重新定义了标准模式、再次增强了对规范的支持,同时为了保持对IE7的支持,IE8增加了准标准模式,于是IE8九分成了标准模式、准标准模式、混合模式
csshack有三种实现方式
1:css类内部的hack
2:css选择器的hack
3:html头部的hack
lte:less than or equal to 意思是小于等于
lt:lessthan 小于
gte:greater than or equal to 大于等于
gt:great than 大于
!:不等于
浏览器厂商前缀
火狐 -moz-
欧朋. -o-
微软-ms-
苹果-webkit- 标记字符的使用
1:在html里面使用
&加入字符;
<p>▧</p>
2:在css使用
用伪元素选择器
<h1>标记</h1>
h1::after {
content: "\2122";
}
文本阴影的使用
text-shadow
<h2>text shadow</h2>
h2 {
/* 水平 垂直 模糊程度 */
text-shadow: 10px 10px 10px coral;
}
盒子阴影的使用
box-shadow
<div class="box2"></div>
.box2 {
width: 10px;
height: 10px;
background-color: cornflowerblue;
box-shadow: 10px 10px 10px cornflowerblue;
}
text-overflow属性的使用
文本溢出的内容如何显示
text-overflow: clip;
text-overflow: ellipsis
不换行在同一行继续显示
white-space: nowrap
<div class="box3">werwerwerwerwerwer</div>
.box3 {
/* 文本溢出的内容如何显示 */
text-overflow: clip;
/* text-overflow: ellipsis; */
/* 不换行在同一行继续显示 */
white-space: nowrap;
/* 隐藏 */
overflow: hidden;
width: 100px;
height: 100px;
border: 1px black solid;
}
word-wrap: break-word;属性使用
某个单词或句子太长不能在一个盒子里面
<div class="box4">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line</div>
.box4 {
height: 200px;
width: 200px;
border: solid black 1px;
word-wrap: break-word;
}
伪类选择器组合使用
<section>
<span class="type">1</span>
<span>2</span>
<span>3</span>
<span class="type">4</span>
<span>5</span>
<span class="type">6</span>
</section>
span:nth-child(even):not(.type) {
color: blue;
}
display:none 与visibility:hidden的区别
display:none隐藏盒子并且没有位置
visibility:hidden隐藏盒子但是位置
<article>
<h2>1</h2>
<!-- display:none隐藏盒子并且没有位置 -->
<h2 style="display: none;">2</h2>
<h2>3</h2>
<!-- visibility:hidden隐藏盒子但是位置 -->
<h2 style="visibility: hidden;">4</h2>
</article>
transform: rotate和transform: translate的用法
transform: rotate:角度旋转
transform: translate:角度移动
<h3 class="one"></h3>
<h3 class="two"></h3>
.one {
background-color: blue;
width: 200px;
height: 100px;
/* 角度旋转 */
transform: rotate(90deg);
}
.two {
width: 200px;
height: 100px;
background-color: brown;
/* 角度移动 */
transform: translate(50px, 50px);
}
创建动画
1:@keyframes +名字 {from开始,to结束}
2:在盒子里面绑定动画animation: flash 输入时间(5s)infinite
<div class="box5"></div>
.box5 {
width: 500px;
height: 50px;
background-color: brown;
/* 需要绑定动画 */
animation: flash 5s;
}
@keyframes flash {
/* 开始 */
from {
background-color: burlywood;
}
/* 结束 */
to {
background-color: cornflowerblue;
}
}
用百分比创建移动动画
需要用到定位:position
.box6 {
width: 300px;
height: 300px;
background-color: cyan;
position: absolute;
animation: run 1s infinite;
}
@keyframes run {
0% {
background-color: darkblue;
left: 0;
top: 0;
}
20% {
background-color: darkkhaki;
left: 300px;
top: 100px;
}
50% {
background-color: rgb(87, 23, 204);
left: 100px;
top: 10px;
}
80% {
background-color: darkkhaki;
left: 500px;
top: 20px;
}
100% {
background-color: rgb(231, 60, 140);
left: 0px;
top: 0px;
}
}
网站图标引用
1:进入font-awesome网站找到需要的图标引入链接到html里面
2:bootcdn网站里面周到font-awesome 4.70版本,引入后缀为min.css的link链接