css笔记

CSS选择器

1. 标签选择器
2. 类选择器 .类名
3. id选择器 #id
4. 通配符选择器 *

CSS样式

1. font-family 设置字体
2. font-size 设置字体大小
3. font-weight 设置字体粗细
4. font-style 设置文字样式 比如不倾斜
5. font 设置属性（简化）

6. color 定义文本颜色
7. text-align 水平文本对齐
8. text-decoration 文本装饰（如取消下划线）
9. text-indent 文本缩进
10. line-height 行间距

CSS样式引入

1. 内部样式引入 上面写style标签
2. 行内样式引入 行内写style属性
3. 外部样式引入 link标签引入

CSS复合选择器

1. emmet语法生成html

   1. 生成多个相同标签 *数量
   2. 父子级关系 ul > li
   3. 兄弟关系 div + p 并行
   4. div.class 生成带有类名的 div#id 生成带有id的
   5. #demo$*5 自增生成5个带有序号的div
   6. div{ 填写内容 }（鸡肋啊）

2. emmet语法生成css

   缩写 lh 行高 w宽 h高

3. 复合选择器

   1. 后代选择器

      ul li { } 选择ul里的所有的li标签元素

   2. 子元素选择器

      只选择子类型 .nav > a

   3. 并集选择器

      ul, div { } 两者都选择上 （竖着写）

   4. 链接伪类选择器

      a:link /* 选择所有未被访问的链接 */

      a:visited /* 访问过得链接 */

      a:hover /* 鼠标指针位于上方 */

      a:avtive /* 选择活动链接（鼠标按下未弹起） */

   5. a 需要单独指定样式。

   6. :focus 伪类选择器

      光标获取时获取相应样式。

   总结：

CSS元素显示模式

1. 块元素

   1. 常见的块级元素

      h1 , p , div , ul , ol , li div为典型块级元素

   2. 块级元素特点

   3. 独占一行。

   4. 高度、宽度、外边距以及内边距可以控制。

   5. 宽度默认是容器的100%。

   6. 是一个容器及盒子，里面可以放行内或块元素。

   7. 文字类的元素内不能使用块级元素

      如p标签不能放div h1 等也不能放

2. 行内元素

   1. 常见行内元素

      a、strong、b、em、i、del、s、ins、u、span 等，其中span最为典型

   2. 行内元素特点

      1. 一行上可以显示多个
      2. 高、宽设置无效
      3. 默认宽度是内容宽度
      4. 行内元素只能容纳文本或其他元素

   3. 链接里面不能再放链接

      a里面可以放块级元素，但将a转成块级元素最安全

3. 行内块元素

   1. 常见行内块元素

      img、input、td等，同时拥有行内元素与块元素的特点。

   2. 行内块元素的特点

      1. 和相邻行内元素在一行上，但是他们之间有空隙，一行可以显示多个。（行内元素特点）
      2. 默认宽度就是它本身的宽度。（行内元素特点）
      3. 高度，行高，外边距以及内边距都可控制。（块级元素特点）

4. 元素显示模式总结

元素显示模式的转换

1. display: block 行内元素转换为块级元素
2. display: inline 块级元素转换为行内元素
3. display: inline-block 转换为行内块元素

CSS背景

1. background-color 可以设置透明或其他颜色

2. background-image：url (tp.png) 设置背景图片

3. background-repeat：repeat 设置重复平铺

4. background-position：center top 如果两个都是方位名词，则与顺序无关。

   background-position：top 只写一个 另一个默认为居中对齐

   background-position： 20px 50px 设置精确单位 第一个是x轴 第二个是y轴

   background-position： 20px 只写一个则一定是x轴坐标，另一个则为居中对齐

   background-position： 20px center 两个混合使用，则第一个是x，第二个是y

5. background-attachment：scroll | fixed 设置背景滚动或固定

6. 复合写法：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

   示例：background : black url(tp.png) no-repeat fixed center top 没有特定要求，习惯规定

7. background : rgba(0, 0, 0, 0.3) 最后一个参数是alpha 透明度 取值范围 0~1 之间

背景总结

CSS三大特性

1. 层叠性

   从上到下设置相同的标签与样式 取最后设置的

2. 继承性

   可以简化代码，子元素可以继承父元素的样式（text-, font-, line- 这些可以继承，以及color属性)。

