CSS个人笔记

CSS

一.CSS又称层叠样式表

《1》结构：

选择器{声明;声明} 声明=属性+属性值

p {
   color: pink;
}

总结：

选择器写在 { } 前面，声明写在 { } 内，声明和声明之间用；隔开
声明是由属性和属性值组成，属性和属性值之间用：连接

《2》CSS样式

color	字体颜色
background-color	背景颜色
height	元素高度
width	元素宽度

《3》CSS三种样式表的使用

三种书写格式有：外部样式，内部样式，行内样式

1，外部样式表：

写在html文件外，创建一个 CSS 文件，通过在head里面创建link标签引入生效

可以实现代码复用(推荐外部写法)

<link rel="stylesheet" href="css/index.css">

2，内部样式表：

写在html文件内，通过在head里面创建style标签，在style标签内写CSS样式

  <style>
    p {
      color: pink;
      background-color: green;
    }
  </style>

3，行内样式表：

写在元素开始标签style属性中(是使用最少的方式)

<p style="color:red;background-color: pink;">啦啦啦啦啦</p>

二.CSS权重：

《1》权重相同：

如果属性不冲突都生效，如果属性冲突后者生效

《2》权重不同时：

如果属性不冲突都生效，如果属性冲突权重大的生效

选择器	权重
通配符	0-1
标签选择器	0001
class选择器	0010
id选择器	0100
群组选择器	自己算自己的
包含选择器	所有选择器权重之和
! important	权重最高

 <style>
  p {
  color: pink !important;}
 </style>

! important 尽量少用或者不用

三.优雅降级，渐进增强

《1》渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

《2》优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

《3》区别：

优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

四.CSS选择器

《1》标签选择器/类型选择器：

直接用标签名作为选择器

 p {
      color: red;
    }

作用：统一某一类标签的样式

《2》id选择器

#p1 {
      color: pink;
    }
<p id="p1">零零零零</p>

注意：id 名不能重复，一个 id 名在页面中只能出现一次

作用：让某个标签具有唯一性

《3》class选择器/类选择器

.p2 {
      color: red;
    }
<p class="p2">零零零零</p>
<p class="p2">零零零零</p>
<p class="p2">零零零零</p>

特点：和 id 比较像，不具有 id 的唯一性，可以使用多次

作用：将不同的标签，划为一类，统一管理

《4》群组选择器

   p,
    h3 {
      background-color: pink;
    }
  <p>我是p</p>
  <h3>我是h3</h3>

作用：给不同标签添某种样式(每个选择器直接用，隔开)

《5》通配符选择器 *

* {
      margin: 0;
      padding: 0;
    }

选中页面中所有元素

主要功能：清除默认间距，是写SCC的起手式

《6》包含选择器/后代选择器

p b 选中p后面所有的b元素

 p b {
      color: red;
    }
  <p>
    <b>asdasdas</b>
    asdasdasd
    <b>asdasdas</b>
  </p>

《7》亲儿子选择器

div>p 选中div下一级的所有p元素

div>p {
      color: red;
    }
<div>
    <p>asdsa</p>
    <header>
      <p>asdas</p>
    </header>
  </div>

《8》相邻兄弟选择器

di'v+p div的第一个兄弟元素，如果时p则被选中,如果不是或者不在第一个则不被选中

 div+p {
      color: red;
    }
 <div></div>
  <p>p</p>  文字颜色为红色
  <p>p</p> 文字颜色为默认颜色

《9》同级兄弟选择器

div~p 选中与div同级的所有p元素

div~p {
      color: red;
    }
 <div></div>
  <p>p</p>  文字颜色为红色
  <p>p</p>  文字颜色为红色

《10》属性选择器

标签[attr] 选中具有属性attr的元素

标签[attr=“value”] 选中具有属性attr并且值为value的元素

标签[attr~=“value”] 选中具有属性attr，属性有多个，其中有一个时value的元素

补充：

标签[attr^='value'] 选中具有属性attr，并且属性值是以value开头的元素

标签[attr$='value'] 选中具有属性attr，并且属性值是以value结尾的元素

标签[attr*='value'] 选中具有属性attr，并且属性值包含value关键词的元素

标签[attr|='value'] 选中具有属性attr，并且属性值是以value或者calue-开头的元素

《11》伪类选择器

一，结构伪类选择器

F:first-child 选中第一个子元素，如果是F则选中

F:last-child 选中最后一个子元素，如果是F则选中

F:nth-child() 选中第n个子元素，如果是F，则选中

数字选中的几个

xn 选中x的倍数规律

2n/even 选中偶数

