CSS——CSS基础（一篇就够用）

一.CSS概述

1.什么是css

  css:cascading style sheets
           层叠       样式     表

2.作用

  html：搭建网页的结构，承载页面的数据
  css:美化页面，修饰标签 (亚洲4大邪术)

3.css和html属性的使用原则

  html的属性只对当前标签有效，没有可重用性，导致没有可维护性
  css 具备一定的代码重用性，提高了可维护性
  但是css没有把重用性做到极致。使用scss可以做到极致
  W3C建议使用css替代html属性，如果css无法替代的属性，就使用html属性就可以了

二.CSS语法规范

1.css的使用方式

  每个样式属性之间用分号连接，例：
  color:red; 字体颜色
  background-color:yellow; 背景颜色
  font-size: 50px; 字号大小

①行内样式，内联样式

  在元素中，写style属性，在style属性中编写样式
  <元素 style="样式声明;样式声明.....">

"color:red;background-color:yellow;font-size: 50px;">

只对当前元素生效，代码没有可重用性
内联样式默认优先级最高
内联样式只在学习和测试中使用，项目基本不用

②内部样式

在head标签中，编写style标签，在style标签内部，编写属性
选择器{样式声明;样式声明…}
选择器：定义页面中使用这个样式的元素条件

p{
 color:purple;
 background-color: pink;
}

只能在当前页面中使用，项目中使用较少，
学习和测试使用较多

③外部样式

创建一个.css文件，在html中的head标签里，使用link引入

"stylesheet" href="my.css"/>

  必须有rel=“stylesheet”，代表当前文件和引入文件的关系
  项目中大量使用

2.css的样式特性

①继承性

  文本样式和字体样式的继承
  绝大多数文本字体样式，可以被继承
  a标签不会继承字体颜色

②堆叠性

  为一个标签定义多个样式规则
  如果样式属性不冲突，都会作用到这个标签上

③优先级

  默认优先级
  高 内联样式
  中 内部样式，外部样式-------就近原则
  低 浏览器默认样式
  f12关于优先级的显示
  默认情况下，f12中样式是按照默认优先级顺序从上往下显示

④调整优先级

设置最高优先级 !important，比内联都高
写在某一个值与分号之间，!important与值之间有空格
color: red !important ;
注意，内联样式不允许设置!important，语义要求

三.基础选择器

选择器，规范了页面中哪些元素能够使用当前设置的样式
就是一个条件，符合这个条件的元素都可以使用这个样式

1.通用选择器

{样式声明} （匹配所有元素，但是的效率非常低，不建议使用）
例：*{margin:0；padding:0}

2.元素选择器

标签关键字{样式声明;}
div{} p{}

3.ID选择器

<元素 id=“id值”>
#id值{样式声明}
id在一个页面中不能重复，所有id选择器只被一个元素应用

4.类选择器

使用.定义样式，哪个元素想用，用class都能调用
<元素 class=“类名”>
.类名{样式声明}

类选择器的其它用法

①.多类选择器

<元素 class="类名1 类名2 类名3.......">

②.分类选择器

元素选择器.类选择器{样式声明}
.类选择器.类选择器{样式声明}
.tooltip.show{}

③.类名的定义规范

  ①必须有.
  ②不能以数字开头
  ③只能包含- 或者_
 v④尽量见名知意

5.群组选择器

选择器1,选择器2,选择器3.....{样式声明} #d1,.c1,div,p.c2{color:red;background-color:yellow}

6.后代选择器

通过元素的后代关系，来匹配元素
后代关系：一层嵌套或者多于一层嵌套称为后代
选择器1 选择器2 选择器3{样式声明}

7.子代选择器

通过元素子代关系，来匹配元素
子代关系，一层嵌套为子代
选择器1>选择器2>选择器3{样式声明}
子代和后代选择器可以混合使用
#d1>p span{color:red;}

8.伪类选择器

匹配元素在某一个状态时的样式
只适用于a标签的伪类
①未被访问:link a:link{color:red}
②已被访问:visited a:visited{color:green}
所有元素都能用的伪类
:hover 鼠标悬停的状态
:active 激活状态
:focus 元素获取焦点时的状态（input button）

9. 选择器权值

  选择器权值，代表选择器的重要程度
  重要程度高，优先显示
  !import >1000
  内联样式 1000
  id选择器 100
  类选择器 10
  伪类选择器 10
  元素选择器 1
  通用选择器 0
  继承的样式 无
权值的特点

1. 当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加值最大的显示
2. 有多个选择器的权值一样大，按照就近原则
3. 添加了!important当前css样式直接获取最高优先级
4. 群组选择器，不相加，个算个的
5. 选择器权值的计算，不会超过本选择器权值的最大数量级

