css必备知识

CSS看这一篇就够了

Css 标准 选择器 加各种样式的声明
26、 选择器 有 基础选择器 和 复合选择器
27、 标签选择器 标签名 作为选择器 p div h3
28、 id选择器 #类名定义 id=“类名定义”。
29、 类选择器 class=“nev”
30、 Css字体 font normal 字体粗细400 字体大小12px/- line-height字体行高 字体类型 微软雅黑；

• 31、 字体装饰 颜色color 文本对齐 text-align left/- center/right 文字装饰text-decoration ：none； - text-indent文本缩进2em 相对于 font-size 的单位
• 32、 内部样式表 在 style 内部 编写css内容
• 33、 行内样式表 行内 style 修饰文本style=“color：- pink”

34、 外部样式表link 某一个css文件
35、 后代选择器 ul li a span
36、 子元素选择器 ul> li 只选择亲儿子
37、 并集选择器 逗号相分割
38、 伪类选择器：hover 书写属性要注意顺序，但一般只用hover - lvha

• 39、 块元素 单独占一行

• 40、 行内元素 内部只能放文字或者行内元素 a 可以放块级元- 素，记得转换块级元素
• 41、 行内块元素 一行放几个 还可以设高和宽
• 42、 背景 颜色color 透明色 transparent 图片 image - url 平铺 no-repeat 位置 position x 坐标 y 坐标 方- 位名词 left right center top bottom
• 43、 如果写一个方位名词，第二个默认居中对齐
• 44、 精确坐标 ：第一个x坐标 第二个y 坐标。
• 45、 Background-position 20px 50px 。
• 46、 单写一个同理
• 47、 背景固定 background-attachment 制作视差滚动效果scroll- 滚动 fixed 固定
• 48、 背景符合写法 background：没有要求顺序 color url - no-repeat fixed center top
• 49、 背景颜色半透明 background：rgba（0，0，0，.3）
• 50、 盒子模型
• 51、 Margin 外边距 padding 内边距 border 边框 center 中- 心
• 52、 Border-radios 10px 10px 10px 10px 圆角边框
• 53、 Box-shaldow 10px 10px 10px 10px 盒子阴影
• 54、 浮动元素和标准流父盒子一起使用
• 55、 添加一个边框transparent 透明色 解决外边距合并问题，浮- 动，固定、绝对定位不会有外边距合并问题
• 56、 行内或者行内块 水平居中，给父元素加text-align：center - 就可以。
• 57、 块级元素 margin 0px auto

• padding 不会撑开盒子的情况

• 当盒子没有指定高或者宽的时候

margin

• 外边距 0px auto 上下为0 左右居中

嵌套元素塌陷

• 可以给父盒子指定一个边框

css 属性书写顺序

1. 布局定位属性 ： display/ position / float /visibility / overflow (建议display第一个写)
2. 自身属性 ： width / height / margin / padding / border / background
3. 文本属性 ： color / font / text-decoration / text-align / vertical-align / white-spacebreak-word
4. 其他属性 box-shadow

定位

1. 绝对定位 position：absulate

• 脱离标准流 不占有位置

2. 相对定位 relative

• 占有原来的位置 不脱标
• 一般情况 都是 子绝父相

3. 固定定位 fixed

• 固定在屏幕上，做一些视觉反差的效果 QQ首页

4. 定位叠放次序 z-index： 1；

• 只有定位的盒子才会有 这个属性
• 默认为auto ，值越大 越靠上显示 ，值可正可负

5. 绝对定位水平垂直居中

• left：50% ；
• margin-left：-一半的盒子宽度;
• top：50%
• margin-top：-一半的盒子高度;

6. 定位的特殊属性 和浮动类似

• 可以给行内块，行内元素 设置高度和宽度
• 块级元素添加绝对定位或者固定定位，不给高度和宽度，默认大小为内容的大小
• 脱标的盒子不会触发外边距塌陷 ： 浮动元素，绝对。固定定位的元素

元素的显示和隐藏

1. display :none 隐藏对象 隐藏后不占有原来的位置
2. display: block 显示对象，转换块级元素

visibility

• visible 元素可视
• hidden 元素隐藏 隐藏后继续占有原来的位置

overflow :hidden ;

• 超出部分隐藏
• auto 超出显示滚动条 ，不超出不显示滚动条

精灵图

1. 有效的减少了服务器发送请求的次数，提高了页面的加载速度
2. background: url(‘精灵图路径’) no-repeat x坐标 y坐标。