2n+1/2n-/odd 选中奇数

补充：

F:only-child 选中唯一的一个子元素F

F:root 选中文档的根源素，在html页面中，根源上永远都是html标签

F:empty 选中为空的标签F，F(有空格和换行都不为空 )

二，目标伪类选择器

当E处于锚记目标状态是，被选中

F:target 需要搭配目标使用

三，UI状态伪类选择器（一般用于表单）

F:enabled 选中可用的标签F

F:checked 选中处于选中状态下的标签F

F:disabled 选中不可用的标签F

四，UI状态伪元素选择器

F::selection 选中F标签中处于高亮状态下的内容

五，否定伪类选择器

F:not() 选中除了not()里面条件的F标签(除XX之外)

六，动态伪类选择器

选择器	：
:link	超链接初始状态
:visited	超链接访问后的状态
:hover	元素划过时的状态
:active	元素激活时的状态(或者说点击时)

总结： 1.在修饰a标签的四个状态时，需要保持以下顺序link-visited-hover-active (lvha)驴哈

2.hover和active对其他标签也能生效

八，用户行为选择器 (一般用于表单)

F:focus 用户获取焦点时，选中F

四.CSS核心属性

属性	：
width	宽度
height	高度
font-size	文字大小（px ，em ，rem）最小字体大小为12px，默认16px，没有最大值
font-family	字体类型，字体名称用记得用 " "，多个字体之间用 , 隔开
color	文字颜色 (颜色关键字英文单词，16进制，RGB，RGBA)
background-color	背景颜色 (颜色关键字英文单词，16进制，RGB,RGBA)
font-weight	文字加粗 ( 细体 300，标准粗细 400，加粗 700)
font-style	文字倾斜（oblique 倾斜的文字， normal 取消倾斜）
text-align	文本水平对其方式
line-height	行高，当行高等于元素高度，即可实现文字垂直居中
text-decoration	文本修饰 none:没有修饰，underline:添加下划线，overline:添加上划线，line-through:添加删除线，主要功能取消a标签的下划线 text-decoration：none；
text-indent	文本首行缩进：控制标签内第一行文本进行缩进支持复数
list-style	none清除 li 的默认样式

五.边框 border

《1》复合写法

  border: 1px solid red;
单属性书写
   border-width    边框宽度
   border-style    边框风格
       solid       实线
       dotted      点划线
       double      双线
       dashed      虚线
       none        取消边框
   border-color    边框颜色

《2》单一方向边框

 .box6 {
      width: 100px;
      height: 100px;
      background-color: yellow;
      border-top: 2px solid red;
      border-right: 2px solid red;
      border-bottom: 2px solid red;
      border-left: 2px solid red;
    }

《3》边框的多参数应用 (顺时针分配参数，参数不够复制对面参数)

一个参数四个方向

.box {
  width: 100px;
  height: 100px;
  border: 5px solid pink;
}

两个参数上下，左右

.box {
  width: 100px;
  height: 100px;
  border: 5px 5px solid pink;
}

三个参数上，左右，下

.box {
  width: 100px;
  height: 100px;
  border: 5px 4px 5px solid pink;
}

四个参数上，右，下，左

.box {
  width: 100px;
  height: 100px;
  border: 5px 4px 2px 3px solid blue;
}

六.CSS背景属性

《1》背景基本属性

background-color    背景色
background-image    背景图
     特点：
         1.背景图按照元素大小显示的，元素多大，背景图就占多大位置
         2.背景图默认平铺
         3.同时使用背景图和背景色是，背景图在上，背景色在下
background-repeat    背景图是否平铺  
        no-reprat    不平铺
        repeat       平铺(默认值)
        repeat-x     横向平铺
        repeat-y     纵向平铺
background-paostion  背景图定位
        backgeound-paostion: x y;
注意：背景图定位移动的是图片的位置不是盒子的位置
第一个参数    控制水平位置   正数向右，负数向左
第二个参数    控制垂直位置   正数向下，负数向上
background-size      背景图大小
         background-size：wdith height；
第一个参数是背景图宽度，第二个参数是背景图高度 
如果只写一个参数默认为宽度，高度等比例缩放 
参数还可以是百分比，占据盒子的百分比
还可以是关键词
   cover      等比例缩放   图片容易丢失(等元素都铺满，才停止缩放)
   contain    等比例缩放   图片容易留白(等元素一个边铺满，就停止缩放)
background-attachment(额塔尺梅特)    背景图固定
              scroll     背景图滚动(默认值)
              fixed      背景图固定
当元素设置了背景图定位后，背景图参照物变成浏览器窗口
                      background-size 的参照物就变成了浏览器窗口