四.尺寸和边框

1.尺寸

width: 
height: 
取值：1.px为单位的数字，rem 
	 2.% 但是如果设置高度，当前元素的父元素是body，%失效 
min-width 
max-width 
min-height 
max-height 

2.页面中允许设置尺寸的元素有哪些

具备属性，width和height的元素，都能设置宽高（img，table,td）

块级元素	行内元素	行内块(input/button)
设置宽高有效	设置宽高无效	设置宽高有效
默认宽，父元素100% 默认高靠内容撑开	宽高靠内容撑开	浏览器默认设置一个宽高 不同浏览器给的宽高不同。 一般要写兼容，css reset

3.溢出处理

overflow:visible; 溢出部分显示，默认值 
overflow:hidden;溢出部分隐藏 
overflow:scroll; 带滚动条，不管是否溢出，都添加x/y轴的滚动条 
overflow:auto; 自动， 不溢出就没有滚动条，溢出自动在溢出方向添加滚动条 
overflow-x:scroll; 单独让x轴出现滚动条 
overflow-y:scroll; 单独让y轴出现滚动条

4.边框

①边框的简写方式

同时设置4个方向的边框 
border: width style color; 
width- - - - 边框的粗细 
style - - - -边框样式 solid 实线 
					dotted 小圆点虚线 
					dashed 短线虚线 
					doubel 双实线 
color - - - -合法颜色，transparent 
取消边框 border:none / 0 ; 
最简方式 border: style; border:solid;

②单边的设置

border-top: 20px solid #f00; 
border-right: 20px dotted #00f; 
border-bottom: 20px dashed #0ff; 
border-left: 20px double #f0f; 
取消某个边框 
border-top: 0; 
border-right: 0; 
border-bottom: 0; 
border-left:0;

③单属性设置

border-width: 100px; 
border-style: solid; 
border-color: #CCFF00;

④单边单属性

border-top-width:  上边框宽度
border-top-style:  上边框样式
border-top-color:  上边框颜色
border-right-width: 
border-right-style: 
border-right-color: 
border-bottom-width: 
border-bottom-style: 
border-bottom-color: 
border-left-width: 
border-left-style: 
border-left-color:

5.边框的倒角（圆角）

把直角倒成圆角 
border-radius:圆角的半径 
取值：1.px为单位的数字 
	 2.% 50%就是圆 
单角的定义，圆角之间会相互影响 
border-top-right-radius: 值; 
border-bottom-right-radius: 值; 
border-top-left-radius: 值; 
border-bottom-left-radius: 值;

6.元素阴影

box-shadow: h-shadow v-shadow blur spread color; 
h-shadow x轴偏移量 
v-shadow y轴偏移量 
blur 阴影模糊程度 
spread 阴影大小 
color 阴影颜色 
inset 内部阴影

7.轮廓

  多用于修饰文本框和按钮
  绘制于边框外部一圈线条，不占页面空间
  一般我们会把轮廓清除掉

outline:width style color; 
outline:0; 

五.盒子模型

默认盒子模型计算公式：
元素占地宽度：
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素占地高度：
上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

1.外边距 margin

①语法：

margin：v1； 同时设置4个方向外边距 
margin-top: 
margin-right: 
margin-bottom: 
margin-left: 

取值：

1. px为单位的数字
2. % 上右下左都是父元素宽的百分比
3. auto 上下外边距无效 让块级元素本身在当前父元素内水平居中

②简写方式：

margin:v1; 同时设置4个方向 
margin:v1 v2; v1为上下 v2为左右 
margin：v1 v2 v3； v1上 v2左右 v3下 
margin：v1 v2 v3 v4； 上 右 下 左 123

③margin自我冲突

  左右冲突，以左为准
  默认布局的元素：不要用右外边距设置元素的水平位移，用左外边距设置位移
  右外边距值负责控制当前元素与后面元素的距离

2.外边距的特殊情况

①外边距的合并

  两个垂直边距相遇时，会合并成一个，值以大的为准
解决方案：

1. 只写一个元素的上边距，或者另一个元素的下外边距
2. 页面设计的时候规避

②完整的块级元素、行内元素、行内块的总结

块级元素	行内元素	行内块
设置宽高有效	设置宽高无效	设置宽高有效
默认宽：父元素%100 默认高：靠内容撑开	宽高靠内容撑开	浏览器默认设置一个宽高
4个方向外边距都有效	上下外边距无效	4个方向外边距都有效 改变行内块上外边距 行内块会带着同一行的其他行内元素/行内块一起位移

③默认自带外边距的元素

  p , h1~h6 , ul , ol
  body 4个方向8px
  ul 上下外边距16px 左内边距40px

④外边距溢出

