1. margin负值的运用
2. 文字围绕浮动元素
3. 行内块的巧妙运用
4. CSS三角强化
1. margin负值运用
经过边框盒子变色: 例子:
标签:hover {
border: 1px solid 颜色;
}
2. 文字围绕浮动元素巧妙运用
利用浮动元素不会压住文字的特性
首先 准备一个大盒子 里面拥有文字 然后 在左侧的图片添加浮动
3. 行内块的巧妙运用
这类布局可以借助行内块的特性 首先是行内块本身就有大小
其次给父盒子添加 text-align: center 完成布局
通过 < 是小于号
> 是大于号 来实现
直角三角形的实现:
把上边框的宽度调大
左边和下边的边框宽度设置为 0
注: border-color: 上 右 下 左(顺时针)
CSS初始化 (也称为 CSSreset)
CSS需要初始化的原因是 不同浏览器对有些标签的默认值是不同的, 为了消除不同浏览器对HTML文本呈现的差异, 照顾浏览器的兼容, 我们需要对CSS初始化
每个网页都必须首先进行CSS初始化
Unicode编码字体:
把中文字体的名称用相应的 Unicode编码来代替, 这样就可以有效避免浏览器解释CSS代码的时候出现乱码问题
比如:
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
下面的例子: 京东的初始化
把我们所有标签的内外边距清零
* {
margin:0;
padding:0
}
把 em 和 i 让斜体的文字都不倾斜
em,i {
font-style:normal
}
去掉 li 的小圆点
li {
list-style:none
}
img {
border:0; // border 0 是为了照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题
取消图片底侧右空白缝隙的问题
vertical-align:middle
}
当我们的鼠标经过 button 按钮的时候, 鼠标变成小手
button {
cursor:pointer
}
a {
color:#666;text-decoration:none
}
a:hover {
color:#c81623
}
body {
-webkit-font-smoothing:antialiased;background-color:#fff; //这个是CSS3里面的抗锯齿形(放大时候会出现不清晰的锯齿形) 让文字更加清晰
font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}
5B8B\4F53 是通过Unicoude编码来实现的
用来隐藏元素
.hide,.none {
display:none
}
用来清除浮动
.clearfix:after {
visibility:hidden;
clear:both;
display:block;
content:".";height:0
}