CSS

css用来修饰html元素，全称 Cascading Style Sheets（层叠样式表）
基本语法：

引入css

在html中引入css：

 <link rel="stylesheet" href=" 地址 ">

在css中引入另一个css：

@import url( 地址 );

如果直接在html文件写css：在< head>标签内加入style{ }

或者直接用内联标签在需要的标签内加入style{ }

---

注意：除了div和span没有默认样式，其他的标签基本上都有自己的默认属性，所以在开干之前要清除所有的默认属性

* {
    margin: 0;
    padding: 0;
}

---

浮动的bug，解决bug

在css中输入一下代码，然后引用：

.clearfix::after{
    content: ' ';
    display: block;
    clear: both;
}

给所有的子元素加

float: left;

给其浮动得父级加clearfix

class="clearfix"

总结：子 浮 父 叉

---

position (位置)

position有5个属性值：

• fixed
• relative
• absolute
• static
• sticky

fixed:死定位，相对于屏幕窗口固定不动。
relative：相对定位，可以移动，因为不脱离文档流所以之前的所留位置继续霸占，不影响其他元素位置。
absolute:绝对定位，可以移动，因为脱离文档流所以之前的位置会被别人霸占，影响其他元素的位置。 子绝父相。
static:没有定位，是position的默认值。不脱离文档流，会忽略 left,top,right,bottom和z-index属性
sticky:

z-index

当你定义css中position属性为absolute，relative，fixed，用{z-index：数字}，数字越大则被层叠，就会越在上面。

---

踩的坑，记录下

• 页面的文字默认大小是 16px

• 浏览器的控制台（F12）中右边中
  style的意思是: 展示所有的样式。 computer意思是：展示计算出来的样式。

• 一个元素的高度是由什么决定的？由内容。

• 汉字包含的文档流会随着页面压缩换行，但是英文不会，浏览器会默认的认为英文是一个字，即使英文是个很长的单词。如果想让英文如汉字一样换行的话就输入如下：

  { word-break:break-all }

• 背景色虚色：

  background-color: rgba (0,0,0,0.3)

• 背景图片是默认自适应的，把该图设置成该框大小：

  {background-position:center center;}
  等比例缩放到其父容器:

  { background-size :cover; }

• max-width: xx ；该元素最大不能超过xx。

• color：transparent。透明色

• vertical-align:top; 取消元素内内容的上下间隙。

• SVG语法中颜色不是color表示，应该用 fill : red;

---