在特殊情况下，子元素的上外边距会作用到父元素上
特殊情况：

1. 父元素没有上边框
2. 子元素内容区域的上沿与父元素内容区域的上沿重合
   解决方案
3. 给父元素上上边框，增加了父元素的实际占地高度
4. 给父元素添加上内边距，增加了父元素的实际占地高度
5. 给父元素设置overflow:hidden/auto, 如果想溢出显示，就不行了
6. 给父元素添加一个大儿子，一个空

3.内边距 padding

①语法

padding:v1; 
padding:v1 v2; 
padding:v1 v2 v3; 
padding:v1 v2 v3 v4; 
padding-top; 
padding-right; 
padding-bottom; 
padding-left; 

取值：

1. px为单位的数字
2. % 父元素宽度的百分比
3. 内边距不能设置auto

4.设置盒子模型的计算方式

box-sizing:
content-box默认值，设置的width为内容区域宽度
   左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
border-box 设置的width包含(左边框+左内边距+内容区域+右内边距+右边框)
   左外边距+width+右外边距
width设置百分比的时候，一般使用border-box比较好控制

六.背景

1.背景颜色

background-color : 合法颜色值; 背景颜色 
background-image : url(img/02.png); 背景图片 
background-repeat: repeat; 背景图片的平铺 
					no-repeat 不平铺 
					repeat-x 设置x轴平铺 
					repeat-y 设置y轴平铺

2.背景图片的定位

background-position: 

取值：

1. x y 分别设置x轴和y轴
   以px为单位的数字
   关键字 x：left/center/right y：top/center/bottom
2. 一个值 只设置x轴，y轴默认居中

background-size: 

取值：

1. 两个值设置宽高 px为单位的数字
2. 一个值同时设置宽高
3. contain 图片根据元素尺寸自动等比缩放，正好全部显示图片
4. cover 图片根据元素尺寸自动等比缩放，正好把元素铺满

3.简写方式

background：color img repeat position；

简写方式没有size。size需要单写

4.最简方式

background：color / img；

七.渐变

1.线性渐变

background-image: linear-gradient(方向，色标1，色标2……);

取值：方向

1. 写终点

to top
to right
to bottom
to left

2. 写角度
   0deg

色标
   颜色+位置

1. %
2. px
3. 不写位置只写颜色

2.径向渐变

background-image: radial-gradient(半径 at 圆心x 圆心y，色标1，色标2…….);

取值
圆心

1. px为单位的数字
2. %
3. 关键字 X：left/center/right Y：top/center/bottom

色标
位置为%，是半径长度的%

3.重复渐变