背景图复写形式：  
   background: 背景色(可以省略) 背景图片(可以省略) 背景是否平铺 背景图位置/背景图大小 背景图固定(可以省略)
   background：red ulr(路径) no-repeat center center/cover fixed;

《2》背景图的多背景使用

背景色在下层，背景图在上层。
写多个背景图时注意先写的会在后写的上层

七.浮动 float

功能：让元素标签能够横向排列。

left 左浮动

right 右浮动

特点：

同级元素要浮动都浮动，要不浮动都不浮动。
浮动元素，在父元素中放不下的时候会换行。
在使用浮动是记得给父元素和子元素规定宽高
行内元素浮动之后也可以加宽高

八.盒子模型

《1》padding 内间距：

说明：用来确定内容或子元素到达边界之间的距离

作用：给父元素添加padding，来调整内容和子元素之间的位置(为了保证总体大小不变，需要在父元素上减去对应的padding值)

padding单一写法：

padding-top：10px；

padding-right：10px；

padding-buttom：10px；

padding-left：10px；

《2》margin 外间距

说明：用来确认两个元素之间的距离

注意事项： margin 上下会重叠左右会相加

父元素下面的第一个子元素加 margin-top，这个 margin-top父元素也会生效

解决方法：：(1) 给父元素添加 overflow: hidden;

(2) 给父元素改为 padding-top 解决，记得父元素高度减去padding-top 值

补充：margin控制元素水平剧中

给元素添加宽度
给元素写 margin：0 auto；

margin单一写法：

margin-top：10px；

margin-left：10px；

margin-buttom：10px；

margin-right：10px；

《3》怪异盒子模型 box-sizing

《1》 border-box

padding和border算在width之内，因此不会改变盒子大小。

《2》content-box

常规盒子模型

《4》弹性盒

1，概念：

在弹性布局中有两条轴，一条默认水平的主轴，一条永远垂直于主轴的侧轴。

弹性盒中的子元素，叫做弹性元素，弹性元素默认沿着主轴排列。

2，补充：

元素变成弹性盒后，元素类型默认转为块元素，并且里面弹性元素的元素类型也转换为块元素。

3，弹性盒中的父类属性：（写给父元素的）

《1》display：flex；将元素变成弹性盒

注意弹性盒里面的子元素自动转换成弹性元素

《2》justify-content 弹性元素沿着主轴的排列方式

flex-start 默认，顶端对齐

flex-end 末端对齐

center 居中对齐

space-between 两端对齐，中间自动分配

space-around 自动分配距离

《1》改变主轴方向 flex-direction

row 主轴横向排列（默认值）

row-reverse 主轴横向反转排列

column 主轴纵向排列

column-reverse 主轴纵向反转排列

《2》单行侧轴对其方式 align-items

flex-start 沿着侧轴开始对其

flex-end 沿着侧轴结束对其

center 沿着侧轴中间对其

注意：

如果弹性盒换行了，align-items是控制换行后，每一行里面的弹性元素的侧轴对其方式

《3》弹性盒是否换行 flex-wrap

nowrap 不换行 (默认值)

wrap 换行

wrap-reverse 换行并反转

注意：

弹性元素默认在弹性盒中不换行，也不会超出，而是挤压自己的大小

《4》侧轴整体对其方式 align-content (必须搭配flex-wrap,且值不是nowrapo)

flex-start 多条侧轴开始对其

flex-end 多条侧轴结束对其

center 多条侧轴居中对其

space-between 多条侧轴整体两端对其

space-around 多条侧轴整体环绕分布

4，弹性盒中的子类属性(写给子元素的/弹性元素)

《1》align-self 控制单个元素在侧轴上的对其方式

flex-start 沿着侧轴开始对其

flex-end 沿着侧轴结束对其

center 沿着侧轴中间对其

《2》order 弹性元素的排列顺序

默认值为0，越大越靠后，越小越靠前，支持负数，如果值相同就按照html书写顺序排列。

《3》 flex 弹性元素的弹性特性(复写形式)

flex-grow 弹性元素是否放大

1 放大

0 不放大（默认值)

flex-shrink 弹性元素是否缩小

1 缩小（默认值）

0 不缩小

flex-basis 弹性元素项目长度

auto 按照书写的元素大小显示

总结：

格式： flex：flex-grow flex-shrink flex-basis;

默认值： flex：0 1 auto；空间多余我不放大，空间不够我缩小

缩写： flex：1； flex：1 1 0；优先放大，优先缩小

flex：auto； flex：1 1 auto；优先放大，一起缩小

