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 常用插件
- 代码压缩