background-image: repeating-radial-gradient(100px at centercenter,#000 0%,#0ff 2%);

4.线性渐变的浏览器兼容问题

-webkit-	chrome safari
-o-	欧朋浏览器
-moz-	火狐浏览器
-ms-	IE浏览器

八.文本格式化

1.字体属性

字体大小

 font-size: px 、rem 、 pt 

字体系列

font-family:系列1，系列2，…… 

字体加粗

font-weight: lighter 300 normal 400 bold 600 bolder 700 

字体样式

font-style:normal 没样式 
				italic 斜体 

小型大写字母

font-variant: small-caps;

字体的简写方式

font: style variant weight size fmily; 一定按照顺序写 
font: italic small-caps bold 36px "mv boli"; 

最简方式

font：size family;

2.文本属性

文本颜色 color:
文本的堆砌方式

text-align:left; 左对齐 
				right 右对齐 
				center 居中
 				justify 两端对齐

text-align:center 的细节 : 让内部的文本、行内、行内块水平居中 内部块级元素会继承，但不会让块级元素居中
margin：0 auto； 让当前块级元素水平居中
line-height垂直对齐方式——行高
一般会把行高设置为容器高度，让文本在容器中垂直居中
取值：
line-height：

1. px为单位的数字
2. 无单位的数字，代表字号的倍数
   一般只对一行文本设置行高，设置多行文本使用内边距算！！！
   文本线条修饰

text-decoration:underline; 下划线 
				overline 上划线 
				none 删除所有线条 
				line-through 删除线 

首行缩进

text-indent: px为单位的数字 

文本阴影

text-shadow:h-shadow v-shadow blur color;

九.表格的样式

1.表格的常用样式

①table
   尺寸、边框、背景、文本、内外边距都有效
②td/th
   高度正常使用，宽度靠内容撑
   边框、背景、文本、内边距都有效 外边距无效

2.表格的专属样式

①td/th属性
   vertical-align:top/middle/bottom
   设置td/th中文本的垂直对齐方式
②table的属性

1. 边框合并

border-collapse:separate; 默认值，边框分离状态 
				collapse 边框合并 

2. 边框之间的距离，前提边框处于分离状态

border-spacing:20px; 

3. 边框标题

caption-side:top; 标题在表格上面 
			bottom 标题在表格下面

4.设置表格显示规则

表格自动布局(默认布局)	表格的固定布局
table-layout:auto	table-layout: fixed;
单元格尺寸会自动适应内容	单元格大小取决设置的尺寸
比较灵活	表格不够灵活
表格越大，加载速度越慢	任何情况，加载速度都快
适用于不确定每列大小并且不复杂的表格	适用于确定每列大小的表格

十.浮动定位

float:none; 默认值，不浮动 
	  left 左浮动 
	  right 右浮动 

右浮动必须使用margin-right进行位移
没有定义宽度的元素，脱离文档流之后，宽度靠内容撑开
元素一旦脱离文档流，会变成块级元素
清除浮动带来的影响

clear：left； 清除左浮带来的影响 
	  right 清除右浮带来的影响 
	  both 同时清除左右浮动的影响

解决高度坍塌

1. 给父元素设置高度（适合元素较少的情况下）
2. 给父元素也设置浮动（会影响父元素的兄弟元素以及父元素的父元素，完全不能用）
3. overflow：hidden/auto；（不能溢出显示了）
4. 给父元素添加一个空的块级元素当做小儿子，并给小儿子设置clear:both;

十一.其他重要样式属性

1.显示方式

display:block; 让元素按照块级元素去显示 
display:inline; 让元素按照行内元素去显示 
display:inline-block; 让元素按照行内块方式显示 
display:table; 让元素按照表格的方式显示 
display:none; 隐藏，脱离文档流的隐藏

2.显示效果

visibility:visible; 默认值，显示 
visibility:hidden; 隐藏，不脱离文档流的隐藏 

visibility:hidden;和display:none;的区别
    visibility:hidden是不脱离文档流的隐藏
    display:none是脱离文档流的隐藏

3.透明度

opacity:0.5; 取值0~1 0全透明，1不透明
opacity和rgba的区别
     rgba只改变当前颜色的透明度
     opacity元素以及元素后代所有与颜色相关的都会变透明

4.垂直对齐方式

vertical-align:
使用场合
 ①表格th/td
   控制内部内容垂直对齐方式 top/middle/bottom
 ②行内块
   控制行内块前后行内元素、行内块元素、文本的垂直对齐方式
   top/middle/bottom 默认值middle
 ③img
   控制img和前后行内元素、行内块元素、文本的垂直对齐方式
   top/middle/bottom/baseline 默认值 baseline基线

5.光标的管理

设置属性之后，会直接调用操作系统的默认光标

cursor:default; 默认值 小箭头 
cursor:pointer; 小手 
cursor:text; 提示文本输入 的 I 
cursor:wait; 等待加载 
cursor:help; 帮助 
cursor:crosshair; 十字

6.列表的样式

list-style-type:disc; 实心圆 
				square; 实心小方块 
				circle;空心圆 
				none; 去除列表标识项 
list-style-image: 
list-style-position:outside; 默认值，在li外侧显示列表标示 
					inside； 在li中显示列表标识 

简写方式

list-style:type URL position; 
list-style:none; 最简方式，清除列表标识项

十二.定位

相对定位、绝对定位、固定定位
position:static 默认值 默认文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位
注意：元素一旦设置了position，并且取值为relative/absolute/fixde其中一种时

1. 这个元素被称为已定位元素
2. 解锁四个方向的定位属性：top / right / bottom / left
   左右冲突以left为准
3. 会解锁堆叠属性z-imdex

1.相对定位

position:relative; 配合偏移属性
不脱离文档流，不影响周围元素
如果一个元素设置了相对定位，并且不写偏移属性，这个元素对页面没有任何影响
如何偏移：相对自己原先位置偏移
使用场合：
  ①做元素位置的微调
  ②作为绝对定位的祖先级已定位元素

2.绝对定位

position:absolute;配合偏移属性
绝对定位，脱离文档流
如何偏移：
  ①如果元素没有已定位的祖先元素，绝对定位元素相对body左上角进行偏移
  ②以“最近的”“已定位的”“祖先级”元素左上角做偏移，子绝父相
使用场合：页面布局中使用，可以让页面移动到页面的任何位置

3.固定定位

position:fixed; 配合偏移属性
如何偏移：相对于body左上角
使用场合：把元素永远固定在页面可视区域的一个位置

4.堆叠顺序

z-index:
注意事项

1. HTML代码中后写的元素堆叠顺序高
2. z-index：默认值大于0小于1
3. 浮动在第几层 小于0 大于-1
4. 只有已定位的元素才能设置堆叠
5. 堆叠顺序对父子级元素无效，儿子永远压着父亲