3. 优先级

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

盒子模型

1. 盒子模型组成

   border 边框 content 内容 padding 内边距 margin 外边距

2. 边框border

   border-width : 5px 边框的粗细 border-style : solid 边框的样式

   简写： border: 1px solid red 没有顺序要求

   border-top 设置上边框 border-bottom 设置下边框

   border-collapse 设置合并相邻边框

   border 会影响盒子实际大小 在原有盒子大小上变大

3. 内边距padding

   padding : 5px 1个值，代表上下左右都有5像素内边距。

   padding : 5px 10px 2个值，代表上下内边距是5像素，左右内边距是10像素

   padding：5px 10px 20px 3个值，代表上5像素，左右10像素，下20像素

   padding : 5px 10px 20px 30px 4个值 ，上右下左 顺时针旋转

   内边距padding会撑大盒子，可以减去padding设置盒子大小

   padding不会撑开盒子的情况：盒子本身没有指定width/height属性，此时不撑开

4. 外边距margin

   margin 简写同 padding

   外边距的应用：

   盒子（块级元素）水平居中：1.盒子必须指定宽度 2.盒子左右外边距设置为auto

   行内元素或行内块元素居中：给父元素添加text-align : center

   外边距合并：

   1.上下两个相邻块元素，其垂直间距是取margin-bottom, margin-top两个值中的较大者。

   2.嵌套块元素垂直外边距塌陷 : 嵌套的元素同时拥有上边距，此时父元素会塌陷较大的外边距。

    ![请添加图片描述](https://img-blog.csdnimg.cn/e1185d50b3024bd289f430d4a4de40ef.png)
   

   清除内外边距：

   使用 * 通配符 将 padding 与 margin 设置为 0

ps的使用以及布局学习

1. ps基本操作

   ps 切图：右键导出 切片切图 cutterman 插件

2. 常见图片格式：

   1. jpg 高清，颜色多，产品类多用jpg格式
   2. gif 可保存透明背景，多用与图片小动画。
   3. png 切成背景透明的图片，选择png
   4. psd ps的专用格式

布局总结

1. 布局为什么不是只用div？

   标签有语义，如标题用h，大量文字用p等等。。

2. 去掉 li 前面的项目符号，小圆点：list-style : none

3. 圆角边框：border-radius 四个值的时候 顺时针 左上到左下的顺序。

4. 盒子阴影 box-shadow ：h-shadow 水平阴影位置 v-shadow 垂直阴影位置

5. text-shadow 设置文字阴影 跟上面那个差不多。

浮动

1. 传统布局的三种方式：标准流、浮动、定位

   1. 标准流：

      当使用块级元素，div、hr、p、h1~h6、ul、ol等等，独占一行

      行内元素按照顺序，从左到右依次排列，碰到父元素边缘会换行 span、a、i

   2. 浮动布局：

      浮动能完成标准流无法完成的，改变了默认排序方式。典型应用：多个块级元素一行内显示。

      多个块级元素纵向排列用标准流，横向排列用浮动

      浮动会贴着另一个浮动框的边缘

      浮动的特性：

      1. 浮动会脱离标准流（脱标）
      2. 浮动的盒子不再保留原有位置。
      3. 浮动元素一行显示，宽度不够另起一行
      4. 浮动元素具有行内块元素特点（不指定宽度的话，默认是根据内容变化宽度）

      先用标准流的父元素排列上下位置，之后使用子元素浮动来排列左右位置，符合网页布局第一准则。

常见网页布局

清除浮动

1. 为什么需要清除浮动：

   父盒子不给高度，子元素浮动的话撑不起父盒子，影响下面标准流的摆放。

2. 清除浮动后父级盒子会自动检测子盒子的高度，父级有了高度就不会影响后面的标准流。

3. 清除浮动的方法：

   1. 额外标签法：在浮动元素末尾添加一个空标签 其中style属性 clear:both

   2. 父级添加overflow：hidden、auto、scroll 缺点：无法显示溢出部分。

   3. after伪元素：类似额外标签法 优点：没有增加标签

      .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
          }
      .clearfix {
            *zoom: 1;
      }
      

   4. 双伪元素：

      .clearbox:before,
      .clearbox:after {
            content: "";
            display: table;
      }
      .clearbox:after {
            clear: both;
      }
      .clearbox {
            *zoom: 1;
      }
      