flex：none； flex：0 0 auto；空间不够不缩小，空间够也不放大

5，多列

《1》column（卡类目）-count 将元素分为几列

补充：多列中的子盒子可能会折列显示，break-inside：avoid；可以禁止折列

《2》禁止多列折列显示 break-inside

break-inside：avoid；

《3》列间距 column-gap

column-gap:10px;

《4》列分割线 column-rule

column-rule 用法参考边框

《5》列高度是否统一（内容分配）column-fill

auto 高度不统一，优先填充第一列，第一列满了在填充后续列

balance 高度统一，内容平均分配（默认值）

《6》column-span 是否跨列（写给子元素）

all 跨列

none 不跨列(默认值)

《7》column-width 列宽

和column-count 一般不同时使用，如果同时使用，谁分的宽度大谁优先生效

九.文本溢出

《1》溢出属性 overflow

属性	：
visible(为z波)	内容溢出不隐藏（默认值）
hidden	内容溢出隐藏
scroll（s阔肉）	出现滚动条 (无论内容多少都出)
auto	自动，根据内容多少判断是否出现滚动条
overflow-x	x轴溢出属性
overflow-y	y轴溢出属性

《2》剩余空间 white-space(s培s)

属性	：
normal	自动换行，既不识别手动换行也不识别空格(默认值)
nowrap	强制一行显示
pre	不会自动换行，识别空格和手动换行
per-wrap	自动换行，识别空格和手动换行
per-line(赖)	自动换行，不识别空格但是识别手动换行

《3》是否显示省略号 text-overflow

属性	：
clip	默认值，不显示省略号(...)
ellipsis（啊雷普sis）	显示省略号

注意：text-overflow 单独使用没有效果

《4》单行文本溢出显示省略号步骤：

width 设置宽度。
white-space: nowrap；强制一行显示。
overflow: hidden; 溢出隐藏。
text-overflow: ellipsis；如果内容有隐藏就用省略号告知用户。

十，CSS元素类型

1：元素类型分类：根据CSS显示分类可以分为三类类型：

块元素： block

1.独占一行显示,不给宽度时默认100%

2.可以设置宽高

3.可以做为元素的盒子（块元素，行内元素，行内块元素）

4.p标签里面不能套块元素，可以套行内元素和行内块元素

《1》行内元素：inline

默认不独占一行，横向显示
给宽高无效，实际大小由内容区域撑开
行内元素可以定义padding,border,margin等属性，padding,border,margin上下的值没有实际布局功能;只有视觉效果

《2》行内块元素：inline-block

常见的行内块元素有 img input video audio等
行内块元素即可以设置宽高也不独占一行，横向显示
一般都具有默认大小

2：元素类型转换 display 属性

inline 行内元素
block 块级元素
inline-block 行内块元素
none 隐藏元素当不为none时元素就显示我们不能划过自身让自身消失
flex 弹性盒子
grid 网格布局
元素类型的隐式转换：

有的属性在使用时，可以将元素偷偷的转换成块级元素，这样的属性包括

float 浮动

position 定位

flex 弹性布局

grid 网格布局

十一，伪类选择器

《1》:hover 鼠标划过触发

用法选择器:hover {}

.box:hover p {} 鼠标划过.box盒子的时候p标签要发生的样式

.box p:hover {} 鼠标划过p标签时p标签要发生的样式

十二，行内块元素的应用

《1》行内快元素对其方式默认时不统一的，我们可以通过vertical—align属性来调整

《2》vertical-align== ：

仅对行内块元素生效(多用于调整行内块元素的对其方式)

属性	：
top	顶部对齐
middle	中线对齐
baseline	基线对齐
bottom	底部对齐

《3》可以解决那些问题？

解决行内元素和文字之间的对其问题
解决图片基于父元素中线对其问题
3像素间距问题

行内块元素和块元素之间存在3像素的间距

解决方法： display：block；

vertical-align：top bottom；

十三，置换元素（了解）

《1》置换元素大多数都是行内块元素。

《2》除置换元素之后都是非置换元素。

十四，定位 position

属性值	：
static(斯太提可)	默认值
absolute (阿布斯露特)	绝对定位
relative(r了提悟)	相对定位
sticky(斯特可)	黏性定位
fixed	固定定位

《1》偏移量：

只对有定位的元素生效，对没有定位的元素无效。

概念：控制定位元素如何进行位移的：正数向元素内走，复数向元素外走

top：

right：

left：

bottom：

left和right 同时用，left优先生效

top和bottom 同时用，top优先生效

《2》定位属性的层叠性 z-index

