css重点知识

2019-04-29  本文已影响0人  我没叫阿

CSS

Cascading （层叠） Style （样式） Sheets（表）

CSS选择器

兄弟选择器

image

CSS三大特性

!important > 行内 > id > class|属性 > 标签选择器 > 通配符 > 继承 > 浏览器默认

!important       ——>       infinity

行内样式        ——>        1000

id        ——>         100

class | 属性 | 伪类        ——>         10

标签 | 伪元素        ——>         1

通配符       ——>        0

父级元素身上的属性

居中

justify-content:center;

居左

justify-content:flex-start;

居右

justify-content:flex-end;

两端对齐

justify-content:space-between;

每个元素左右的距离一样

justify-content:space-around;

居中

align-items:center;

底部

align-items:flex-end;

顶部

align-items:flex-start;

居中

align-content:center;

顶部

align-content:flex-start;

底部

align-content:flex-end;

横向

flex-direction:row;

横向翻转

flex-direction:row-reverse;

竖向

flex-direction:column;

竖向翻转

flex-direction:column-reverse;

默认不换行

flex-wrap:nowrap;

换行

flex-wrap:wrap;

子级元素身上的属性

flex:1;

flex-grow:1；

flex-basis:200px;

CSS盒模型

image.png
image.png
box-sizing:content-box;

box-sizing:border-box;

.box{
  width:0;
  height:0;
  border:30px solid;
  border-color:transparent transparent pink  transparent;  //border-color:;的四个值顺序分别为上 右 下 左
}

 .box{
  width: 200px;
  height: 100px;
  background: #f66;
  margin: 0 auto;
  /* border-radius: 50%; */
  /*圆*/
  /* border-top-left-radius: 100%; */
  /*扇*/
  border-radius: 100px 100px 0 0;
  /*半圆*/
}

.dialog {
  width: 300px;
  height: 25px;
  line-height: 25px;
  background: #6A6;
  padding: 10px;
  border-radius: 6px;
  color: #fff;
  position: relative;
  margin: 20px auto;
}

.dialog ::before {
  content: '';
  border-left: 0px solid #6A6;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #6A6;
  position: absolute;
  left: -10px;
  top: 10px;
}

<div class="dialog">Hello Word！</div>
image.png

网页布局方式

flot图

清除浮动

浮动的元素不能撑起父元素的高度,所以要清除浮动

.clear::after{
  content:"";
  display:block;
  height:0;
  visibility:hidden;
  clear:both;
}
.clear{
  *zoom:1;
}

过渡模块

过度三要素

div{    
    width: 100px;     
    height: 50px;    
    background-color: lightgreen;     
    /* 1.用transition-property来告诉浏览器哪个属性要发生变化 */
    transition-property: width,background-color;     
    /* 2.用transition-duration属性告诉浏览器过渡效果执行的事件 */
    transition-duration: 2s;
}

/* 3.当鼠标悬停到div的时候,属性发生变化 */
div:hover{    
    width: 300px;     
    background-color: deeppink;
}

2D转换模块

将2D转换为3D

动画三要素

div{
    width: 120px;
     height: 20px;
     background-color: lightgreen;
     /* 1.该属性用来告诉系统该动画的名称*/
     animation-name: changes;
     /* 2.该属性用来告诉系统动画要实行的时间*/
     animation-duration: 3s;
     /* 告诉系统动画延迟时间*/
     animation-delay: 2s;
     /* 告诉系统动画执行速度*/
     animation-timing-function: linear;
     /* 告诉系统动画执行次数*/
     animation-iteration-count: 3;
     /* 告诉系统执行往返动画*/
     animation-direction: alternate;
}
/* 3.用keyframes来执行自己定义名称的动画*/
@keyframes changes {
     from{         
        margin-left: 0;    
     }
     to{
        margin-left: 500px;
     }
}

附赠知识点：

CSS 常见面试题
1. 水平垂直居中一个div

<div class="father">
  <div class="son"></div>
</div>

.father{ 
  background-color:#ccc; 
  width: 600px;
  height: 600px;
  display: table-cell; 
  text-align: center;
  vertical-align:middle;  
}
.son{
  background-color:tomato; 
  width: 300px;
  height: 300px;
  display: inline-block; 
  vertical-align: middle; 
}

.father{
  background-color:#ccc; 
  width: 600px;
  height: 600px;
  position: relative; 
}
.son{
  background-color:tomato; 
  width: 300px;
  height: 300px;
  transform: translate(-50%,-50%); 
  position: absolute;
  top: 50%;
  left: 50%;
}

.father{
  background-color:#ccc; 
  width: 600px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.son{
  background-color:tomato; 
  width: 300px;
  height: 300px;
        
}

2. CSS3新特性有那些

例：
  background:linear-gradient(red, blue);

例：
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

例：
  border-image:url(border.png) 30 round;
上一篇 下一篇

猜你喜欢

热点阅读