CSS基础

1.css引入方式

• 行内样式  <h1 style="color: red;">行内样式</h1>
• 内部样式 

  <style>
      h1{
          color: red;
      }
  </style>

• 外部样式   
  • link标签引入方式：<link rel="stylesheet" href="css文件路径">

  • import引入方式：@import url(css文件路径);

2.选择器

• 标签选择器

h1{
    color: red;
}

• 类选择器

.class属性值{
    color: red;
}

•  ID选择器

#id属性值{
    color: red;
}

基本选择器权重：id选择器>class选择器>标签选择器

3.字体样式

font-style 设置字体样式

• normal ：指定文本字体为正常的字体
• italic：指定文本字体样式为斜体

font-weight 定义字体粗细

• normal：正常的字体
• bold：粗体
• bolder：特粗体
• lighter：细体

font-size 定义字体大小

line-height 设置行高

4.文本样式

text-indent 文本缩进

text-align 文本对齐

• left 左对齐
• center 居中对齐
• right 右对齐
• justify 两端对齐 

color 文本颜色

text-decoraction 文本修饰

• line-through 删除线
• underline 下划线
• overline 上划线

4.display和overflow

display属性规定元素应该生成的类型

• none 不显示元素
• block 转换为块元素
• inline 转换为行内元素
• inline-block 转换为行内块元素 

overflow属性规定当内容溢出元素框时发生的事情

• visiable 不变
• hidden 隐藏
• scroll 滚动条显示内容
• auto 超出显示滚动条 

5.盒模型

• width 宽度
• height 高度
• padding 内边距
• margin 外边距
• border 边框 border：1px solid black； 

6.浮动

float取值

• none 不浮动
• left 左浮动
• right 右浮动 

特性

• 找最近的浮动元素进行贴边
• 一行放不下自动换行显示
• 右浮动是颠倒顺序
• 浮动之后，元素属性变为行内块元素
• 浮动元素会压着下一个不浮动元素 

清除浮动

• 防止出现父元素高度塌陷
• 在最后加空标签，设置样式 clear：both；
• 在父元素添加伪元素，设置样式clear：both；清除浮动
• 父元素设置高度，清除浮动
• 父元素设置overflow：hidden；样式，清除浮动 

7.定位

position取值：

• static 默认
• relative 相对定位
  • 相对自身进行定位
  • 定位之后，自身的位置没有删除
  • 作为绝对定位的定位容器
• absolute 绝对定位
  • 相对上一个有定位属性的元素进行定位
  • 定位之后，自身的位置已经删除
  • 定位元素会与其他元素（普通元素，浮动元素，相对定位元素，绝对定位元素）进行重叠
• fixed 固定定位
  • 固定在界面的固定位置
  • 不跟随页面的滚动进行滚动
• sticky 粘性定位 
  • top、left、bottom、right其中一个值必须设置才能生效

8.弹性布局

display：flex；

采用 Flex 布局的元素，称为 Flex 容器，简称"容器"。

它的所有子元素自动成为容器成员，称为 Flex 项目，简称"项目"。

容器默认存在两根轴：水平的主轴和垂直的交叉轴。

容器的属性

• flex-direction 主轴的方向

  • row（默认值）：主轴为水平方向，起点在左端。

  • row-reverse：主轴为水平方向，起点在右端。

  • column：主轴为垂直方向，起点在上沿。

  • column-reverse：主轴为垂直方向，起点在下沿。

• flex-wrap 换行
  • nowrap 默认：不换行
  • wrap：换行，第一行在上方
  • wrap-reverse：换行，第一行在下方
• flex-flow ：flex-direction和flex-wrap简写形式
  • 默认值 row nowrap
• justify-content 主轴上的对齐方式
  • flex-start 默认值 ：左对齐
  • flex-end :右对齐
  • center：居中
  • space-between：两端对齐，项目之间的距离都相等
  • space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍。
• align-items 项目在交叉轴上如何对齐
  • flex-start：交叉轴的起点对齐
  • flex-end：交叉轴的终点对齐
  • center：交叉轴的中点对齐
  • baseline：项目的第一行文字的基线对齐
  • stretch 默认值：如果项目未设置高度或设置为auto，将占满整个容器的高度。
• align-content 多根轴线的对齐方式

项目的属性

• order 排列顺序。 数值越小，排列越靠前，默认为0
• flex-grow 方法比例 默认为0
• flex-shrink 缩小比例 默认为1
• flex-basis 项目占据的主轴空间 默认auto
• flex ：flex-grow、flex-shrink、flex-basis的简写

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;

/* 一个值，无单位数字：flex-grow */
flex: 2;

/* 一个值，width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 两个值：flex-grow | flex-basis */
flex: 1 30px;

/* 两个值：flex-grow | flex-shrink */
flex: 2 2;

/* 三个值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

• align-self:沿着交叉轴的对齐方式，覆盖align-items