目录
10.清除浮动的方式有哪些?(最少三种,推荐使用:after)
提示:以下是本篇文章正文内容,下面案例可供参考
一、CSS
1.flex容器
flex-direction (属性决定主轴的方向(即项目的排列方向)。)
flex-wrap (默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。)
flex-flow (flex-flow是flex-direction和flex-wrap的简写形式,默认值为row nowrap)
justify-content (属性定义了项目在主轴上的对齐方式。(高度一致,width不同的对其))
align-items (属性定义项目在交叉轴上如何对齐。(width一致,高度不一致的对其))
align-content (属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。)
总结:felx的6个容器属性可以记忆成:一方向,一换行,一简写,三对其。
参考网址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
2.item属性
order(设置权重,默认为0)
flex-grow(将flex-item成比例放大)
flex-shrink(将flex-item成比例缩小)
flex-basis(设置flex-item的长度(覆盖width),浏览器依据此值进行放大缩小)
flex(合并flex-grow fex-shrink flex-basis)
align-self (单独设置某flex-item的对齐方式)
3.rem和em有什么区别
对于rem和em区别一句话概括就是:rem相对于根元素,em相对于父元素
总结:
rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em 单位基于使用他们的元素的字体大小。
rem 单位基于 html 元素的字体大小。
em 单位可能受任何继承的父元素字体大小影响。
rem 单位可以从浏览器字体设置中继承字体大小。
使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
媒体查询中使用 rem 单位不要在多列布局中使用 em 或 rem ,改用%。
不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。
4.transtion和transform的含义及用法
transform是 转换,指的是改变所在元素的外观,它有很多种手段(转换函数)来改变外观,例如 位移、缩放、旋转 等,而其中的位移的函数名就叫translate,所以说,translate是transform的一部分。
transition是 过渡,指的是某个CSS属性值如何平滑的进行改变,就是平常说的 动效。而transform是没有动画效果,
1.transform基本用法:
transform: [转换函数];
先说基本用法,transform接受一个转换函数,每个转换函数都会有不同的效果,下面是三个主要 的2D转换函数
所以我们想移动当前元素的话就可以这样(往上移动 10 像素,往右移动 10 像素)
transform: translate(-10px, 10px);
如果想给当前元素配置多个转换效果怎么办,如下(向右下角移动 10 像素并顺时针旋转10°):
transform: translate(10px, 10px) rotate(10deg);
transform只会影响当前元素的状态,达到类似position: relative;的效果,而且transform是默认基于元素的中心进行转换的,就算想改的话也可以使用transform-origin属性进行修改
.box {
width: 100px;
height: 100px;
transition: all 0.4s ease;
}
.box:hover {
transform: scale(1.2, 1.2);
}
接下来看一下transition的基本用法:
transition: [属性名] [持续时间] [速度曲线] [延迟时间];
我们可以很方便的用这个过渡来给某一个属性加上好看的动效。例如,高度属性的值改变时,延迟 0.5 秒后以 ease 曲线进行过渡,持续2秒:
transition: height 2s ease .5s;
或者一个属性不够,想要监听所有属性:
transition: all 2s ease .5s;
注意,这里的所有属性是指能进行动画过渡的属性,有很多属性是不能进行过渡的,比如display,你不能让一个div的显示模式慢悠悠的发生过渡。
有了上面的认识时候搭配:hover等可以引起属性值变化的伪类时就可以很轻松的做出一个动画效果:
.box {
width: 10px;
transition: width 0.4s ease;
}
.box:hover {
width: 50px;
}
如果你想给多个属性指定同一个过渡的时候该怎么做?如下:同时监听宽度和高度进行过渡
transition: width 2s ease .5s
// 等同于
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: .5s;
如果你想给多个属性指定多个过渡的时候该怎么做?
transition: height 2s, width 3s;
5.@keyframe属性
CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
通过 @keyframes 规则,您能够创建动画。
@keyframes定义一个动画,并定义具体的动画效果,比如是放大还是位移等等。
@keyframes 它定义的动画并不直接执行,需要借助animation来运转。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器
语法:
@keyframes animationname {keyframes-selector {css-styles;}}
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.@media属性
使用@media属性可以针对不同的屏幕尺寸设置不同的样式,值得注意的就是需要设置响应式页面时@media属性是非常有用的,当重置浏览器大小的过程中,页面会更具浏览器的宽度和高度重新渲染页面。
简单CSS样式不同分辨率案例:
案列一:
1280分辨率以上(大于1200px)
@media (min-width:1200px) {
.container{ width: 1100px; }
}
分析:浏览器宽度大于1200px时,.container样式设置宽度为1100px
1100分辨率(大于960px,小于1199px)
@media (min-width:960px) and (max-width:1199px) {
.container{ width: 960px; }
分析:浏览器宽度大于960px时,小于1199px时,.container样式设置宽度为960px
7.栅格(col-lg-6)原理
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
下面是 Bootstrap 网格的基本结构:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
8.垂直水平居中有哪些方法?
HTML代码:
<div id="container">
<div id="box"></div>
</div>
方法一:定位 absolute + 负margin
#container {
width: 100%;
height: 600px;
border: 1px solid black;
position: relative;
}
#box {
width: 100px;
height: 100px;
background: red;
position:absolute;
top: 50%;
left: 50%;
margin-left: -50px; /* 左偏移量取其元素宽度的一半的负值 */
margin-top: -50px; /* 上偏移量取其元素高度的一半的负值 */
}
解释:为父元素设置了相对定位之后,子元素的绝对定位就是相对于父元素盒子的左上顶点,所以定位之后我们需要回退盒子一半的距离。
方法二:定位absolute + margin auto
#container {
width: 100%;
height: 600px;
border: 1px solid black;
position: relative;
}
#box {
width: 100px;
height: 100px;
background: red;
position:absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
方法三:弹性盒子display: flex
#container{
width:600px;
height: 600px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
#box{
width: 100px;
height: 100px;
background: red;
}
方法四:利用transform
#container{
width:600px;
height: 600px;
border: 1px solid black;
position: relative;
}
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
9.如何绘制一个三角形?
方法一:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/* css3绘制三角形 */
.triangle{
width: 0px; /*设置宽高为0,所以div的内容为空,从才能形成三角形尖角*/
height: 0px;
border-bottom: 200px solid #00a3af;
border-left: 200px solid transparent; /*transparent 表示透明*/
border-right: 200px solid transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
方法二:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="content"></div>
</body>
<style>
.content{
width: 0px;
height: 0px;
border: 200px solid ;
border-color: transparent transparent transparent red;
}
</style>
</html>
10.清除浮动的方式有哪些?(最少三种,推荐使用:after)
为什么要清除浮动?
答:因为当父盒子高度为0时,子盒子不占位置,子盒子不会撑开父盒子,所以下面的标准流盒子,会跑到父盒子中的子盒子下面。
使用after伪元素清除浮动
.clearFix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearFix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
<div class="fahter clearFix">
<div class="big">big</div>
<div class="small">small</div>
</div>
父级添加overflow属性(父元素添加overflow:hidden)
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
双伪元素清除浮动
.clearFix:before, .clearFix:after {
content:".";
display:table;
}
.clearFix:after {
clear:both;
}
.clearFix {
*zoom:1;
}
关于浮动的小知识:
浮动的盒子千万不要让他超出父盒子。
超出父盒子的部分会影响下面盒子中的浮动的子盒子。
浮动的盒子比标准流盒子高,但是能够遮挡住标准流盒子,遮挡不住里面的图片和文字。
11. hetml5有哪些新特性
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素,比如 article、footer、header、nav、section
表单控件,calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation