一名前端小白的学习笔记(1/N)--css（包括csss，具体支持查询手册）

css层叠样式表(级联样式表)

目的
- 设置html页面中的文本内容（字体，大小，对齐方式）
- 图形的外形（height，width，border，margin,padding）
- 版面的布局
- 外观显示样式
代码风格
- 紧凑式
- 展开式（推荐）
- 目的
  - 设置html页面中的文本内容（字体，大小，对齐方式）
  - 图形的外形（height，width，border，margin,padding）
  - 版面的布局
  - 外观显示样式
- 代码风格
  - 紧凑式
  - 展开式（推荐）
- 代码大小写
  - 样式选择器样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写
- 特殊情况下a里边可以放块级元素，但是最好给a转换一下块级元素
代码大小写
- 样式选择器样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写
书写方式
- 内联样式（行内式）
  - 只能控制当前的标签和嵌套在其中的标签，造成代码冗余
  - <标签名 style="键值对">内容
  - 缺点：没有实现样式与结构相分离
- 内部样式表（内嵌样式表）
  - 称为内嵌式的原因
    - 将css代码集中写在html文档的head标签中，并用style标签定义
    - 只能控制当前页面
    - 缺点:缺点没有实现彻底分离
- 外部样式表
  - 称为链入式
    - 将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中
    - 通过link将外部样式表文件链接到html文件中
    - - rel
        
        定义当前文档和被链接文档之间的关系
      - type
        
        定义所链接文档的类型
    - 缺点:需要引入
css基础选择器
- css标签选择器
  - 标签选择器是指HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式
  - 优点:能快速为页面中同类型的标签统一样式
  - 缺点:不能设计差异化样式
  - 标签名 {键值对;}
- 选择器的作用
  - 找到特定的HTML页面元素
- 类选择器
  - .类名 {键值对;}
  - <标签名 class="类名">
  - 优点:可以为元素定义单独或相同的样式，可以选择一个或多个标签
  - 注意命名规范
  - 特殊用法：多类名
- id选择器
  - #id名 {键值对;}
  - <标签名 id=“id名”>
  - 元素的id值是唯一的.只能对应文档中的某一个具体元素
  - 同一个页面中，不运行相同名字的id对象出现，但是允许相同名字的class
- *通配符选择器
  - .* {键值对;}
  - 会匹配页面所有的元素。降低页面响应速度，不建议随便使用
- 不使用无具体语定义的标签选择器div span
css复合选择器
- 后代选择器(包含选择器)
  - 用来选择元素或元素组的子孙后代
  - 父级子级 { 键值对;}
  - 当标签发生嵌套式，内层标签就成为外层标签的后代
  - 可以选择任何包含在内的标签
- 子元素选择器
  - 子元素选择器只能作为某元素子元素（亲儿子）的元素
  - 父级>子级 {键值对;}
  - 亲儿子亲儿子亲儿子
- 交集选择器
  - 标签选择器.class选择器 {键值对;}
  - 即...又...
- 并集选择器
  - 某些选择器定义的相同样式，可以利用并集选择器，让代码更简洁
  - 通常用于集体声明
  - 任何形式的选择器都可以作为并集选择器的一部分
- 伪类选择器
  - 标签名:link未访问
  - 标签名:visited已访问
  - 标签名:hover鼠标移动到标签上
  - 标签名:active选定的
  - 标签名X:first-child
    - 标签名X的父元素的第一个孩子是标签名X
  - 标签名X:nth-child(Y)
    - Y可以是数字，英文单词（odd奇数/even偶数）或表达式n（代表的元素的个数从0到结束，即全选）2n（偶数）2n+1（奇数）-n+5选择前五个
  - 标签名X:last-child（X）
    - 从后往前数
  - 标签名X:first-of-type