学成在线练习

1. css属性顺序：

   布局定位属性：display / position / float / clear / visibility / overflow

   自身属性：width / height / margin / padding / border / background

   文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word

   其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow

2. 页面布局思路

   1. 确定版心（可视区）
   2. 分析行模块，以及其中的列模块
   3. 列模块的浮动布局，确定其大小，位置

3. 头部制作：

   用 li + a 做导航栏

4. banner 制作：

   盒子里套盒子时，给宽不给高是不行的（重要）

   浮动的盒子不会有外边距合并的问题

   当 li 的盒子在 ul 中放不下的时候，可以加宽 ul 的宽度。

学成在线项目的练习

dl dt dd 标签的使用：定义一个带层级的列表 dl是定义列表 dt 是标题 dd 是数据

css的定位

定位 = 定位模式 + 边偏移

定位模式：

1. 静态定位 static 默认定位方式，无定位

2. 相对定位 relative 相对定位方式 ：

   相对原来的位置来移动，原来的标准流位置继续占有，没有脱标，能给绝对定位当爹

   .box1 {
       position: relative;
       top: 100px;
       left: 100px;
       width: 200px;
       height: 200px;
       background-color: pink;
   }
   

3. 绝对定位 absolute

   如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位。如果祖先元素有定位，则以最近一级的有定位的祖先元素为参考点移动位置。

   .box1 {
       position: absolute;
       top: 100px;
       right: 100px;
       width: 200px;
       height: 200px;
       background-color: pink;
   }
   
   .box2 {
       position: relative;
       left: 100px;
       right: 100px;
       width: 500px;
       height: 500px;
       background-color: deeppink;
   }
   

   绝对定位脱标，不占用原来的位置

4. 子绝父相：子级用绝度定位，父级要用相对定位

5. 固定定位：固定于浏览器的某个位置

   position : fixed

   以浏览器可视窗口为参照点移动，不占有原来的位置，可视为特殊的绝对定位。

   固定定位在版心右侧，left取50%，margin-left取版心一半的距离。

6. 粘性定位（了解）

   可认为相对定位与固定定位的混合

   1. 以浏览器的可视窗口为参照点移动元素（固定定位）
   2. 占有原先的位置（相对定位的特点）
   3. 必须添加top、left、right、bottom其中一个才有效

定位叠放的次序 z-index：

使用z-index来控制盒子的前后次序

1. 数值越大越靠上，相同时比先后顺序，没有单位
2. 只有定位的盒子才有 z-index 属性

绝对定位水平、垂直居中：

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    height: 100px;
    width: 100px;
    background-color: pink;
}
.box2 {
    position: relative;
    margin: 0 auto;
    height: 400px;
    width: 400px;
    background-color: skyblue;
}

定位的特性：

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2. 块级元素添加绝对或者固定定位，不给宽高，默认是内容的大小。
3. 脱标的盒子不会触发外边距塌陷
4. 绝对定位会完全压住盒子，但浮动元素有所不同，会压住下面标准流的盒子，但不会压住下面标准流的文字。原先浮动是为了实现文字环绕效果。

元素的显示与隐藏

1. display

   • display ：none 隐藏对象
   • display：block 除了转换为块级元素，还有显示元素的意思

   display 隐藏元素后，不再占有原来的位置

2. visibility

   • visibility：visible 元素可视
   • visibility：hidden 元素隐藏

   visibility 隐藏元素后，继续占有软来的位置

3. overflow

   • scroll 添加滚动条
   • auto 自动根据内容添加滚动条
   • hidden 隐藏溢出的元素

土豆网实例中：可以书写如下css

.tudou:hover .mask {
    visibility: visible;
}
//在外层div上悬浮，指定内部mask样式显示

CSS高级技巧

精灵图技术：获取大图，减少请求发送次数，截取图片展示，适用结构和样式较复杂的图片

字体图标：适用于简单的小图标

• 轻量级：比图片小，马上渲染，减少请求次数
• 灵活性：本质是文字，可以随意改变颜色、阴影、透明效果、旋转等
• 兼容性：几乎支持所有的浏览器

css画三角形：

.box {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top: 20px solid pink;
}

css用户界面样式

