css 笔记1. 元素分类，文档流 2. 盒模型 border-box width=content+padding+bo

1. 元素分类，文档流

display:inline;
/*内联元素  从左到右，最大宽度最右边会截断显示*/
display:block;
/*块级元素  一个元素占一行*/
display:inline-block;
/*从左到右，不会截断显示*/

2. 盒模型

box-sizing:content-box;
box-sizing:border-box;

border-box width=content+padding+border

content-box ****width=content

css盒模型分为两种：

content-box，

border-box

区别是content-box宽度只包含content

border-box包含border+padding+content

3. margin

margin指的是盒模型之间的距离（外边距），上下的两个盒子 margin会合并，阻止margin合并的方法有

display:inline-block
overflow:hidden
加border ， padding

左右不会合并，如果设置inline-block后不想在同一行可以设置width：100%

4. 继承 Inherited

color 字体颜色
font-size 字体大小
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-style：定义字体的风格
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
color：文本颜色
visibility：元素可见性
光标属性：cursor

以上是部分可以被继承的属性，内联元素的字体系统都可以继承

background 背景色
background-image 背景图
background系列不继承

5. 选择器

- 选择所有
div 直接写标签名称
. 类名 class选择器
#id id选择器
：伪类指定某种状态时的样式例：:hover 鼠标悬停时
: : 伪元素特定位置的元素的样式 ::first-line 首行

6. 布局、定位相关

（1）flex 布局

父元素容器 continer

.continer{display:flex}
.continer{display:inline-flex}

文档流

flex-direction:column /*从上到下排列*/
flex-direction:column-reverse /*从下到上排列*/
flex-direction:row /*从左到右排列,默认情况*/
flex-direction:row-reverse/*从右到左排列*/

换行

flex-wrap:nowrap  /*默认情况，不折行，弹性变化*/
flex-weap:wrap /*折行*/

水平对齐方式

justify-content:flex-start /*左对齐，默认情况*/
justify-content:flex-end  /*右对齐*/
justify-content:center  /*居中对齐*/
justify-content:space-around  /*两端对齐，左右留空边距*/
justify-content:space-evenly /*左右留空边距，间距等宽*/

垂直对齐方式

align-items:flex-start  /*向上对齐*/
align-items:flex-end /*向下对齐*/
align-items:center /*居中对齐*/
align-items:stretch /*上下填充*/

多行内容设置高度

align-content:flex-start /*内容向上对齐*/
align-content:flex-end /*内容向下对齐*/
align-content:center /*内容居中*/
align-content:stretch /*平均行距*/
align-content:space-between /*两端对齐，平均行距*/
align-content:space-around /*两端对齐，有边距*/

（2）定位

statis 默认值，保持在文档流中。
relative 相对定位，提升层级但不脱离文档流，可以有一定偏移量。
absolute 绝对定位，必须在父元素加relative 子元素加absolute，脱离原来位置，另起一层，其位置相对于祖先中不是statis且最近的元素。
fixed 固定定位，固定在屏幕中指定位置，即使滚动也不动，会被tronsform影响，不要放在有tronsform属性的元素中，不要再手机上使用。
sticky 粘滞定位，兼容性差，相当于Excel的冻结窗格（首行），平时是正常文档流，一旦到顶部就会固定。
z-index 同级父元素或者，同一父元素下的子元素可以通过z-index来设置层级。

7. 动画

注：元素必须是 block

transform

transform:translate /*位移*/
teansform:scale/*缩放*/
teansform:rotate/*旋转*/
teansform:skew/*倾斜*/

/*例子,沿X轴移动200像素*/
transform:translateX(200px);

transition

自动补帧，只需设置开始和结束

transition 属性值 时长 过渡方式 延迟
transition ：width 1s

animation

指定关键帧动画，需要设置@keyframs

@keyfroms 名字{
  0%{样式}；
  50%{样式}；
  100%{样式}；
}；
animation keyfroms 时长

8. 拓展 scss

scss是一个非常好用的css预处理器，提供了非常好用的语法，主要分为三种

嵌套语法
$变量声明
%继承

/*嵌套语法*/
demodiv{
  >demolist{
    border:1px solid red;
  }
  &.demospan{
    display:block;
  }
}

/*变量*/
$red：#a7262q;

/*继承*/
%clearFix {
    &::after {
        content: '';
        clear: both;
        display: block;
    }
}

9. 手机端防止双击缩放

<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

css 笔记