css笔记

浏览器内核

• chrome（blink）
• firefox(gecko)
• ie（trident)
• oprea(bink)
• safari(webkit)

html标签

ul(ol)

<ul  type=''>
    <li></li>
</ul>

• 下面只能放li 去掉圆点样式 -> list-style-type:none
• type属性 可以改变列表样式

img

<img src=''  width='' height='' title='' alt='' >

• width height(这两个一般用于seo)
• alt 图片加载失败的提示
• title 鼠标移上的文字提示
• src 引用图片路径

a标签

<a  href='https://wwww.baidu.com title=''></a>

• 没有href属性的时候跟span效果一样 加上href之后就成为超链接
• href属性如果没有属性值 那么就是刷新页面
• 如果有必须要带http协议 不然就会当本地文档路径访问
• 属性 target=-blank 在新标签页打开网页 然后就是锚点的运用 也有title也有title属性

h1 - h6

• 划分一块区域 里面的文字会文字变大 对比div有seo文字权重

<h1></h1>

span

• 划分一块区域包裹内容 不使用css没有任何影响
• 行内元素 只能用font-size撑开盒子大小

<span></span>

form

• 用作存放表单组件的一个单子 相当于一个盒子 存放的都是组件(input标签) 可以通过组件输入数据并将数据提交往后台
• 数据是以键值对的形式传输到后台
  • 键代表的是 input等组件的name
  • 而value是组件的value
• get 方式 参数会被通过url带参数传入后台 post 会讲数据放在请求头里面

<form action=''  method='' target=''/>

input

• input的是文本输入框
  • 作为form标签的组件
  • type决定input是什么类型
  • name类似于id
  • value可以改变input的内容

<input  type='' name='' value=''>

input 的 type类型

• password
  • 密码类型 输入的数字会变成*号 也就是显示加密
• submit
  • 提交表单按钮 修改提交按钮的里面的值 修改其value就行
• reset
  • 重置按钮 清空表单已填写信息 也是改value
• radio
  • 单选按钮 在不设置相同name属性的情况下 单选也会造成多选
  • 一般会在单选框中设置value来让后台判断
  • disabled 禁选属性
  • checked 默认选中
  • 一般会用label标签来关联关键字 也就是点击关键字也会选中该单选框

	<label for='id'> xx</label>	<input type='radio' name ='xx' id ='id'>

input的其他属性

• placeholder
  • 占位符
  • 文本框没写入的时候，该属性的值会显示在上面，
  • 当开始输入之后就会显示输入的值，
  • 而该属性的值会隐藏，但是输入文本清空后属性值还会出现.
  • input输入的值其实是给input的value属性赋值
• textarea
  • 文本域
  • 类似一个div的盒子，但是里面只能放文本，
  • 右下角的三角形可以拖开文本域
  • cols 属性可以给文本域多家列
  • rows属性多加行
  • resize：both属性
    • 设置可以拖动跳转
    • none值就设置不能跳转
    • 里面的文本空格 换行都会被解释为实际的值，里面的怎么写 值就是怎么样
• select
  • 定义下拉选框
  • option 选项
  • select 的name是自己的
  • value是被选择的option的值
  • size 可以设置同时显示多少个
  • selected 属性 设置默认选择（这个属性是option的）
• datalist
  • 用作与input关联
  • 同样是使用option子组件
  • 在input中用list属性绑定datalist的id
  • 可以做出搜索框下面多选的那种效果

<input type='text' list='box'>				
	<datalist id='box'>				
    <option value='html'>html</option>				
    <option value='js'>js</option>				
    <option	value='css'>css</option>				
</datalist>

table

<table>  
  <thead>    
    <th>123213</th>  
  </thead>  
  <tbody>    
    <tr>      
      <td>32131</td>      
      <td>321321321</td>    
    </tr>  
  </tbody>
</table>

**div布局和table布局的区别

• table布局加载的时候需要等里面的内容全部加载后才会显示页面

  • 所以在页面网络较慢的时候会有留白的闪烁感

• 而div是从上往下 一个个加载的 不存在留白的情况

• thead标签表格头部

• tbody标签表身

• tfoot标签表尾

• tr标签定义表格行

• th标签定义表格标题单元格

• td标签定义普通单元格

td tr属性

• colspan 跨列
  • 把自己算上
• rowspan 跨行
  • 如果有单元格就会挤走

css属性:

• border-spacing
  • 边框线与边框线的距离
• border:collapse
  • 边框线折叠 边框线去重

分析table的属性

• th

  • 加粗 左右上下居中

• tbody

  • 里面的单元格 会默认平分
  • 依据内容的多少来分table的宽高 比例一样 一个文字占一份比例 多的自然多
  • 给td设置宽度后，会完全平分table的宽度，不再根据内容来分
  • 每行每列宽度取决于当前行或列中最大(最宽，最高)的单元格
  • table 没有设置宽高时，由内容撑开 ，
  • 支持宽高，独占一行，
  • 支持margin 和margin auto
  • 而padding在table中是没有效果的

• td th

  • 不支持margin和padding 效果奇怪

补充知识：

• css属性中如果不想设置直接继承父级的属性
  • 可以使用inherit属性值强行继承父级的属性 eg:color:inherit;
• 表格的display是table table-cell可以实现自适应宽高布局

div

划分一块区域 常用于网页布局

<div></div>

p

在div的基础上 加上一条限制条件 就是划分的区域只能放文字

<p></p>

html新增标签(语言化标签)