层叠性的显示规则：

添加定位的元素会覆盖没添加定位的元素(添加 static 属性值的不算)
如果都添加定位，html结构后写的盖着先写的。
z-index 属性可以改变定位的层叠关系，z-index 越大，层级越高
z-index 只对添加定位的元素生效

《3》定位属性值：

static：默认值，无特殊定位，对象遵循HTML原则；

relative：相对定位：

相对自身原本的位置进行定位，不脱离文档流还占据原来的位置。

absolute：绝对定位：

1，定位的参照物为包含快，如果父元素是包含块就针对父元素定位，如果父元素不是包含块，就一层一层往上寻找，直到找到body为止

2，完全脱离文档流，不占据原本的位置

3，具体参考偏移量进行偏移

fixed：固定定位：

1，参考物为浏览器可视窗口

2，完全脱离文档流

sticky：粘性定位：

1，参考物为距离自己的具有滚动条的元素

2，不脱离文档流

《4》定位元素的一些应用

1，position 取值为absolute和fixed时，可以将元素转换为块元素

总结：脱离文档流的元素，基本都会将元素转换成块元素

2，元素在父元素中水平垂直居中

方法一：

1，给大盒子写一个position：relative；

2，给小盒子写

position：absolute；

left：50%

top：50%

margin-top：负的小盒子高度的一半；

margin-left：负的小盒子宽度的一半；

方法二：

1，给大盒子写一个position：relative；

2，给小盒子写

position：absolute；

top：0；

left：0；

right：0

bottom：0；

margin：auto;

3，元素在页面中永远水平垂直居中

方法一:

1，给小盒子写

position：fixed；

left：50%

top：50%

margin-top：负的盒子高度的一半；

margin-left：负的盒子宽度的一半；

方法二：

1，给小盒子写

position：fixed；

top：0；

left：0；

right：0；

bottom：0；

margin：auto;

《5》元素透明 opacity (哦拍死提)

作用：让元素整体变得透明，包括里面的子元素和内容。

opacity 取值范围 0——1直接，0 时完全透明，1时完全不透明

十五，表格

《1》作用：

展示信息，多用于后台管理系统

《2》格式和组成

<table>       表格
  <tr>        行
    <td></td> 单元格(竖向的单元格构成列)
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

《3》表格的CSS属性：

border-spacing (写在table) 单元格外间距(当值为0时可以合并外间距)、

border-collapse (扣来普斯)：collapse；(table)

collapse 合并单元格边框

separate(默认值) 不合并单元格边框

作用：可以解决border-spacing合并边框线时，无法完全合并的问题

empty-cells(table) 空白单元格是否显示

hide 隐藏

show(默认值) 显示

《4》表格的特点：

表格会根据单元格里的内容自动分配空间，保证了每个单元格的内容不会溢出；

当某些行或者列没有内容时，单元格会变的非常小很难看，建议使用table-layout：fixed；分配。高度通过给td添加高度分配。

《5》合并单元格

1，合并行竖向合并 rowspan

合并方法：

从那个单元格(td)开始合并，就给谁加 rowspan，和合并几行

2，合并列横向合并 colspan

合并方法：

从那个单元格(td)开始合并，就给谁加 colspan，和合并几列

《6》table表格标签

1，caption 表格标题(想要写在table里边)

2，表格行分组

表头 th一般用在表头里

表体(表体在表格中时必读存在的)

表尾

3，表格列分组

(写在table里面)span=几就是几列)

十六，自适应

《1》自适应概念

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适。

《2》宽度自适应，

不写宽度让元素的宽度随着浏览器的大小改变而改变

默认值 width：auto；

《3》高度自适应：

不写高度，高度由子元素撑开，随着子元素的多少，自动调整。(好处是不会溢出)

默认值 height：auto;

《4》浮动元素的宽度自适应，

块元素如果不写宽度默认独占一行，但是浮动有宽度由内容撑开。

《5》浮动元素的高度自适应，

高度塌陷，如果父元素不写高度，子元素添加浮动，会造成高度塌陷。

解决：

《1》给父元素添加高度，(父元素就不自适应了)

《2》给父元素添加overflow：hidden；(当我们需要元素超出盒子范围时，使用此属性不合适)

《3》在父元素后面添加一个子元素，使用clear：both；解决高度塌陷。(页面中多了很多空标签，影响页面结构)

《4》万能清除浮动法。

塌陷元素：：after{

content：" "；

display：block；

height：0；

overflow：hidden；

clear：both；

}

总结：能用overflow：hidden;解决就用它解决，如果不能再用万能浮动法。

《6》BFC：块级格式化上下文