css字体样式属性
- font字体
  - font-size大小
  - font-family字体
    - 各种字体必须使用英文状态下的逗号隔开
    - 中文字体需要加英文状态下的引号
    - 英文字体一般不需要加引号
    - 当需要设置英文字体时，英文字体名必须位于中文字体名之前
    - 如果字体名包含空格、#、@等符号，该字体必须加英文状态下单引号或双引号
    - 尽量使用系统默认字体
    - Unicode字体
  - font-weight字体粗细
    - 400默认值normal
    - 700粗体bold
  - font-style字体风格
    - normal默认值
    - italic倾斜
  - font综合设置字体样式
    - 选择器 { font : font_style font-weight font-size/line-height font-family }
    - 必须保留font-size和font-family
  - font-family
    - name
    - 必需。规定字体的名称。
  - src
    - URL
    - 必需。定义字体文件的 URL。
  - font-stretch
    - normal
    - condensed
    - ultra-condensed
    - extra-condensed
    - semi-condensed
    - expanded
    - semi-expanded
    - extra-expanded
    - ultra-expanded
    - 可选。
    - 定义如何拉伸字体。默认是 "normal"。
  - font-style
    - normal
    - italic
    - oblique
    - 可选。
    - 定义字体的样式。默认是 "normal"。
  - font-weight
    - normal
    - bold
    - 100
    - 200
    - 300
    - 400
    - 500
    - 600
    - 700
    - 800
    - 900
    - 可选。
    - 定义字体的粗细。默认是 "normal"。
  - unicode-range
    - unicode-range
    - 可选。
    - 定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。
- css外观属性
  - color文本颜色
    - 预定义的颜色值
    - 十六进制
    - RGB代码
  - text-align文本水平对齐方式
    - left
    - right
    - center
    - 盒子内容居中对齐
  - text-indent首行缩进
  - text-decoration文本的装饰
    - none
    - underline
    - overline
    - line-through
- 行高line-height
  - 实现单行文本居中
    - 文字的高度等于盒子的高度
    - 如果行高大于高度文字会偏下
    - 如果行高小于高度文字会偏上
  - 测量行高
    - 基线到基线的距离
  - 行高=上距离+内容高度+下距离
- txet-shadow
  - 阴影水平偏移阴影垂直偏移阴影模糊值阴影颜色
标签显示模式display
- 块级元素block
  - div
  - h1-h6
  - tr
  - hr
  - p
  - dl
  - ul
  - ol
  - li
  - dt
  - dd
  - table
  - form
  - 可以设置宽高和内外边距
  - 宽度默认是父级元素的宽度的100%
  - 是一个容器和盒子，可以防止行内或者块级元素
- 行级元素inline
  - span
  - b和strong
  - u和ins
  - s和del
  - i和em
  - a
  - lable
  - 相邻行内元素在一行上，一行可以显示多个
  - 高宽直接设置是无效的
  - 默认宽度是塔本身内容的宽度
  - 行内元素只能容纳文本或者其他行内元素
  - 链接内不能再放链接
    - 这不是废话吗
  - 特殊情况下a里边可以放块级元素，但是最好给a转换一下块级元素
- 行内块元素inline-block
  - input
  - img
  - td
  - 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
  - 默认宽度就是它本身内容的宽度。
  - 高度，行高、外边距以及内边距都可以控制。
- 转换
css背景
- 背景颜色background-color:颜色值
  - 默认值transparent
- 背景图片background-image:none | url(url)
  - 可以多写，用，隔开，正常连写
- 背景平铺background-repeat
  - repeat纵向和横向
  - no-repeat不
  - repeat-x
  - repeat-y
- 背景位置background-position
  - length
    - 先x
    - 后y
    - 只有一个默认x, y默认居中对齐
  - position
- 背景附着background-attchment
  - scroll背景图像是随着对象内容滚动
  - fixed背景图像固定
- 背景图像的位置区域
  - background-origin
    - padding-box
    - content-box
    - border-box
- backgrounf-clip背景裁剪属性
  - 是从指定位置开始绘制
    - border-box
    - padding-box
    - content-box