• header
  • 页眉,也可用与块头部
• nav
  • 导航
• section
  • 页面上的板块
• article
  • 用来在页面中表示一套结构完整且独立的内容部分
• aside
  • 侧边栏,广告,nav元素组,以及其它类似的内容部分aside的内容应该与artical的内容相关
• footer
  • 页面的底部或者板块的底部

css写法

三种css书写方式

1. 行间样式:

   1. 标签属性style中写css

   2. <div style=''></div><style></style><link href =''>
      

2. 内部样式:

   1. html文档中 加入style标签 在其中写css代码

   2. <style>
        .div{
          
        }
      </style>
      

3. 引入css文件 ( @charset "utf-8"来统一编码) (外部样式的引入css就相当于把引入的css复制到当前引入的代码位置)

   1. <style link='xx' />
      

css写法

div{ }   ->  选择器{}

• 选择器表示要使用的筛选条件
  • {} 所包裹的一般为css样式代码
  • 这样写就是将括号里面的样式代码赋予筛选出来的html元素

css为什么叫层叠样式表

通俗解释

1. 下面相同的属性 会覆盖上面的属性值 优先级高的 会覆盖优先级低的 ，两个相同的选择同样的属性，后面设置的属性会覆盖前面设置的
2. 层叠顺序是指不同元素相互层叠，规定先后顺序的一套规则。而层叠上下文和层叠水平都是概念。
   1. 从下往上分别是:
   2. background/border
   3. 负z-index
   4. block块状水平盒子
   5. float盒子
   6. inline/inline-block水平盒子
   7. z-index:auto/z-index:0 不依赖z-index的层叠上下文
   8. 正z-index

css选择器

id选择器

• 给html元素加上id 属性
• 通过筛选指定id值来进行筛选
• 整个html文档同样的id值只能出现一次
• 在css中通过# 来对进行id属性值的筛选 来进行css样式的赋予

html -><div id='demo'></div>    
css ->  #demo{}

class选择器

• 给html元素加上class属性
• 通过筛选指定的class值来进行筛选
• 可以出现多次同样的class属性值 如果有多次 则可以选择多个元素

在css中通过 . 来对进行class属性值的筛选 来进行css样式的赋予

html ->  <div class='div1'></div> 		
css  ->  .div1{}

标签选择器

• 直接在css中通过指定所要筛选的标签 进行元素的筛选
• 可以筛选出一类的html元素 来进行css样式的赋予

html ->  <div ></div> 
css  ->   div{}

命名规范和权重

• 符号连词 （_不建议使用）
  • 最好使用驼峰式命名规则
  • 建议不要首字母大写
• 通配符选择器
  • • {}
  • 选择html文档中所有元素 一般用于初始化
• 选择器权重
  • 行内样式 > id > class > 标签 > *

三种代码写法权重: 行内样式 > 内部样式 = 外部样式

组合选择器

1. 后代选择器

   1. 父级选择和子选择器中间加上空格 选择父选择器下的所有该子选择器

   2. html :<div><p>123</p></div>    
      css  -> div p {}选中的是div标签中的所有p标签
      

2. 直属后代（儿子）选择器

   1. （只有儿子才算 孙子就不行） 父元素和子元素直接加 >

   2. html :<div><p>123</p></div>    
      css  -> div>p {}
      

3. 兄弟选择

   1. （同一个父级元素下 的一个兄弟（选择器后面的那个）元素） 标签和标签之间加+

   2. html-> <div><p></p><span></span><div>      
        css->  div p+span {}
      

4. 兄弟元素选择器

5. （同一个父级元素下的所有兄弟元素）

6. html-><div><p></p><span></span><span></span></div>  
   css -> p ~ span{}   选择所有的div下p后面的所有span
   

7. 并列选择器

   1. 在选择器直接加， 就表示都选择

   2. html -><div><p></p><span></span><span></span></div>
      css - > div,p,span{}
      

8. div.class

   1. 这样写选择器就增加权重 不会当做后代选择器

盒子模型

块级盒模型

1. margin

   1. 外边距

      1. 盒子之外的区域
      2. 通过改变margin值可以使盒子自身位置改变

   2. 外边距合并问题

      1. 子元素改变margin top 连带父级一起动 这叫margin top 合并
      2. 解决办法 :
         1. 给父级元素加border top 或者 padding top

   3. margin属性

      1. 四个值表示上右下左
      2. 三个值表示 上 左右 下

   4. 能够使用左右auto 实现水平方向居中

2. border

   1. 盒子边框

      1. 最外围的部分

   2. 包裹整个盒子

      1. margin改变的是border之外的距离

   3. 属性

      1. 这是复合属性

         1. border : 1px solid red

      2. 拆分属性

         1. border-weight:1px
         2. border-style:solid
         3. border-color:red

3. padding

   1. 内边距

      1. 盒子border之内与内容区域挨着的部分
      2. 改变此部分可以撑大盒子区域

   2. padding属性

      1. 四个值表示上右下左
      2. 三个值表示 上 左右 下

4. content

   1. 内容区域

   2. 块级盒模型的宽默认是百分百

      1. 随父级宽度改变
      2. 高度默认由内容撑开

   3. 可以设置width height 属性来限制宽高

      1. 设置之后 内容区的大小就是width height 大小
      2. width height的值可以设置百分比
      3. 1%(最后会被划算成固定值)
      4. 固定值 2px(像素点)
      5. em(1倍父级字体大小)

5. 默认独占一行 不于其他元素并排