作用：有些属性可以出发BFC，为自身创建一个作用域模块，以用来解决

margin-top穿透问题，高度塌陷问题

float：left/right；

position：absplute/fixed；

弹性盒

inline-block

《7》clear 清除浮动影响

clear：both

《8》伪元素选择器

伪类选择器

：hover {

}

伪元素选择器

选择器：：after{ 在XXX之后(需要搭配content使用)

content： “ ”；

}

选择器：：before{ 在XXX之前(需要搭配content使用)

content： “ ”；

}

选择器：：first-line{ 选中XX 的第一行

}

选择器：：before{ 选中XXX的第一个字符

}

《9》万能清除浮动法。

塌陷元素：：after{

content：" "；

display：block；

height：0；

overflow：hidden；

clear：both；

}

区别：伪类选择器是单冒号，伪元素选择器是双冒行

十七，元素隐藏，显示，透明

《1》元素隐藏：

1，opacity:0; 元素透明，元素没有消失

2，display:none; 元素隐藏

3，height：0px；高度为0

overflow：hidden；溢出隐藏

4，visibility :visible(显示)/hidden(隐藏) 消失后还占据完本的空间

5，transform：scale（0）；元素缩放，缩放到元素的0倍

《2》元素透明：

1，opacity 元素透明 0-1 0透明——1不透明

2，transparent 透明色

3，rgba(0-255，0-255，0-255，0-1) 透明色，前三位代表红，绿，蓝，a代表透明度（0-1）

十八，最小最大宽高

max-width 最大宽度

min-width 最小宽度

max-height 最大高度

min-height 最小高度

总结：

不写宽高时

宽度按照最大宽度或者实际宽度显示(浏览器窗口小于最大宽度时)

高度按照内容高度去显示，如果没有内容就按照最小值显示，如果由内容就显示内容高度

十九，iframe 页面嵌套（现在基本不用）

作用：iframe 是用来再网页中插入第三方页面，可以把一些网站的公共部分摘离出来，通过iframe按需引入即可

二十，满屏布局

1，高度满屏：元素宽度写100%继承body的宽度，但是body的高度为0所以元素继承的高度也是0，因此需要写html,body,{height:100%}

2，calc计算函数

作用：动态计算宽度和高度

二十一，五大浏览器

1，IE浏览器

2，火狐浏览器

3，谷歌浏览器

4，苹果浏览器

5，欧鹏浏览器

拓展：市面上的一款浏览器叫做网景浏览器，又叫网景领航者

二十二，HTML5

《1》HTML5语法

DOCTYPE声明

不区分大小写

指定字符集编码

meta charset="UTF-8"
可省略标记的元素不允许写结束标记的元素：br、col、embed、hr、img，input、、link、meta
可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部标记的元素：html、head、body、colgroup、tbody
省略引号属性值可以使用双引号，也可以使用单引号。

html5特点：

相较于之前更新了很多的内容，而且语法相较于之前更加的灵活，而且兼容性和包容性更好，语法没有之前那么严格。

《2》HTML5新增（语义化）标签

1，header 头部标签

2，main 主体模块

3，footer 脚步区域

4，nav 导航栏

5，section 模块

6，article 与上下文不管的独立模块，文章

7，aside 搭配article使用，对article内的内容做解释，写在article外

8，figure 表示独立的流内容，figcaption 元素作为他的标题，一般放在内部的第一个或者最后一个

总结：对于浏览器搜索引擎和渲染引擎更加的友好，搜素排名比重更高

《3》视频和音频标签

video 视频

元素类型：行内块元素

属性：

src 视频路径

controls 控制台

muted 静音

autoplay 自动播放要搭配 muted 静音使用

loop 循环播放

poster 视频未播放时的加载封面

audio 音频

元素类型：行内块元素

属性：

src 音频路径

controls 控制台不加控制台啥都看不到

autoplay 自动播放看浏览器，浏览器支持就行

muted 静音

loop 循环播放

补充：视频和音频有很多种格式，一些老版本的浏览器对于所有格式并不是都支持，我们可以做兼容

格式如下：
```
<video controls>
      <source src="..Apublic/3theA.mp4">
      <source src="../ public/ 3theA.ogg">
      <source src="../public/ 3theA.webm">
</video>
```

二十三，自定义字体

作用：有些字体类型是用户电脑上没有的，为了能够让他生效，我们需要将字体文件引入页面中，并进行命名使用，具体如下：

@font-face{

font-family:"自定义字体名"；

src:url(文字存放路径)；

}

xx{font-family:"自定义字体名"}