- 背景简写
  - background: 背景颜色背景图片地址背景平铺背景滚动背景位置;
- 背景透明
  - rgba（x, x, x, y）
    - x从0-255
    - y从0-1
  - 半透明是指背景半透明，文字不透明
- CSS3渐变
  - 线性渐变
    - 默认（从上向下）
      - background: linear-gradient(direction, color-stop1, color-stop2, ...);
        
        direction: to 方位名词
        
        左右
        
        上下
        
        对角
      - background: linear-gradient(angle, color-stop1, color-stop2);
        
        角度是指水平线和渐变线的角度
      - background: linear-gradient(angle, color-stop1 百分比, color-stop2 百分比, color-stop3 百分比, color-stop4 百分比 ,color-stop5 百分比, color-stop6 百分比...)
        
        设置多个颜色节点,百分比表示渐变中图像占比
      - 渐变支持透明度(transparency),可用于创建逐渐变淡的效果
        
        使用rgba来定义颜色
      - 重复渐变效果
        
        repeating-linear-gradient() 函数
  - 径向渐变
    - 径向渐变由它的中心定义
    - background: radial-gradient(center, shape size, start-color, ..., last-color);
    - 默认渐变中心是center，渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
    - shape size：ellipse/circle
    - size 参数定义了渐变的大小。它可以是以下四个值：
      - closest-side
      - farthest-side
      - closest-corner
      - farthest-corner
    - repeating-radial-gradient() 函数用于重复径向渐变
css三大特性
- css层叠性
  - 所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
  - 冲突就近原则，不冲突你废什么话
- css继承性
  - 子承父业
  - font-
  - text-
  - line-
  - color
- css优先级
  - 定义css样式时，常出现两个或多个规则应用在同一元素上
    - 选择器相同，执行层叠性
    - 选择器不同时，出现优先级问题
  - 权重计算公式
    - 继承或者*
      - 0,0,0,0,
    - 每个元素(标签选择器)
      - 0,0,0,1
    - 每个类，伪类
      - 0,0,1,0
    - 每个ID
      - 0,1,0,0,
    - 每个行内样式style=""
      - 1,0,0,0
    - 每个!important重要的
      - 无穷大
    - 数位之间没有进制，级别之间不可超越
  - 权重叠加
  - 继承的权重是0
css注释
- /* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 "/*" 标记开始注释，在内容的结尾使用 "*/"结束。
盒子模型Box Model
- 边框
  - 边框综合设置
    - border:border-width || border-style || border-color
  - border-width
    - 定义边框粗细,单位是px
  - border-style
    - 边框样式
  - border-style
    - 边框颜色
  - border-radius:length
    - length为数值或百分比
  - none
    - 没有边框即忽略所有边框的宽度(默认值)
  - solid
    - 边框为单实线
  - dashed
    - 边框为虚线
  - dotted
    - 边框为点线
- 内边距padding
  - 指边框与内容之间的距离
  - 单值——上右下左
  - 双值——上下|左右
  - 三值——上|左右|下
  - 四值——上|右|下|左
  - 宽度
    - Element Height = content height + padding + border （Height为内容高度）
  - 高度
    - Element Width = content width + padding + border （Width为内容宽度）
  - 盒子的实际的大小
    - 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
  - padding撑大盒子,现width/height=原width/height-padding*对应
  - 如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子。
- 外边距margin
  - 盒子和盒子之间的距离
  - 上右下左同padding
  - 块级盒子水平居中
    - 盒子必须制定宽度
    - 左右的外边距都设置为auto
    - margin-:0 auto;,
  - 外边距合并
    - 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
    - 相邻块元素垂直外边距的合并
      - 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
      - 解决方法
        
        尽量给只给一个盒子添加margin值
    - 嵌套块元素垂直外边距的合并（塌陷）
      - 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框父元素的上外边距会与子元素的上外边距发生合并合并后的外边距为两者中的较大者
      - 解决方法
        
        可以为父元素定义上边框
        
        可以为父元素定义上内边距
        
        可以为父元素添加overflow:hidden
  - 盒子模型布局稳定性
    - width > padding > margin
