前端css笔记（pink老师）

css

css书写顺序

• 自适应屏幕

  html {

  width: 100%;

  height: 100%;

  display: table;

  }

  body {

  display: table-cell;

  }

  用了这个方法以后，如果希望页面内的盒子也适应屏幕大小，则使用以下方法，会根据父亲的宽高计算出该盒子的宽高

  width:xx%;

  height:xx%;

  margin和padding也可以这样用，padding可以撑开盒子，某些时候这样使用很方便。

  padding:100%;

• 兼容性适配 浏览器私有前缀

  

  兼容老版本，新版本无需添加。

• li去除小点,a去除下划线,去除input聚焦时的默认框

  list-style:none;//li去除小点
  

  outline:none;//去除input聚焦时的默认框
  

  • 元素的显示模式（块级，行内，行内块）

    

• 表单域form

  点击后可跳转到index.html并传递锚点链接 name=输入内容

  <form action="index.html">
          用户名<input type="text" name="name">
          <input type="submit" value="登录">
   </form>
  

  location对象的search可获得?name=输入内容

• 定位的注意情况

  

  行内元素:绝对，固定定位→可设置宽高

  块级元素:绝对固定定位→无宽高默认内容大小

  浮动，绝对，固定定位→不会外边距合并

  浮动→压住下面标准流盒子，但不会压住文字，文字围绕浮动元素(盒子设置动画时不用浮动，避免文字挤在一起)；

  绝对定位→压住所有内容

• display，visiblilty，overflow隐藏元素

  display:none不占有位置

  visibility:hidden占有位置

  overflow:auto需要时候添加滚动条；scroll右边和底部都会出现滚动条；