• 通常利用js for循环将精灵图放入 ，用Macromedia Fireworks 8 打开精灵图
  调为原来的一半大小，放大 ，量取对应精灵图的位置 ，最后用background-size 调整大小

• var index = i*64;

• sps[i].style.backgroundPosition= '0 -'+index+'px';
  

  icomoon 图标的使用

  • https://icomoon.io/app/
  • 将icomoon压缩包解压到和 html文件的同一级路径下
  • 直接调用即可
  1. 在文章或者块级盒子加 字体图标 ：
  • 在css文件中 加 content: “\e98d”; font-family: ‘icomoon’;
  • 在搜索框内加字体图标，直接写入placeholder内部
  2. 字体图标的追加和加载原理
  • 点开icomoon 网站 ，点击左上角图标，弹出对话框，选择xxxx.json 上传 。
  • 减少服务器压力 。响应一次

  css三角做法

  • width: 0; height: 0;
    - border: 10px solid transparent;
  • border-top-color: pink;
  • • 做好以后由定位固定到应有的位置
  2. 高级技巧
  • 下边框和左边框 变为 0 ，上边框边长并透明，通过定位放到应有的位置

  鼠标样式 cursor

  1. 默认 cursor: default
  2. 小手 pointer
  3. 移动 move
  4. 文本样式 text
  5. 鼠标禁止样式 not-allowed

表单轮廓消除和文本域防拖拽

1. outline-none;
2. resize-none;

vertical-align

• 用于设置图片或者表单（只对行内块元素有效）和文字垂直对齐
• baseline 默认 基线上
• top 元素顶端与最高元素的顶端对齐
• middle 把此元素放在父元素的中部
• bottom 把元素的顶端 与最低的元素的顶端对齐

  图片底部空白缝隙解决

  • 原因是行内块元素是和基线对齐
  • vertical-align middle top bottom(提倡使用的)
  • display:block;

  单行文本溢出省略号显示

  1. 强制一行显示 write-space:nowrap;
  2. 超出部分隐藏 overflow:hidden;
  3. 用省略号代替超出的部分 text-overflow :ellipsis;

  css初始化

  复制粘贴代码即可

  语义化标签

  1. header 头部标签
  2. nev 导航标签
  3. article 内容标签
  4. section 定义文档某个区域
  5. aside 侧边标签
  6. footer 尾部标签

  多媒体标签

  audio 音频标签

  • 谷歌禁用 自动播放 音频 autoplay
• loop = “loop” 循环播放
  • controls 属性 控制播放和其他按钮
    • autoplay=“autoplay” 视频就绪自动播放 （重点）

  视频标签

  • autoplay=“autoplay” 视频就绪自动播放 （重点）
  • muted= “muted” 静音播放
  • loop = “loop” 循环播放
  • controls 属性 控制播放和其他按钮
  • poster= “图片路径” ，未加载好视频时显示改图片

  • 必须在form表单域内

  • 新增表单控件

  • 重点记住 number 必须数字类型 tel 手机号码 search 搜索框 三个
  • 其他需要自查

  • 表单属性

  • placeholder 提示文本
  • submit 提交控件
  • 多文件提交控件 multiple

  css新选择器

  • nth-child 所有元素都会排列序号
  • odd 奇数 even 偶数
  • nth-child(n) n从0开始 遍历，直到最后一个，开始改变属性，只可以写n，不可以写其他字母
  • 2n 等价于 even
  • 2n+1 等价于 奇数 odd
  • n+5 从第五个开始（包括第五个）
  • -n+5 前五个

nth-of-type()

先看孩子是否对应，然后再选择，与nth-child 最大的不同

伪类选择器 新(文档中找不到)

• ::before 元素内部前面插入内容
• ::after 元素内部后面插入内容
  必须都有 content属性 权重为 1;

  css3 盒子模型

1. box-sizing 默认值为content-box 改变值 border-box
2. 可以忽略padding ，border 样式扩大盒子的大小，只以width为准。

css 过渡 ，经常和hover搭配使用

1. 属性： transition ： 要过渡的元素 花费时间 运动曲线 何时开始
2. 时间单位为秒
3. 曲线可以省略
   transition : width 0.5s ease(默认) 0s
   在div内添加 该样式 即可。
   div：hover {
   width：500px；
   }
   谁做过渡给谁加

多个样式写法

 transition : width 0.5s  ease(默认) 0s, height 0.5s 0s;
 也可以写 all 0.5s 。。。。