Css基本使用

1.元素的分类

行级元素：排列在一行上。
块级元素：一个块级元素单独占据一行。

2.css的选择器

• 标签选择器{}
• 类选择器
  样式点定义，结构类调用，一个或多个，开发最常用。
  .类名{}
  多类名之间要用空格隔开
• id选择器
  用#id名称{}
• 通配符选择器{}
  通配符选择器不需要调用，自动给所有的元素使用样式
• 伪类选择器

 <!--初始化连接
        -->
        a:link {
            color: black;
            text-decoration: none;
        }
        /*访问过之后*/
        a:visited {
            color: red;
        }
        /*鼠标放上去变色*/
        a:hover {
            color: blue;
        }
        /*鼠标持续点击*/
        a:active {
            color: greenyellow;
        }
        input:focus{
            background-color: greenyellow;
        }

bakground：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
背景半透明：
background：rgba（0 0 0 0-1）
0-1是饱和度
0，0，0，0透明
0，0，0，1黑

3. css特性

• css三大特性之层叠性
  相同的选择器设置同样的样式，此时一个样式会覆盖另一个冲突的样式。
  样式冲突遵循就近原则，哪个样式离结构近，就执行哪个样式。
• css三大特性之继承性
  给父辈标签添加样式和颜色，字辈标签也会有改样式。一般是text-，font-，line-这些元素开头的可以继承，以及color属性。
• css三大特性之优先级
  元素选择器1<类选择器10<id选择器100<行内样式表<!important
  继承的权重为0。
  a链接默认指定了一个颜色。

4.盒子模型

• 组成：
  1.border边框：
  border-width 边框的粗细，一般单位用px。border-style：solid实线，dashed虚线，dotted点线。border-color：修改颜色。复合写法：1px solid red。border-collapace：collapace合并单元框。会影响盒子的实际高和宽
  2.content盒子内容
  3.padding内边距 会影响盒子大小 如果盒子有宽度和高度，用padding会改变上下左右盒子的大小。
  如果盒子未指定宽度，则padding不会改变盒子大小。
  4.外边距margin 会影响盒子大小
  应用:外边距可以让块级盒子水平居中。
  1.盒子必须要有宽度
  2.盒子左右的外边距都设置为auto。
  行内元素和行内块元素要想水平居中，只需要给其父元素添加text-align=center

5. 圆角边框

用border-radius：length
圆形：设置为宽度的一半
圆角矩形：设置为矩形高度的一半。
设置不同的圆角其值是按顺时针的方向改变的。
两个值是对角线的数值。

6.盒子阴影

box-shadow:水平阴影 ，垂直阴影， 模糊距离程度，模糊尺寸及影子大小。
box-shadow：h-shaow v-shadow blur spread color inset;
h-shadow:水平阴影的位置，允许是负值，影子在x轴上的移动
v-shadow垂直阴影的位置，影子在y轴上的移动
blur 模糊距离是影子的虚实饱和度 spread阴影的尺寸影子的大小 color阴影的颜色 inset 外部阴影

7. 字体阴影

text-shadow h-shadow v-shadow blur color

8.浮动 定位 标准流

浮动可以让块级元素一行显示。
网页布局中竖着的盒子用标准流，横向的盒子用浮动来布局。
浮动的特性：
脱离标准流普通的盒子会移动到指定的地方。
自己原来的地方不在报存。
浮动的元素具有行内块的特点。
先用标准流的父盒子再用浮动来进行操作
浮动的盒子不会压住文字，会压住文字的盒子。

9.定位

定位：定位模式+边偏移
应用
1.可以让某个元素自由的在一个盒子内移动，并且压住其它盒子。
2.滚动窗口的时候有些盒子是固定的。
定位模式
position位置

1. static
2. relative 元素在移动位置的时候，相对于它原来的位置来说的
   特点：位置保留，下面的盒子不会升上去。
3. absolute 绝对定位相对于它的祖先元素来说的。
   特点：没有祖先元素或祖先元素没有定位则以浏览器为主
   ​ 如果祖先元素有定位，则子元素以最近有定位的盒子为主。
   ​ 绝对定位不占有位置。绝对定位可以直接设置宽度和高度。
4. fixed
   特点：以浏览器的可视窗口作为参照点来移动元素
   ​ 跟父元素没有关系。不随滚动条滚动
   ​ 不占有原来的位置
   应用：固定版心的右侧
   小算法：让固定定位的盒子走浏览器宽度的一半left 50%，
5. 绝对定位absolute
   语法：选择器{ position：absolute }
   如果没有祖先元素或祖先元素没有定位就已浏览器为准。
   绝对定位固定定位会完全压住文字。

10. 元素的显示与隐藏

本质：让一个元素在页面中隐藏或显示出来。
display属性
display ：none；隐藏对象 ，不在占有原来的位置。
display：block；块级 显示对象。
visibility 可见性
visibility：hidden 隐藏 占有原来的位置。
visibility： visible 元素可视
overflow：溢出
overflow：hidden 隐藏溢出的部分
overflow：scroll溢出的部分显示滚动条
auto 溢出的时候才显示滚动条
有定位的盒子慎用overflow：hidden。

清除浮动

在网页布局中，我们一般用标准流来确定位置，用浮动来进行布局，但是浮动的盒子是不会保留原来的位置，我们在写元素的时候会在之前的盒子底下显示。
方法：
选择器 clear：both

1.额外标签法–隔墙法

在浮动元素后面再加一个元素，定义一个class选择器，clear：both即可

2.父级添加overflow属性

可以给父级添加overflow属性，将其属性值设置为hidden，auto，scroll，在父级元素上加。

**3.父级添加after伪元素