CSS基础

Flex弹性布局

• 容器属性：

1. display: flex
2. flex-wrap/flex-direction/justify-content/align-items/align-content

• 子项目属性：
  flex/algin-self
• 实现两栏布局

.flex{
	display: flex;
}
#left{
	width: 200px;
}
#rigtht{
	flex：1 1 auto;
}

• 三栏布局

.flex{
	display: flex;
}
#left{
	width: 200px;
}
#middle{
	flex：1 1 auto;
}
#rigtht{
	width: 200px;
}

float浮动清除

浮动最初是用于实现文字包围图片的样式
但是会带来系列副作用: 父元素高度坍塌，其他块级元素被覆盖

.father{
            border: 2px  black solid;
        }
        .left {
            background: red;
            width: 200px;
            height: 200px;
            float:left;
        }
        .right {
            display: inline;
            background: green;
            width: 400px;
        }

• 清除浮动

1. 在后面加一个元素.clear{clear:both}
2. 父元素：{overflow:hidden}
3. .clearfix:after{
   content:’’;
   height:0;
   display:block;
   clear:both;
   }

css优先级

1. 如果有important那一定优先
2. 计算优先级，选择器不同 内连属性都具有不同的数值
3. 优先级高的优先，优先级一样的按定义先后

a标签的作用

1. 超连接
2. 锚点
3. 实现tel mailto效果

position定位方式

1. static默认文档流
2. relative相对于默认文档流的未知
3. fixed相对于页面窗口的位置
4. absolute相对于最近的非static父元素的偏移

margin合并和margin塌陷的问题

1. margin塌陷表现在嵌套的盒子都有margin-top属性会按照大的来确定
2. margin合并则表现为相邻的盒子之间的margin也仅由大的确定
   解决办法： bfc

bfc块级格式化上下文

1. 触发方式
   display: inline-block
   overflow: hidden
   position: absolute/fixed
   float

样式单位：

1. 字体相对单位
   px(屏幕分辨率) em(相对当前元素的字体大小) rem(相对html根节点的字体大小)
2. 视窗相对单位
   vv vh v-min v-max

媒体查询

@media screen and (max-width:**){
}

@media screen and (orientation:**){
}

css3动画

transition
transform
animation

** less/sass等待学习
css预处理器