- 盒子内的文字水平居中是text-align:center
  - 还可以让行内元素和行内块居中对齐
- 插入图片和背景图片区别
  - 背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过 background-position
  - 插入图片移动位置只能靠盒模型 padding margin
- 清除元素的默认内外间距
  - 为了更灵活方便的控制网页中的元素
- 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。
- box-shadow
  - h-shadow v-shadow blur spread color inset
    - 对象的阴影水平偏移量对象的阴影垂直偏移值阴影模糊值阴影外延值阴影的颜色· 内/外阴影
  - 前两个属性是必须写的，其余可以省略
- boeder-image
  - border-images连写
    - border-image-source
    - border-image-slice
    - border-image-width
    - border-image-outset
    - border-image-repeat
- 内容content
css属性规范
- 空格规范
  - 选择器与 { 之间必须包含空格
  - 属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格
- 选择器规范
  - 并集选择器，每个选择器声明必须独占一行
  - 一般情况情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确
- 属性规范
  - 属性定义必须另起一行
  - 属性定义后必须以分号结尾
css布局
- 普通流(标准流)
  - 块级元素会独占一行，从上向下顺序排列
  - 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
- 浮动
  - 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示
    - 可以实现盒子的左右对齐
      - 浮动最早是用来控制图片，实现文字环绕图片的效果
  - float: none | left | right
  - 脱标
    - 改变元素display属性，类似转换为行内块，但是块件没有间距
      - 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
  - 拓展
    - 浮动元素和父盒子的关系
      - 子盒子的浮动参照父盒子对齐
        
        不会与父盒子的边框重叠，也不会超过父盒子的内边距
    - 浮动元素与兄弟盒子的关系
      - 在一个父级盒子中，如果前一个兄弟盒子是
        
        浮动的，那么当前盒子会与前一个盒子的顶部对齐
        
        普通流的，那么当前盒子会显示在前一个兄弟盒子的下方
    - 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流
    - 如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题
    - 浮动如果不加边偏移，只会在原地浮动，不会移动
  - 清除浮动
    - 原因
      - 因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子
      - 不是清除浮动。是清除浮浮动的影响
    - 本质
      - 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
    - 方法
      - 额外标签法(隔墙法)
        
        - 优点：通俗易懂，书写方便 - 缺点：添加许多无意义的标签，结构化较差。
        
        是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如，或则其他标签br等亦可
      - 父级添加overflow属性方法
        
        可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
        
        优点：代码简洁缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
      - 使用after伪元素清除浮动
        
        .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 专有 */
        
        - 优点：符合闭合浮动思想结构语义化正确 - 缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
      - 使用双伪元素清除浮动
        
        .clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }
        
        - 优点：代码更简洁 - 缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
- 定位
  - 目的
    - 将盒子定在浏览器的某一个位置，让盒子自由的浮在别的盒子的上方，包括浮动和标准流
  - 绝对定位absolute
    - 如或有父元素但是父元素没有相对定位，根据父元素进行定位（子绝父相）
    - 脱标
    - 如果没有父元素或父元素没有定位（非相对定位），根据浏览器可视区域进行定位
    - 标注
    - 使盒子垂直水平居中
  - static静态
    - 静态定位，加了边偏移，无用
  - relative相对
    - 本身位置保留，不脱标
    - topleft正值向下向右，相对于本身的位置进行定位
  - 固定fixed
    - 只认浏览器的可视窗口
    - 脱标
    - 不随滚动条滚动
  - 模式转换
    - 浮动的元素，加了绝对定位的元素和固定定位的元素，可以实现模式转换
  - z-index
    - 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效
  - 定位是找边框进行定位，可以压住padding值