行内盒模型

• 行内盒模型不能使用margin(padding) top 使自身位置移动

  • 增加的padding top 会遮罩其他元素内容

• 能够使用padding(margin) left 使自身位置发生改变

  • 但是padding不会撑大内容区域
  • 不支持margin auto实现水平居中

• 能使用border

  • 不能使用width height来设置宽高

• 内容区域由文本内容决定

  • 通过改变字体大小能够使内容区域变大 (font-size)

• 使用line-height(行高)

  • 可以使盒子自身垂直方向发生改变
  • 行高不会影响行内元素盒子模型 是看不到的

• 可以通过vertical-align 改变垂直方向对齐方式

  • 行内元素默认为基线对齐

• 通过text-align

  • 可以对行内元素或是文本 进行水平方向的对齐

• 与其他行内元素共占一行

  • 但是会具有文字属性
  • 行内元素与行内元素之间的空格或者回车都会在渲染的时候算作一个空格在内容直接

标准盒模型下 实际大小 = content+padding+border

怪异盒模型： 将标准盒模型转为怪异盒模型 box-sizing ：border-box 怪异盒模型 width就等于整个盒子的大小 内容区域内容 = width - padding -border

显示类型

• 盒模型只是规定了浏览器怎么去渲染和解析某个盒子的规则

  • 可以通过display属性告诉浏览器以哪种盒模型的规则来渲染盒子

• 块级盒模型的display 为block

• 行内元素的display 为 inline

• 第三种显示类型为 inline-block(行内块) 集合两者之长

  • 行内块元素支持margin(padding) top

  • 支持设置width height属性限制内容区域

  • 能够与其他行内元素或者行内块元素共占一行

    • 同样会带有文字属性

  • 同样具有基线对齐

  • 不支持margin auto

显示类型转换

• 通过修改元素的display属性可以进行元素类型的转换

解决文字属性问题

1. 父级字体大小设置为0
2. 代码中注意空格

html元素分类

常见的块级元素有: div p h1-h6 ul ol li dd dl

常见的行内元素有 : a span em i strong lable img tt

常见的行内块元素有 : input

圆角样式

border-radius 单位有 px 百分比

• 怎么制作圆形呢

  • 将四个角设置为百分之五十就是圆形

• 一个值

  • 四个方向

• 两个值

  • （对角线）
  • 左上右下
  • 右上左下

• 三个值

  • 左上角
  • 右上左下（对角线）
  • 右下

• 四个值

  • 左上
  • 右上
  • 右下
  • 左下

• 八个值

  • X轴的四个值
  • y轴的四个值
  • （没有太大的意义）

字体样式

• 字体样式和文本样式
  • 文字属性默认有继承性
• font-color
  • 字体颜色
• font-size 字体大小
  • 常用的值为px
    • 最小是12px（再小就不会变化了）
    • 0就是字体不显示(没有)
    • 默认情况下字体大小为16px
  • em（单位值）
    • 等于父级字体大小，是一个相对单位
    • 只会找最近父级的字体大小
    • 只有在最近父级没有设置字体大小时才会一直往上找
  • rem是找网站根节点
  • （一般是html）的字体大小
  • 一般在移动端使用
  • 百分比 % ( 类似于em ) 相对于父级的字体大小