1. 鼠标样式：

   cursor：pointer

   属性值	描述
   default	小白 默认
   pointer	小手
   move	移动
   text	文本
   not-allowed	禁止

2. 表单框轮廓线去除与文本域防止拖拽等：

   input {
       outline: none;
   }
   
   textarea {
       outline: none;
       resize: none;
   }
   

3. 行内块以及文字的垂直居中（行内块元素后面跟着文字）

vertical-align 行内元素或行内块元素的垂直居中

值	描述
baseline	默认，元素放置在父元素的基线上
top	与行中最高元素顶端对齐
middle	放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

4. 图片底侧空白缝隙的解决

   1. 给图片添加 vertical-align：middle | top | bottom
   2. 转换为块级元素 display：block

5. 溢出的文本显示省略号：

   /* 单行文本显示省略号 */
   div {
       width: 100px;
       height: 100px;
       background-color: pink;
       margin: 100px auto;
       /* 强制文字一行内显示 */
       white-space: nowrap;
       /* 超出部分隐藏 */
       overflow: hidden;
       /* 显示省略号 */
       text-overflow: ellipsis;
   }
   
   /* 多行文本显示省略号 */
   div {
       width: 100px;
       height: 100px;
       background-color: pink;
       margin: 100px auto;
       overflow: hidden;
       text-overflow: ellipsis;
       /* 弹性伸缩盒子模型展示 */
       display: -webkit-box;
       /* 限制在一个块元素显示的文本的行数 */
       -webkit-line-clamp: 2;
       /* 设置或检索伸缩盒对象的子元素的排列方式 */
       -webkit-box-orient: vertical;
   }
   

6. 利用margin的负值去除边框

   ul li {
       float: left;
       list-style: none;
       width: 100px;
       height: 100px;
       border: 1px solid red;
       margin-left: -1px;
   }
   
   ul li:hover {
       /* 添加相对定位压住标准流以及浮动的盒子 */
       position: relative;
       border: 1px solid blue;
   }
   
   
   /* 都为相对定位时 */
   ul li {
       position: relative;
   }
   /* 添加 z-index 的层级 */
   ul li:hover {
       z-index: 1;
       border: 1px solid blue;
   }
   

7. 文字围绕浮动元素

   利用浮动元素不会压住标准流的文字实现

8. 行内块元素、行内元素可以在div盒子中使用text-align：center实现水平居中，并且自带空隙。

9. 直角三角形绘制：

   /* 利用上边框大小大于右边框大小绘制 */
   .box {
       border-color: transparent red transparent transparent;
       border-style: solid;
       border-width: 100px 50px 0 0;
   }
   

10. css初始化：消除不同浏览器的差异

CSS3 与 H5

CSS3

新增选择器：

1. 属性选择器
2. 结构伪类 选择器
3. 伪元素 选择器

属性选择器：

/* 选择具有 value 属性的元素 */
input[value] {
    color: pink;
}
/* 选择 type = password 的元素 */
input[type=password] {
    color: pink;
}
/* 选择以 icon 为开头的元素 */
div[class^=icon] {
    color: pink;
}
/* 任意位置出现 icon */
div[class*=icon] {
    color: blue;
}

注意：类选择器、属性选择器、伪类选择器，权重为10

/* 标签加属性选择器 11 */
div[class*=icon] {
    color: pink;
}
/* 标签加类名选择器 11 */
div.ficon1 {
    color: blue;
}

结构伪类选择器：

/* 一定要加空格 第一个*/
ul li:first-child {
    color: blue;
}
/* 一定要加空格 最后一个*/
ul li:last-child {
    color: blue;
}
/* 按次序第几个 */
ul li:nth-child(3) {
    background-color: pink;
}

/* 偶数行 */
ol li:nth-child(even) {
    background-color: pink;
}
/* 奇数行 */
ol li:nth-child(odd) {
    background-color: pink;
}
/* 相当于选了所有 只能填n 从0开始自动加1 */
ol li:nth-child(n) {
    background-color: pink;
}
/* 相当于选了所有 偶数行 */
ol li:nth-child(2n) {
    background-color: pink;
}
/* 相当于选了所有 奇数行 */
ol li:nth-child(2n+1) {
    background-color: pink;
}
/* 第五个开始递推 */
ol li:nth-child(n+5) {
    background-color: pink;
}
/* 取前几个 */
ol li:nth-child(-n+3) {
    background-color: pink;
}