css高级技巧
- 元素的显示与隐藏
  - 目的·
    - 让一个元素在页面中消失或者显示出来
  - display显示
    - display:none隐藏对象
    - display:block显示元素
    - 隐藏之后，不再保留位置
  - visibility可见性
    - visibility:visible
    - visibility:hidden
    - 隐藏之后，继续保留原有位置
  - overflow溢出
    - visible不剪切内容也不添加滚动条
    - hidden不显示超过对象尺寸的内容，超出的部分隐藏掉
    - scroill不管超过内容否，总是显示滚动条
    - auto超出自动显示滚动条，不超出不显示滚动条
- css用户界面样式
  - 鼠标样式cursor
    - default默认
    - pointer小手
    - move移动
    - text文本
    - not-allowed禁止
  - 轮廓线
    - outline :outline-color || outline-style || outline-width
  - 防止拖拽文本域resize
- vertical-align垂直对齐
  - 只针对行内元素和行内块元素
  - baseline | top |middle |bottom
  - 不影响块级元素中的内容对齐
  - 特别是行内块元素,通常用来控制图片/表单与文字的对齐
- 去除图片底侧空白缝隙
  - 给img vertical-align:mddle | top | bottom
  - 给img添加display:block 转换为块级元素
- 溢出的文字省略号显示
  - white-space
    - normal默认处理方式
    - nowrap强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行
  - text-overflow文字溢出
    - clip不显示省略标记(...)，而是简单的裁切
    - ellipsis当对象内文本溢出时显示省略标记(...)
- 三部曲
  - /*1. 先强制一行内显示文本*/ white-space: nowrap; /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;.
css32D转换
- transform-origin转换中心
  - 百分比
  - 方位名词
  - 数值
  - 只写一个数值，第二个默认为50%
- tranlate
  - translate(数值/百分比)
  - 百分比默认相对于子级本身而言
- rotate
  - rotate(deg)
    - 角度正值为顺时针
      - 默认旋转中心点为元素的中心点
- scale（x,y）
  - 只写一个参数，第二个参数和第一个参数一样
  - 可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
    - 相对于修改宽高而言：宽高修改之后会其他盒子
- transform:translate() rotate() scale()...等（空格隔开多个·1转换）
  - 其转换会影响转换的效果（先旋转后转换坐标轴方向）
  - 注意注意注意：位移放在最前
- skew
- matrix
CSS3D转换
- translate3d(x,y,z)
  - translateX();
  - translateY();
  - translateZ();
- 视距
  - 眼睛到屏幕的距离
  - 视距与物体的大小成反比(近大远小)
- translateZ
  - 物体距屏幕的距离
  - Z轴距离与物体大小的关系成正比
- transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转 deg为角度
  - 自定义轴
- 3D呈现transform-style
  - 控制子元素是否开启三维立体环境。
  - transform-style: flat 子元素不开启3d立体空间默认的（flat：平的，平面）
  - transform-style: preserve-3d; 子元素开启立体空间 +-
  - 代码写给父级，但是影响的是子盒子
  - perspective是开启3D效果，transform-style: preserve-3d是保持3D效果
animation动画（关键帧）
- 设置变换的次数或者是无数次
- 动画序列
  - 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列
  - 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
  - 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
  - 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
- animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;
  - animation: name duration timing-function delay iteration-count direction fill-mode;
    - animation-time-function
      - linear
      - ease
      - ease-in
      - ease-out
      - ease-in-out
      - steps()
        
        指定了时间函数的间隔数量(步长)
    - animation-interation-count
      - infinite
    - animation-direction
      - normal默认值
      - reverse反向运行
      - alternate正-反-正
      - alternate-reverse反-正-反
    - animation-fill-mode
      - forwords
      - backwards
      - both
    - animation-play-state
      - running/paused
- 多个动画
  - 用逗号分开

一名前端小白的学习笔记(1/N)--css（包括csss，具体支持查询手册）

相关推荐