CSS 常用知识点

三大特性

层叠性

冲突：就近原则

继承性

1. text

2. front

3. line-开头

行高继承

body {
    //子元素为本身的1.5倍
    font: 12px/1.5
}

div {
    font: 24px
}

优先级

如果选择器相同

继承性

不同选择器

继承（*）< 元素选择器 < 类选择器 < ID选择器 < 行内选择器 < importance

子选择器继承的样式永远为0

a默认样式 蓝色+下划线

权重叠加

继承 0 0 0 0

元素选择器 0 0 0 1

类选择器 0 0 1 0

ID选择器 0 1 0 0

行内选择器 1 0 0 0

盒子模型

Border

border: 

Content

Padding（内边距）

padding: 上 右 下 左

Margin（外边距）

margin-button: 20px;
left,right,top

//水平居中,前提盒子必须有高度
margin: 0 auto

//行内元素水平居中
//给父元素添加
text-align: center

//子元素和父元素同时具有外边距（margin）会出现塌陷
//解决方案
//1.给父元素定义上边框
border: 1px solid transparent 
//2.给父元素定义内边距
padding: 1px
//3.给父元素添加overflow

消去内外边距

*{
    padding: 0
    margin: 0
}

圆角边框

border-radius: 10px
//正方形 -> 圆形
border-radius: 50%;
//矩形 -> 椭圆矩形
border-radisu: height/2px

阴影效果

//box-shadow: h-shadow, v-shadow, blur(影子距离）, speard（尺寸）, color, inset
box-shadow:

浮动

上下使用标准流，左右使用浮动

只会影响当前的标准流，不会影响之前的标准流

特点

顶端对齐

自动换行

​ 父元素空间不足时自动换行

行内块

​ 添加了flow具有行内块特定

消去浮动

父容器高度无法确定，内容浮动

解决：让子孩子撑开父容器

Flex

flex布局水平分布

.container{
  display: flex;
  flex-wrapper: wrap;
}

.container > .item{
  flex: 1; -> 1 0 0%
  width: 44%; -> 水平分布两个
  min-width: 44%
  max-width: 44%;
}

悬浮按钮

  .second-button{
    height: 80rpx;
    width: 80rpx;
    position: fixed;
    bottom: 50rpx;
    right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
  }