Flex弹性布局
- 容器属性:
- display: flex
- 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;
}
- 清除浮动
- 在后面加一个元素.clear{clear:both}
- 父元素:{overflow:hidden}
- .clearfix:after{
content:’’;
height:0;
display:block;
clear:both;
}
css优先级
- 如果有important那一定优先
- 计算优先级,选择器不同 内连属性都具有不同的数值
- 优先级高的优先,优先级一样的按定义先后
a标签的作用
- 超连接
- 锚点
- 实现tel mailto效果
position定位方式
- static默认文档流
- relative相对于默认文档流的未知
- fixed相对于页面窗口的位置
- absolute相对于最近的非static父元素的偏移
margin合并和margin塌陷的问题
- margin塌陷表现在嵌套的盒子都有margin-top属性会按照大的来确定
- margin合并则表现为相邻的盒子之间的margin也仅由大的确定
解决办法: bfc
bfc块级格式化上下文
- 触发方式
display: inline-block
overflow: hidden
position: absolute/fixed
float
样式单位:
- 字体相对单位
px(屏幕分辨率) em(相对当前元素的字体大小) rem(相对html根节点的字体大小) - 视窗相对单位
vv vh v-min v-max
媒体查询
@media screen and (max-width:**){
}
@media screen and (orientation:**){
}
css3动画
transition
transform
animation
** less/sass等待学习
css预处理器