CSS常用属性

1. 引用

  <link rel="stylesheet" href="style.css"/>

2. 常用标签属性

• ul

margin:0;
padding:0;
list-style: none;//去除原点

• li

li{
  transition:background-color .5s ease-in;//背景色过渡
}

li:hover{
  background-color:#bbb;
}

• a (:hover)

text-decoration: none;//取消下划线

• input

padding:0;//input存在默认的内边距
outline: none;//去除聚焦时的蓝色边框

• button

cusor:pointer;//鼠标经过变为小手样式

• img

 width: 100%;//根据父容器的大小进行缩放
 height·: auto;//根据自身的高度进行缩放
 vertical-align: top;/*图片默认和文字的基线对齐，底部会产生几像素的空白*/

• 字体和文本

div {
    //字体
    font-style:normal;//normal,italic
    font-weight:400;//normal
    font-size:16px;//一定要带单位
    font-family:"微软雅黑";//一般带特殊符号需要加引号
    line-height:24px//一般比字号大7，8个像素
    //文本
    color:#ff0000 //文本颜色，等价于#f00  red  rgb(255,0,0)
    text-indent:2em;//段落首行缩进两个字（1em等于一个字的距离）
    text-decoration:none;//取消装饰
    text-align:center;//left right center 让div中的文字居中对齐（让盒子中的内容居中）
}
//字体样式连写
div {
  font:normal 400 16px "微软雅黑"  //顺序不能改变，size和family属性不能省略
}

• 边框和内边距

div {
  border-collapse:collapse;//合并相邻边框
  border:1px solid red %50;//四边粗细 四边样式 四边颜色 圆角大小(css3)
  padding:10px 20px 30px 40px;//上10px 右20px 下30px 左40px(顺时针) 
}

• 盒子阴影

div {
  box-shadow:2px 2px 2px 2px red;//阴影x轴 阴影y轴 模糊程度 阴影大小 颜色
}

• 清除浮动

//方法1
.clear {
  clear: both;
  }

//方法2
.div{
  overflow: hidden; 
}

//方法3
.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
}
.clearfix {
  /* 触发 hasLayout */ 
  *zoom: 1;//加上*号 ie6，ie7识别 
}

//方法4
.clearfix:before,.clearfix:after {
                  content: "";
                  display: block;
                  clear: both;
}
.clearfix {
                * zoom: 1;
 }

3.模块标签常用写法

• logo写法(有利于seo)

 <div class="logo">
      <h1>
           <a href="#" title="京东网">京东</a>
       </h1>
</div>

4. 快捷键

标签 + tab
标签 * 3

5. 技巧及注意事项

5.1 居中：

1.行内、行内块元素可以当做文本来看(通常用来做水平居中等布局操作)
2.如果盒子的高度和单行文本的高度相同，可以使文本垂直居中(如导航栏标签垂直居中)
3.块元素水平居中的方法设置左右margin为auto

div {
  width:100px;
  text-aligin:center;//块元素中的行内元素可以达到居中效果
  line-height:100px;//块元素中的文本垂直居中
  margin:0 auto;//块元素居中
}

5.2 合并：

1.块元素的外边距会发生合并的现象，并且会取较大的一方的值(所有浏览器现象相同，只设置其中一方的margin就可以避免)
2.嵌套块元素垂直外边距合并(1.给父级设置1px的padding或者border 2.使用overflow属性)

5.3 定位：

1.子绝父相(孩子使用绝对定位的时候，父级一般会使用相对定位)

5.4 其他：

1.子级盒子默认会继承父级的宽高(子级此时设置padding不会撑开子级盒子)
2.行内块元素中的图片默认是和文字的基线对齐的(verticle-align:baseline;多用于img，input)

6 过渡

6 常用插件

1. 代码压缩