伪元素选择器：

可以帮助我们利用CSS创建新的标签元素，而不需要HTML标签，简化HTML的结构

注意：

1. before 和 after 创建一个元素，但是属于行内元素
2. 新创建的元素在文档树中找不到，所以称为伪元素
3. before 和 after 必须具有 content 属性
4. before 在父元素内容前创建，after 在父元素内容后创建
5. 伪元素和标签选择器一样，权重为1

/*  content 必须要有 */
div::before {
    display: inline-block;
    content: '12';
    height: 100px;
    width: 100px;
    background-color: pink;
}
div::after {
    content: '13';
}

// 鼠标悬停之后，选定伪元素
.tudou:hover::before {
    visibility: visible;
}

额外标签法清除浮动的解释：

第二种方式，闭合浮动

CSS3盒子模型：

// 这个样式能保证 border 与 padding 不会撑开盒子
box-sizing: border-box;
// 默认情况
box-sizing: content-box;

// 可以进行计算
.son {
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    background-color: pink;

}
// 模糊样式 数值越大，越模糊
img {
    filter: blur(15px);
}

CSS3过渡（重点）：

transition: 要过渡的属性 花费时间 运动曲线 何时开始

1. 属性：指定属性，高度、颜色、内外边距都可以 想要所有就加all
2. 花费时间：单位是 秒 （必须写单位）
3. 运动曲线：默认是 ease
4. 合适开始：可以设置延迟时间 单位是秒

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 多个属性同时写 谁要过渡给谁加 */
    /* transition: width 1s, height .3s; */
    transition: all .5s;
}
div:hover {
    width: 300px;
    height: 300px;
    background-color: skyblue;

}

广义H5：html5 + css3 + javascript

H5新增

<header></header> 头部标签
<nav></nav>  导航标签
<article></article>  内容标签
<section></section>  定义文档某个区域
<aside></aside>  侧边栏标签
<footer></footer>   尾部标签

视频标签 video

音频标签 audio

谷歌浏览器禁用了自动播放，只能通过js解决

input 新增类型：

<form action="">
    <ul>
        <li>邮箱：<input type="email"></li>
        <li>网址：<input type="url"></li>
        <li>日期：<input type="date"></li>
        <li>时间：<input type="time"></li>
        <li>数量：<input type="number"></li>
        <li>手机号码：<input type="tel"></li>
        <li>搜索：<input type="search"></li>
        <li>颜色：<input type="color"></li>
        <li><input type="submit" value="提交"></li>
    </ul>
</form>

新增属性：

autocomplete 要添加name并提交成功

CSS 里的2D转换 transform

移动 translate

/* translate(X, Y)  只写一个值就是x */
transform: translate(-5px, 5px);
/* x轴方向移动 */
transform: translateX(-5px);
/* y轴方向移动 */
transform: translateY(5px);

重点：

1. translate 中的百分比是指相对于自身元素的translate
2. 对行内标签没有效果

利用translate 与 定位来居中:

.box_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background-color: skyblue;
    transform: translate(-50%, -50%);
}

确定旋转中心点：

/* 可以跟方位名词或像素单位，谁需要旋转给谁加 */
transform-origin: left bottom;
transform-origin: X Y;
/* 也可以进行缩放中心点的设置 */

缩放相关

/* 缩放不会影响其他盒子的展示 */
/* 两个值 第一个是宽 第二个是高 */
transform: scale(2, 1);
/* 单个值 宽高都缩放 里面写缩放倍数 */
transform: scale(2);

综合写法

/* 按照这个顺序写最好，如果先旋转 移动的时候参考的坐标轴会变 */
transform: translate(100px, 100px) rotate(180deg) scale(1.2);

动画

/* 动画关键帧 可以设置多帧 */
@keyframes move {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(1000px);
    }
}

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 调用动画 并设定持续时间 */
    animation-name: move;
    animation-duration: 1s;
}

简写形式

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态

/* 0s 要带单位，不想写的可以不写，顺序可以打乱，只是按规范 */
animation: move 3s ease 0s infinite normal forwards;

步长属性

/* steps() */
div {
    width: 60px;
    height: 60px;
    background-color: pink;
    /* 分步展示动画 */
    animation: w 1s steps(5) forwards;
}