二十四，阴影 shadow（啥都）

《1》文字阴影

text-shadow：0px 0px 0px rgb；

参数格式：text-shadow：文字阴影水平偏移文字阴影垂直偏移文字阴影模糊距离文字阴影的颜色；

参数1：文字阴影水平偏移正右，负左

参数2：文字阴影垂直偏移正下，负上

参数3：文字阴影模糊距离数字越大越模糊，不支持负数

参数4：阴影颜色

多重阴影写法：

text-shadow：阴影1，阴影2，....；

先写的会覆盖后写的

《2》盒子阴影

box-shadow：0px 0px 0px 0px rgb inset；

阴影水平偏移阴影垂直偏移阴影模糊距离阴影大小阴影的颜色内外阴影；

阴影大小和内外阴影可以省略

参数1：阴影水平偏移正右，复左

参数2：阴影垂直偏移正下，复上

参数3：阴影模糊距离数字越大越模糊，不支持负数

参数4：阴影大小（可以省略）默认为0 大于0放大，小于0缩小

参数5：阴影颜色

参数6：内外阴影（可以省略）默认为外阴影，内阴影徐设置inset

多重阴影写法：

text-shadow：阴影1，阴影2，....；

先写的会覆盖后写的

二十五，边框圆角

border-radius

格式：

border-radius：圆角X轴距离/圆角Y轴距离

如果x轴距离和y轴距离一致可以进行简写 border-radius：xx;

正方形写50%为圆形，长方形写50%是椭圆形，宽高一半是胶囊型

四个角不同边框圆角的写法：

两个数值的时候时参数1：左上右下，参数2：右上左下

三个数值的时候时参数1：左上参数2，右上左下，参数3：右下

四个数值的时候时参数1：左上，参数2：右上，参数3：右下，参数4：左下

二十六，渐变

概念：渐变可以让你在两个或多个颜色直接显示平稳的渐变。

开发实现方法：

CSS3渐变属性实现（放大时显示效果更好）

背景图实现

《1》线性渐变 linear-gradient（个瑞顶特）

概念；从一个方向向另一个方向的颜色渐变

格式： background-image:linear-gradient(渐变方向，渐变初始颜色，....，渐变结束颜色)；

特点和使用：

渐变的默认方向为自上而下

第一个参数为渐变方向，此参数可以省略，省略时采用默认方向，也可以如下设置。

朝着某个方向渐变 linear-gradient(to left,red,blue) ;
朝着某个角落渐变 linear-gradient(to left bottom,red,blue) ;
朝着某个角度渐变 linear-gradient(30deg,red,blue) ;
渐变颜色至少有两种，至多不限

《2》经向渐变 radial-gradient

格式： background-image:radial-gradient(渐变起始点，渐变形状，渐变大小，渐变初始颜色，....，渐变结束颜色)；

概念：经向渐变是从一个点向四周的颜色渐变。

使用：

一般我们很少去调整前三个参数，如果不需要调整我们可以进行省略，如果需要调整，最好加上浏览器前缀。
第一个参数为渐变的起始点，第一参数可以写两个数字，第一个数值为X轴坐标，第二个数值为Y轴坐标。
第二个参数为渐变的形状，默认为椭圆形（ellipse）可以通过circle设置为圆形。
第三个参数为渐变大小，支持以下数值。

closest-side(可咯瑟斯特) 最近边

farthest-side 最远边

closest-corner(法吹斯特) 最近角

farthest-corner 最远角

《3》非规律渐变

非规律线性渐变