• font-family
  • 字体类型
    • 不同的浏览器默认字体都不一样
    • chrome默认是微软雅黑
    • 微软的是宋体
  • 写法
    • font-family:'微软雅黑','黑体',arial
    • 可以写多个字体作为选项，
    • 按排列顺序作为使用顺序，
    • 排在前面的会优先使用
  • chrome 微软雅黑 ie 宋体 sans-serif 非衬线字体 serif 衬线字体(类似中国书法的一撇一捺）
  • 后面两个是大类 字体分为非衬线和衬线 不要随便使用其他公司的字体 会被告版权问题
  • 引入字体
    • @font-face { font-family:'xx名字';src:'url'}
• font-width
  • 字体宽度
  • blod 文本加粗
  • normal 默认
  • lighter 细的
  • bolder 更粗的
• font-style
  • 字体样式
  • normal 默认
  • italic 倾斜
  • oblique 使字体倾斜
• font-variant
  • 让小写字体变成大写字母，但是比普通大写字母要小
  • 大写字母不变
  • 参数：small-cape 让小写变成大写
• line-height
  • 行高
  • 行间距 等于 行高 - 字体大小
  • 50px 可以看做段和段落直接的上下margin
• text-align
  • 文字对齐
  • left 左对齐
  • right 右对齐
  • center 居中对齐
  • justify 两端对齐（文字长度不够时会填充空格使其充满一行 单行文字使用无效 可以解决右边文字 参差不齐的问题）
  • 以上属性只能控制文本 对其他元素并没有用
• vertical-align
  • 改变元素自身的基线
  • 默认是英文字母舞线倒数第二根线
• text-intent
  • 首行缩进
  • 单位 px em
• text-transform
  • 控制文本的大小写
  • uppercase 字母全部大写
  • lowercase 字母全体小写
  • cpaitalize 首字母大写
• text-decoration
  • 文字修饰
  • underline 下划线
  • line-through 中划线
  • overline 上划线
  • 一般使用none 取消文本修饰，一般用于a标签
• letter-spacing
  • 字间距 ：字符
  • word-spacing 单词之间的间距 文字不受影响
• white-space
  • 换行
  • wrap 换行
  • nowrap 不换行
• overflow
  • 溢出隐藏（元素内容溢出）
  • hidden 隐藏
• text-overflow
  • ellipseis 省略号
• 溢出文本三件套（溢出文本变省略号）
  • white-space:nowrap; 取消文字换行
  • overflow :hidden 溢出隐藏
  • text-overflow:ellipsis
    • 溢出文本变省略号 前提条件 块级元素设置宽度，只能用于块级或是行级块元素
  • word-break：break-all 解决单词太长不换行，难看的情况

opacity

• 透明度
  • 范围是0-1
    • 0是完全透明
    • 1是完全不透明
  • 可以是小数
    • 元素占位置 不会消失
  • ie兼容filter:alpha(opacity = 0 -100)
    • 和透明颜色的区别
    • 颜色透明相当于地板砖不会影响上面的
    • 透明度是整个盒子的透明

visibility

• 元素是否可见
• visible 可见
• hidden 隐藏 (视觉隐藏 还占位置)
• 透明度0也可以实现隐藏
  • 但是元素实际上还在
  • 但是a标签链接样式还在 ，鼠标碰到还能变
  • 而visibility 隐藏后 a标签不触发

背景样式

1. background-color : 背景颜色
   1. color 有三种写法 默认为transparent 透明色
   2. #fff 十六进制
   3. rgb
   4. rgba

background-color:red

2. background-image : 背景图片
   1. 要配合url属性来选择图片路径

background-image:url('xxxx')

3. 背景的层级

   内容层 > border边框层 > 背景图片层 > 背景颜色层

4. background-repeat : 背景平铺属性

• 默认值为平铺
  • 也就是图片宽高小于盒子的时候
  • 那么会自动向xy轴延展开 直到覆盖整个盒子
• 可以设置 no-repeat 使背景图片不平铺
  • 也可以设置单个方向
  • 或者只设置单个方向平铺
• 如果采取默认的背景图片平铺，则背景图片则会延伸到边框之下，
  • 如果不重复，则图片不会延伸至边框之下

background-repeat-x:repeat;  ->x轴 取消平铺
background-repeat: repeat-y;  -> 只平铺y轴

5. background-size: 背景图片大小

• 写法: background-size: width height；
  • 可以控制背景的大小
  • 可以使用百分比和auto
• 还可以使用:
  • cover:
    • 图片等比缩放直到刚好覆盖背景区域
  • contain:
    • 图片等比缩放,直到有一条边触碰到边框就停止

6. background-origin:背景图片显示基点

可以设置从哪里开始显示图片

• content-box: 背景图片内容区左上角开始
• padding-box: 背景图片从内边距左上角开始
• border-box: 背景图片相当于边框左上角开始

7. background-clip :裁剪图片

背景图片裁剪区域样式的作用就是，在背景图原始尺寸大于元素的时候讲图片进行裁剪，保证背景图片在哪个区域可见

• content-box: 只显示内容区部分的背景图片
• padding-box:显示内容区和内边距部分的背景图片
• border-box: 显示内容区、内边距和边框部分的图片

8. background-position:背景图片定位

背景图片相对于显示基点的水平偏移 和垂直偏移

可以设置px 或者 百分比单位: 宽度百分比基数(元素宽度 - 图片宽度) 高度百分比基数(元素高度 - 图片高度)

9. background-attachment :背景图片依附

背景图片关联依附样式的作用就是，决定背景是在视口中固定的还是随包含它的区块滚动的。

• fixed：此关键字表示背景相对于视口固定。
  • 即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

10. overflow

    1. 溢出文字处理
    2. overflow：visible;（默认） 超出内容正常显示
    3. overflow：hidden;超出内容隐藏
    4. overflow：scroll; 如果内容比较多，则用滚动条的形式展示多余内容
    5. overflow：auto;内容未超出，正常显示内容超出，显示滚动条

11. 背景复合样式写法

background: color image repeat attachment position/size

background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px；

省略部分会被默认值替代,
position和size之间要用/分割省略部分会被默认值替代,
position和size之间要用/分割

单个元素可以设置多个背景图片

background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px， url(images/1.png) no-repeat scroll 20px 20px/30px 30px ；

圆角样式

圆角样式（英语：border-radius），

• 是W3C制定出来使默认显示为矩形的块元素展示一个弧形边缘的样式

1. border-radius
   1. 八个角 都能改变

画圆形: border-radius : 值等于宽(高)的一半 并且宽等于高时

2. 画椭圆

   border-radius : y/x -> y可以理解为宽 x 可以理解为高

颜色渐变

渐变色的定义：所谓渐变色，一般是指在两个及以上的颜色之间呈现一种平滑的过渡效果，该效果是矢量效果，不会因为页面的放大而出现模糊的情况，CSS3中定义了两种渐变类型，

一种为线性渐变，一种为径向渐变，还有一种目前应用不广但是很有前途的角向渐变.

• 线性渐变:linear-gradient()
  • 一条一条线往下铺

background:linear-gradient(to top,red 0%,blue 100%)
设置渐变方向 默认是从上往下  改为从下往上to 那个方向就是那个方向   可以设置角度background:linear-gradient(45deg,red 0%,blue 100%)

• 径向渐变:radial-gradient()
  • 一圈一圈的扩散

径向渐变和线性渐变的唯一不同就是添加颜色的方向，径向渐变类似画同心圆，一层层的往外面画圈圈

background:radial-gradient(red 0%,blue 100%)

• 重复渐变色 repeating-linear-gradient() 和 repeating-radial-gradient()
  • 它们的工作方式跟前两者类似，只有一点不同：
    • 色标是无限循环重复的，直到填满整个背景。

background:repeating-linear-gradient(45deg,red 0,blue 15px,red 15px)那个角度    以什么颜色开始   蓝色重复多少像素  

渐变色用于背景时，是以背景图片的形式展示的！！！！！！所以可以使用背景图片的所有样式特性，如大小，位置，基点，剪切等

浮动样式

• 文档流
  • （文档正常渲染流 从上而下 从左往右）
  • 元素没有改变特性时 按自己原来的规则进行排列 （块级占一行 行级自己的位置）
• 浮动
  • 可以让元素 脱离文档流（脱离原来的图层）
  • 遇到父级边界 或相邻的浮动元素 停下来
  • 浮动元素 在文档流内不占位置 后面的位置会取代自己原来的位置 （只会影响自己后面的）
    • 前面的浮动 后面的才会跑上去
• 简单理解
  • float实际的效果就是离开文档流，块级元素后面的margin清空，
  • 后面的元素前面的元素离开原来位置那么自己就可以上去了
• 浮动作用
  • 1.让元素 既能布局 又能横排显示
  • 2.问题：
    • 正常情况下父级高度是由元素撑开的,一旦浮动脱离文档流之后,子元素就不能撑开父级了 所以导致父级高度坍塌
  • 3.浮动元素被卡住
    • （上排高度和margin多出父级高度 那么掉出来浮动元素会被往下（多出来的部分）卡（往左浮动的时候还要看多出来的高 margin））
  • 4.元素变为浮动元素后会具有浮动元素特性，不再具有块级或行级属性
• 浮动元素特性
  • 1.不占位置（文档流的位置）
  • 2.横排显示 能跟浮动元素横排显示
  • 3.支持宽高
  • 4.支持margin padding
    • 不支持 margin:auto（不管是行内或是块级 一旦浮动就失去原来规则，变为浮动规则）
    • (只有块级支持 auto)
• 浮动元素和行内块的区别
  • 不会解析空格
  • 不会存在垂直对齐问题
  • 脱离文档流
• 浮动对文字的影响
  • 浮动的初衷是为了文字环绕

清除浮动带来影响

• 解决父级造成的高度塌陷的问题 浮动元素本身不能清除浮动

  • 父级元素没设置高度，固定高度之后就算子元素脱离 父元素还是有高度

• 触发bfc

  • 让父元素BFC(块级格式化上下文)化给父元素设置下列属性之一即可

  • overflow:hidden;
    display:inline-block;
    float:left;
    position:absolute;/*定位样式*	
    

  • 当父元素形成BFC时, 父元素就具有了包裹性:

  • 可简单理解为,父元素有了一个虚拟的框(此时子元素的外边距不再会和父元素的外边距合并), 父元素的宽高由里面还在平面上的元素和漂浮的素一同撑开,

• 给父级的内容最后添加一个空的块级标签

  • 设置clear ：both来清除 会造成代码冗余 ul ol 不适用

• 父级加浮动

  • 不会造成高度塌陷 但是清除浮动要一层一层的清除

• 伪元素

  • 模拟的是第三点 但是不需要添加元素
  • 通过css创建的一个没有名字的行内元素

• 每个元素诞生的时候自带的两个元素 但是没有显示和属性

• 可以通过css设置

• conten设置显示内容

• after在元素后面

• before在元素前面

• 使用clear属性

  • 确保当前元素的左右两侧不会有浮动元素

• 用伪元素清除浮动

content=''  display:"block"(只有块级属性可以设置clear)  clearboth

定位样式

• 默认位置(static)

  • 设置为 static 的元素，它始终会处于页面流给予的位置
  • (static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。

• 绝对定位 absolute

  • 设置绝对定位的元素会脱离文档流 在自身的位置上往上飘

  • 后飘起来的元素会飘得更高 也就是后面的有可能覆盖着前面的

  • position:absolute
    

• 相对定位 relative

  • 通过给父元素设置相对定位来与绝对定位的子元素建立坐标系(通常是父相子绝)

  • 绝对定位会以距离自身最近的已有定位(非static)的父级作为坐标原点

  • 然后就可以通过left right 等属性值 来对绝对定位的元素进行控制

  • 相对定位的元素不会脱离文档流 本体没有脱离文档流 移动的只是影子

  • 相对定位的坐标原点是自己的本体 移动后显示的是影子

  • 绝对定位如果不设置left等 就会出现在它正常文档流应该出现的位置 会带有默认的left right值

  • position:absoluteleft:0px;
    

• 固定定位 fixed

  设置了固定定位样式的元素, 坐标系自动被锁死为以浏览器窗口, 坐标系原地即为浏览器窗口左上角顶点 同样可以通过调节left 等 进行移动元素

绝对元素的层级关系

z-index 属性设置元素的层级

• 默认的层级关系是: 后飘起来的元素飘得最高
• 默认的层级关系是: 后飘起来的元素飘得最高我们用过z-index样式来改变元素的层级关系

层级关系:

z-index > z-index=0 >浮动层 > 普通文档流 > border边框层 > 背景图片层 > 背景颜色 > z-index 负值

伪类样式

• CSS伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字

• 当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类都只能控制子元素以及兄弟元素

• :checked

  • 该伪类表示表单元素被选中的状态，可以用于单选按钮，复选框等元素

• :active

  • 该伪类表示表单元素、链接等元素被激活的状态，此处被激活的概念比较特殊

  • （对于输入框而言，是鼠标左键按下且未抬起的时候；对于a元素，也是鼠标左键按下且未抬起的时候）

• :hover

  • 该伪类表示鼠标箭头放在被选中的元素上的状态，可以用于任意元素上

  div:hover{ color:red;}   ->鼠标移上div时会吧color:red赋予div
  

• :focus

  • 该伪类表示当用户点击,触摸,通过键盘的 “tab” 键选择表单元素、链接等元素时会被触发

• :nth-child()

  • 这个 CSS 伪类首先找到伪类前选择器选中的元素的所有兄弟元素，然后按照位置先后顺序从1开始排序，选择第（n）个元素。

• :nth-last-child()

  • 它基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处

• :nth-of-type()

  • 这个选择器匹配那些在伪类前所选中的元素的相同兄弟节点中的位置与 :nth-of-type()括号中 匹配的元素

• :nth-last-of-type ()

  • 它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处

• :first-child

  • 选择在父元素中第一个（且必须是第一个)出现的

• :first-of-type

  • 选择在父元素中第一个出现的
    ，而不管其在兄弟内的位置如何

  • [ attr ]

    • 该选择器选择伪类前选择器所选中的元素中间包含 attr 属性的元素（attr是属性名称）

  • [attr=val]

    • 该选择器仅选择 attr 属性被赋值为 val 的所有元素。（attr是属性名称，val是属性值）

  • [attr~=val]

    • 该选择器选择 attr 属性中包含值为 val 的所有元素。（attr是属性名称，val是属性值，~是包含的意思）

  • [attr^=val]

    • 选择attr属性的值以 val 开头（包括 val）的元素（^是以xx为开头的意思）

  • [attr$=val]

    • 选择attr属性的值以 val 结尾（包括 val）的元素（$是以xx为结尾的意思）

  • [attr*=val]

    • 选择attr属性的值中包含字符 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）

  动画帧

  1. 短时间内连续播放多张静态的帧(静态的图形) 让眼睛形成视觉残留
  2. 关键帧动画创造方式:
     1. 用户定义第一帧和最后一帧,中间的帧数由计算机辅助生成
     2. 用户定义第一帧到最后一帧的动画时间（根据此时间计算机算出具体需要帮我们生成的帧数）

  触发式动画原理

  通过hover check等事件赋予元素动画的最后一帧,然后配合初始的第一帧,就产生了动画效果

  • transition-duration

    • 过渡动画时间
    • 定义一个动画从第一帧到最后一帧的动画时间，浏览器会根据该时间生成对应数量的中间帧数

  • transition-delay

    • 过渡动画延迟
    • 定义动画从触发动作执行的一瞬间，延迟多长时间开始展示动画，默认延迟为0，即动作一执行立马就展示动画

  • transition-timing-function

    • 过渡动画时间函数
    • 定义动画从第一帧到最后一帧变化过程的速率变化

  • transition-property

    • 过渡动画属性
    • 定义元素是以某个属性的变化作为动画的变化效果(如,宽度的变化, 高度的变化等)
    • 第一帧和最后一帧代表的就是该属性的值的变化(比如width的值从第一帧的100px,到最后一帧的500px)

  • 过渡动画综合属性：

    • 属性名称 过渡时间 过度动画时间函数 动画延迟时间

  • 定义元素是以某个属性的变化作为动画的变化效果(如,宽度的变化, 高度的变化等),

    • 第一帧和最后一帧代表的就是该属性的值的变化

  transform(rotateX(50deg))transition:width 2s  xx  2x;
  

  主动动画

  主动式动画：由用户自行创造关键帧，无需任何的动作触发

  @keyframes  动画名称 {  
    状态1 {    
      样式名称1：样式值1；  
    }
    状态2 {    
      样式名称1 ：样式值2 ；  
    }
    ...... 
    状态x {    
      样式名称1 ：样式值3 ；
    }
  }
  

  • 与触发式动画的不同
    • 用户可以自行创造多个关键帧，用来更加精细化的控制动画的整个过程
  • 动画激活
    • 给需要展示用户自行创造的主动式动画的元素加上animation-name（动画-名称）样式
  • @keyframes
    • 创建动画 可以改属性 或是模仿过度 或是进行2d转换
  • animation
    • 简写动画属性 不包括动画运行状态这个属性
  • animation-name
    • 指定需要使用的 @keyframes 动画名
  • animation-duration
    • 规定动画完成一个周期要多长时间 秒或是毫秒 默认是0
  • animation-timing-function
    • 规定速度曲线
  • animation-delay
    • 动画延迟设置
  • animation-iteration-count
    • 规定动画播放次数 n（多少次） infinite 无限次 默认是1次
  • animation-direction
    • 设置播放方向
  • animation-play-state
    • 规定动画运行状态 运行还是暂停

  @keyframes  xx{    
    0%{}    
    10%{}    
    100%{}
  }
  div{ 
    animation:xx  2x  infinite 
  }
  

  复合写法

  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  

  变化样式2d动画

  transform属性应用于元素的2D或3D转换。

  • 这个属性允许你将元素旋转（rotate），缩放（scale），移动(translate)，倾斜(skew)等。

  • transform

    • rotate（角度值）(deg)；角度值为正，元素顺时针旋转；角度值为负元素，逆时针旋转

    • translate（偏移量1, 偏移量2

      • 设置元素以自身初始位置为原点的偏移效果

      • 偏移量1

        • 定义元素水平方向的偏移量
        • 可以单独用translateX()来设置

      • 偏移量2:

        • 定义元素垂直方向的偏移量
          • 可以单独用translateY()来设置

    • scale（倍数1, 倍数2）

      • 设置元素的缩放倍数
      • 倍数
        • 0~1之间, 元素缩小(倍数为0元素消失不见)
        • 1 , 元素放大
        • 倍数: <0, 元素倒置( -1~0, 倒置缩小, 小于-1, 倒置放大 )

    • skew（角度1, 角度2）

      • 设置元素的倾斜数据

      • 角度1

        • 定义元素水平方向的倾斜角度
        • 可以单独用skewX()来设置

      • 角度2

        • 定义元素垂直方向的倾斜角度
        • 可以单独用skewY()来设置

    • 每个元素都有一个transform-origin（变化原点）样式

      • 其默认位置正好位于元素的水平中心和垂直中心线的交叉点

  transform-origin:0% 0%;   
  改变变化基点(可以改变基点至自身元素外面)
  

  2d动画复合写法

  变化样式可以使用复合写法，如

  transform: scale(*) translate（*, *）skew(*)  rotate(*);
  

  变化样式内多个样式值顺序的不同会导致完全不一样的结果

  前端动画实现的方法基本分为两大类

  1. 一种是利用JavaScript在canvas画布进行动画绘制
  2. 一种是利用JavaScript或css来控制元素的位置属性值的变化来实现动画效果

  每个步骤的详细处理内容为：
    1.change（通过JavaScript或CSS改变某个元素的位置属性值）
    2.Style（计算样式）：浏览器确定每个 DOM 元素最终应用哪些 CSS 规则。
    3.Layout（布局）：浏览器计算每个 DOM 元素在最终屏幕上显示的大小和位置。并且整个页面上所
    4.有的元素位置都是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生
    5.变化，这个过程叫 reflow（重排）。
    6.Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。最典型就是
    7.background和绝对定位中不同Z-index值的元素。
    8.Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。比如讲元素的内容层放
    9.在background层之上，同一坐标系下的不同z-index值的元素
  

  3d动画

  • 1.默认情况下前端的3D坐标系是没有Z轴值的, 所以默认看不到3d物体的远近, 只能看到3D物体的投影
  • 2.通过给坐标系添加perspective样式即可增加Z轴
  • 3.使用绝对定位样式移动元素时, 此时坐标系的X轴和Y轴以设置了相对定位的祖先元素的中点为原点
  • 4.使用transform的位移样式或是相对定位样式移动元素时, 此时坐标系的X轴和Y轴以元素的中点为原点
  • 5.默认情况下， 坐标系的Z轴位于父元素的水平中线与垂直中线的交界处
  • 6.z轴的位置可以用perspective-origin样式来设置

  阴影

  复合写法

  相当于在元素周围喷漆 这就是阴影的原理

  box-shadow：xOffset yOffset burlLehgth spread color outset;
  盒阴影:水平方向偏移 垂直方向偏移 阴影模糊距离 阴影缩放 阴影颜色 阴影显示方式；
  

  flex 弹性盒子

  • 一种更为简单、有效的方式来对一个元素块中的子元素进行排列、对齐和分配空余空间的布局方式
  • 仅支持单行或单列的排列，元素沿主轴（水平或垂直）方向排列
  • 弹性盒模型支持margin padding 非常的灵活
  1. 元素加上display:flex
     1. 变为弹性盒子
     2. 我们称父元素为容器
     3. 子元素成为项目
  2. 容器默认存在两根轴：
     1. 水平的主轴（main axis）
     2. 垂直的交叉轴（cross axis）
  3. 主轴是横向
     1. 交叉轴（侧轴）与主轴垂直交叉的纵轴
     2. 用于宏观控制项目

  flex属性

  • flex-direction
    • 确定主轴的方向 以及主轴到底是哪根
    • 默认是row
      • 水平方向 从左往右
    • row-reverse
      • 水平方向反转 从右往左
    • column
      • 垂直方向 从上往下
    • column-reverse
      • 垂直方向反转 从下往上
  • flex-wrap
    • 确定是否换行 以及侧轴/交叉轴方向
    • 默认nowrap
      • 不换行
    • wrap
      • 换行，如果主轴是水平 交叉轴是竖直
    • wrap-reverse
    • 如果主轴是水平，交叉轴则是竖直(从下往上)
  • flex-flow
    • 上面两个的复合写法
    • flex-flow ：row wrap；
  • justify-content
    • 用于主轴的对齐方式
    • flex-start
      • 主轴起点对齐
    • flex-end
      • 主轴的终点对齐
    • center
      • 主轴的中线对齐
    • space-between
      • 左右两侧没有间距，中间间距相同
    • space-around
      • 左右两侧的间距为中间间距的一半
  • align-items：
    • 侧轴上单行项目的排列
    • 默认值是 strench 项目会撑满侧轴
    • flex-start 交叉轴起点对齐
    • flex-end 交叉轴终点对齐
    • center 交叉轴中点对齐
    • baseline 基线对齐
  • align-content
    • 多行项目对齐
    • 属性跟单行排列一样
    • 默认值是 strench
      • 项目会撑满侧轴
    • flex-start
      • 交叉轴起点对齐
    • flex-end
      • 交叉轴终点对齐
    • center
      • 交叉轴中点对齐
    • baseline
      • 基线对齐
    • space-between
      • 交叉轴多余空间分配至 项目之间 类似两端对齐
    • space-around
      • 多余的空间分配至项目主轴方向的两侧
  • align-self：
    • 子项目的排列
    • 会被容器的覆盖
    • 默认值是 strench
      • 项目会撑满侧轴
    • flex-start
      • 交叉轴起点对齐
    • flex-end
      • 交叉轴终点对齐
    • center
      • 交叉轴中点对齐
    • baseline
      • 基线对齐
  • order
    • 排序
    • 通过设置 order可以改变轴上面的项目的排序优先级

  项目：

  flex：auto    -》 flex : 1 1 auto	 
  // 他是根据内容决定   内容如果多的盒子 可能分配之后   宽度更宽
  复合写法:	flex  :1 1 0  grow为1 shiink 1  basis 0  也就是auto
  

  • flex-grow

  • 盒模型长大，分配容器多余的空间

  • 默认是0 不分配 1 里面的项目平均分配项目

  • 大于1 没啥用 伸展

  • flex-shrink

  • 承担容器宽度不够的空间

  • 默认值1 当父容器不够时会收缩自己

  • 0 不收缩

  • flex-basis

  • 确认主轴上的默认长度 （由主轴决定宽高）    
    

  • 但是当父级长度不够平分到 flex-basis时

  • 长度会低于basis 默认是auto 由内容决定

  • 但是如果确定设置长度 覆盖掉basis

  优先使用flex的情况

  • 需要快速实现元素的水平或垂直居中（如导航栏的左右分布）
  • 单行/单列动态伸缩布局（如等间距按钮组）
  • 组件内部元素的简单排列（如卡片中的图文混排

  grid布局

  • 可同时定义行和列的网格结构，支持复杂的多行多列布局
    • 解决复杂二维结构，适合整体页面规划
  • 优先使用grid的情况
    • 复杂二维布局（如整页分栏、棋盘式布局）
    • 响应式网格设计（自动适应不同屏幕尺寸）
    • 需要精确控制元素位置和层叠关系的场景（如仪表盘
  • 采用网格布局的区域，称为"容器"（container）。
    • 容器内部采用网格定位的子元素，称为"项目"（item）。
  • 容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
  • Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；
    • 另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。
  • 默认情况下，容器元素都是块级元素，但也可以设成行内元素。

  grid属性

  • grid-template-columns属性定义每一列的列宽，
  • grid-template-rows属性定义每一行的行高。

  一个三行三列的网格，列宽和行高都是100px。
  .container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
  }
  

  .container {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 33.33% 33.33% 33.33%;
  }
  

  阿里图标使用

  1. 在阿里云图标矢量库将想要下载的图标加入购物车
  2. 点击下载代码
  3. 然后找到css文件 拷贝项目生成的 @font-face
  4. 定义使用 iconfont 的样式
  5. 挑选相应图标并获取字体编码，应用于页面

  不设置宽高的div水平垂直居中

  使用Flex

  • 只需要在父盒子设置：		
    display: flex; 		
    justify-content: center;		
    align-items: center;
    

  使用 CSS3 transform

  • 父盒子设置:		
    position:relativeDiv 设置:  transform: translate(-50%，-50%);  
    position: absolute;  
    top: 50%;  
    left: 50%;
    

  使用 display:table-cell 方法

  父盒子设置:		
    display:table-cell;    
    text-align:center;    
    vertical-align:middle;
    Div 设置: 		
    display:inline-block;		
    vertical-align:middle;
  

  父容器设置宽高实现水平居中

  使用margin实现

  .father {  height: 100%;  width: 100%;}
  .root {  
        background-color: red;  
        width: 200px; 
        height: 200px; 
        /*如果父元素也是用的百分比*/  
        margin: 25% auto; 
        /*垂直居中 (父元素高-子元素高)/2*/  
        margin: 0 auto;  
        margin-top:100px;
  }
  

  使用absolute

  .father { 
      position: relative;  
      height: 100%;  
      width: 100%;
  }
  .root {    
        background-color: red;    
        width: 200px;    
        height: 200px;    
        /* position: absolute;    
        left: 50%;    
        top: 50%;    
        margin-left: -100px;    
        margin-top: -100px; 
        */
    }
  

  使用absolute加margin

  .father {  
    position: relative;  
    height: 100%; 
    width: 100%;
    }
    .root {    
        background-color: red;    
        width: 200px;    
        height: 200px;     
        position: absolute;    
        top: 0;    
        left: 0;    
        right: 0;    
        bottom: 0;    
        margin: auto;
    }
  

  BFC相关知识

  定义

  • CSS 中的 BFC（Block Formatting Context，块级格式化上下文） 是页面布局中的一个独立渲染区域，其内部元素的布局规则与外部元素隔离，常用于解决边距重叠、浮动元素影响等问题
  • BFC布局规则BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

  特点

  1. 内部元素垂直排列，垂直间距由 margin 决定。
  2. 计算 BFC 高度时，浮动元素也会参与计算（解决父元素高度塌陷）
  3. BFC 区域不会与浮动元素重叠

  触发bfc条件

  1. 根元素（<html>）
  2. 浮动元素（float 不为 none）
  3. 绝对定位元素（position 为 absolute 或 fixed）
  4. overflow 值非 visible（如 hidden、auto、scroll）
  5. 弹性布局（display: flex/inline-flex）或网格布局（display: grid）

  解决常用问题

  • 解决外边距重叠
  • 清除浮动导致的高度坍塌
  • 阻止浮动元素覆盖
  • 隔离独立布局