• border,margin,padding的注意情况

  border（外部）和padding(内部）会撑大盒子。

  box-sizing: border-box;//使border在盒子内部
  

  margin:0 auto;//常用于盒子水平居中
  

  margin-left添加border的大小可以消除border带来的边框重叠变粗问题。

  如果需要hover边框变色效果，由于右边框会被压住，则需提高hover盒子的层级。（加相对定位保留原来位置并压住标准流。或z-index。）

• 三角形的border实现

  

  

• textarea和input取消轮廓

  outline:none;//取消轮廓
  

  textarea设置resize:none使其不能被鼠标拖动缩放。

  padding撑开盒子更加美观。

• vertical-align:middle文字，img垂直居中

  行内元素，行内块元素(img，textarea等)默认基线对齐。

  直接加border底部有空白缝隙(底线与基线间的缝隙) → ①.vertical-align:bottom使底线对齐。②display:block改为块级元素独占一行

  middle使文字垂直居中。

  

  除此之外，行内行内块元素还可以line-height:设置成行高使上下居中，text-align:center;水平居中

• 文字溢出省略号显示

  单行溢出文字省略号显示:

  white-space:nowrap;//不换行
  overflow:hidden;//溢出隐藏
  text-overflow:ellipsis;//省略号
  

  多行文字:(适用于webkit内核与移动端)

  

• text-decoration文字穿过线效果，a去除下划线

  text-decoration:none;
  text-decoration:line-through;
  

• background居中对齐

  background:url() no-repeat center center;
  

• 精灵图使用

  1.精灵图计算宽高时需把图片缩小一半，把图片盒子用width，height缩小为需要的部分大小

  2.引入背景图

  background:url() norepeat -x -y
  

  3.background-size固定为精灵图原来宽度的一半，高度为auto

• H5CSS3特殊属性

  • H5标签

    1.语义化标签

    

    2.video为兼容尽量使用mp4格式

    

    3.为兼容尽量使用mp3格式

    兼容问题：添加子标签顺次执行

  • contenteditable，user-modify使div可编辑

    contenteditable:true;//使盒子可编辑类似于input
    

    user-modify: read-only;
    user-modify: read-write;
    user-modify: write-only;//可以输入富文本
    user-modify: read-write-plaintext-only;//只能输入纯文本
    

    read-write和read-write-plaintext-only会让元素表现得像个文本域一样，可以focus（）以及输入内容

    contenteditable="plaintext-only"//编辑区只能键入纯文本
    

    兼容性：

    

  • input新属性

    type属性实现表单验证。（button，checkbox，color，date，datetime，datetime-localemail，file，hidden，image，month，number，password，radio，range，reset，search，submit，tel，text，time，url，week）

    

    其他属性

    

  • 属性选择器（类，属性，伪类选择器权重为10）

    

    

    

  • 结构伪类选择器

    

    如：

    ul li:first-child{}
    ul li:nth-child(even){}//选出偶数孩子，可以用于隔行变色
    ul li:nth-child(odd){}//选出奇数孩子
    ul li:nth-child(n){}//选出所有孩子
    ul li:nth-child(2n){}//选出所有偶数孩子
    

    

  • 伪元素选择器与字体图标（伪元素与标签选择器权重为1）

    ::before在元素内部前插入

    ::after在元素内部后插入

    

    字体图标的使用：

    1. 在https://icomoon.io/下载icomoon文件夹
    2. 打开demo.html找到字体图标框框或代号
    3. 打开style.css复制@font-face{}引入style标签中
    4. 字体图标框框或代号位置使用font-family与@font-face中保持一致

    鼠标悬浮出现罩遮代码实现

    

  • box-sizing使padding和border不撑大盒子

    默认值为content-box,是css3的盒子模型

    box-sizing:border-box;//前提：padding和border不超过width
    box-sizing:content-box;//传统盒子模型
    

    可以加入*{}初始化

  • filter:blur(5px);模糊处理

    数值越大越模糊

  • width:calc(100% - 30px)不要忘记空格

    • • • /都可以用

  • transition过渡

    

    运动曲线：ease（渐慢），linear（匀速），ease-in（加速），ease-in-out（先加速后减速）

  • transform 2D+3D转换（多属性位移translate写最前）

    1.translate

    transform:translate(x,y);
    transform:translate3D(x,y,z);//xyz不可省略
    transform:translateZ(px);//前提:透视，可改变盒子大小
    

    不会影响其他盒子的位置，对行内元素无效；

    可以用于对绝对定位居中（百分比相对于自身宽高）

    

    2.rotate旋转

    transform:rotate(45deg);//顺时针旋转45度
    transform-origin:x y;//x,y → 像素，百分数，top bottom，center等
    transform:rotateX();
    transform:rotateY();
    transform:rotateZ();
    transform:rotate3d(x,y,z,deg);//x,y,z=0或1
    

    transform:rotate(45deg);默认绕元素中心点顺时针旋转，设置负值时逆时针旋转

    3.scale缩放

    transform:scale(x,y);//宽度变为x倍，高度变为y倍
    transform:scale(x);//宽高都变为x倍
    

    x，y为倍数，不跟单位

    不影响其他盒子，transform-origin改变缩放中心点，默认为几何中心

  • perspective透视 transform-style:preserve-3d;3D呈现

    都需要写在父盒子上

    perspective单位为px，值越小，盒子越大

  • keyframes动画及属性

    

    0%和100%等价于from和to

    

    

  • background-size背景恰好铺满盒

    background-size:500px;//如果只有一个参数，则为宽度，高度等比缩放
    background-size:500px 500px;//图片高度和宽度
    background-size:cover;//相对父盒子铺满，图片可能显示不全
    background-size:contain;//相对父盒子铺满，图片全显示
    

• 背景颜色渐变

  必须添加私有前缀，移动端用webkit前缀即可。

  background: -webkit-linear-gradient(left, #a0328c, #e44d51);
      /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, #a0328c, #e44d51);
      /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, #a0328c, #e44d51);
      /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #a0328c, #e44d51);
      /* 标准的语法 */
  

• 按钮无法被点击

  点击事件不生效

  this.diabled=true;
  

• a阻止链接跳转

  javascript:void(0);
  javascript:;