background: linear-gradient(#cc99ff 30%, #cc66ff 60%, #cc33ff 70%);；

非规律经向渐变

background: radial-gradient(#cc99ff 30%, #cc66ff 60%, #cc33ff 70%);；

总结：我们可以在颜色后边跟上颜色出现的位置

《4》重复渐变 repeating-（瑞皮停）

重复线性渐变

background: repeating-linear-gradient(#cc99ff 0%, #cc66ff 20%, #cc33ff 40%);；

重复经向渐变

background: repeating-radial-gradient(#cc99ff 0%, #cc66ff 20%, #cc33ff 40%);；

二十七，浏览器前缀

概念：某些CSS属性还只是最新版的预览版，部分浏览器已经为这些属性提供了支持，这些自行扩展的CSS属性为了让:这些浏览器识别这些专属属性，CSS规范允许在CSS属性前增加各自的浏览器前缀。

IE -ms-

google -webkit-

opera -o-

firefox -moz-

safari -webkit-

二十八，CSS3过渡 transition

《1》概念：

transition 允许CSS的属性在一定时间区间内平滑的过渡，但是我们需要一个触发条件。

《2》格式：

transition ，transition -property(过渡对象) transition-duration(持续时间) transition-timing-function(过渡动画) transition-delay(延迟时间)；

《3》案例：

transition :all 1s linear 0s;

各个参数：

参数1 参与过渡对象/属性 all所有

参数2 过渡时间

参数3 过渡速率

linear 匀速

ease（1字）逐渐慢下来

ease-in 加速

ease-out 减速

ease-in-out 先加速再减速

steps( ) 分步骤

cubic-bezier() 贝塞尔曲线

参数4 延迟时间如果不需要延迟可以省略

《4》注意事项：

谁用给谁加
我们把过渡加给触发后的代码，触发时有过度效果，停止触发后则没有过渡效果，如果需要触发前和触发后都有过渡效果，我们应将过渡加给初始状态。
一般过渡可以对数值变化生效，如果属性值是两单词，过度则无法生效
过渡会对同一属性的不同数值型生效。

二十九，2D效果 - transform

属性	：
translate	位移
scale（sko）	缩放
rotate	旋转
skew	倾斜
transform-origin（o人机）	转换原点

《1》2D位移 translate

translate （使用起来和relative写运动差不多）

格式：

transform：translate（x，y）；

特点：

《1》参数1控制水平位移，正右负左

《2》参数2控制垂直位移，正下负上

《3》位移后不会影响页面布局

《4》支持 transform: translateX（x）和 transfoetranslateY（y）；

《5》如果只写一个数值，默认为第一个参数，第二个参数默认为0

《2》2D缩放 scale

scale（）

格式：

transform；scalex，y）；

特点：

《1》参数1控制宽度的缩放，参数2控制高度的缩放，默认值为scale（1,1）

《2》参数>1放大,0<参数<1缩小，参数=0消失，参数<0，先缩小后反转放大。

《3》支持 transform:scaleX(x) 和 transform:scaleY(y)；

《4》默认从中心向四周缩放

《5》如果只写一个数值，默认为宽高共同的缩放倍数

《3》2D旋转 rotate

rotate（）

格式：

transform； rotate（）；

特点：

《1》 rotatex（）元素绕着x轴旋转， rotatey（）元素绕着y轴旋转， rotate（）元素绕着中心旋转。

《2》（）内只写一个参数，单位为deg，旋转度数，支持负数

《4》2D倾斜 skew

skew（）

格式：

transform； skew（xdeg，ydeg）；

特点：

《1》第一个参数为x倾斜度数，第二个参数是y轴倾斜度数，两个参数支持负数。

《2》支持 skewX（）和 skewY（）。

《3》如果只写一个值，默认为第一个参数，第二个参数为0。

《5》2D转换原点 transform-origin

格式：

transform-origin：（left top）；

作用：

可以改变2D效果的默认参考点。

注意：

2D转换原点可以设置在元素外边。

《6》transform 的多效果使用

transform：rotate() translate();

如果我们需要同时使用多个2d效果，可以在transform后面直接写多个2d属性值。

注意：

先旋转再位移和先位移再旋转的效果完全不同，但是最终的位置是相同的。

三十，CSS3D效果

概念：

《1》3D属性

3D位移：

transform:translate3d(x,y,z)；

transform:translateZ(z)；

3D旋转：

transform：rotade3d(矢量，矢量，矢量，旋转角度)；矢量0不转1转

transform：rotadeZ(xxdeg)；

3D缩放：

transform：scale3d(x,y,z);

transform：scaleZ(z);

3D缩放注意：

3d的z轴缩放，单独给子元素使用无效，一般我们把3d缩放加给父元素

《2》景深（视觉3D效果）-perspective

概念：

物体离我们较远时，看这个物体就比较小，当物体不断靠近我们时，看这个物体会越来越大，这个就叫近大远小也叫景深，页面时一个平面，可以个元素添加景深，来使页面具有近大远小的效果。

使用：

perspective: 1200px;（在父元素中使用，较为常用）

transform:perspective(1200px) （在子元素中使用）

注意：

进过大量测试，景深在900-1200之间，效果最佳，但不绝对

补充：

perspective-origin 设置景深观察点，默认值在正中间(center

,center)

《3》3D空间-transform-style

属性值：

flat 志愿书在里面按照平面显示

preserve-3d 子元素在里面按照3d空间显示

三十一，CSS3动画属性-animation

《1》animation和transition的区别

相同点：

都可以随着时间改变元素的属性值

不同点：

1， animation 不需要触发条件，transition需要条件才能触发

2， animation 可以一直触发，transition触发一次执行一次