css

时间：2016-08-05 13:36:32 阅读：237 评论：0 收藏：0 [点我收藏+]

标签：

今天将学习到的相关知识整理一下记录下来

1、样式初始化，因为浏览器的不同显示的样式效果也不同，所以需要将效果不同的样式给替换或置空

  1 @charset "UTF-8";
  2 /*设置默认编码集*/
  3 /*css 初始化start */
  4 
  5 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
  6     margin: 0;
  7     padding: 0;
  8 }
  9 
 10 /*各浏览器显示不同，去掉边框等默认样式*/
 11 fieldset, img, input, button {
 12     border: none;
 13     padding: 0;
 14     margin: 0;
 15     outline-style: none;
 16 }
 17 
 18 ul, ol {
 19     list-style: none;
 20 }
 21 
 22 input {
 23     padding-top: 0;
 24     padding-bottom: 0;
 25     font-family: "SimSun", "宋体";
 26 }
 27 
 28 select, input, textarea {
 29     font-size: 12px;
 30     margin: 0;
 31 }
 32 
 33 /*防止拖动 影响布局*/
 34 textarea {
 35     resize: none;
 36 }
 37 
 38 /*去掉行内替换元素空白缝隙*/
 39 img {
 40     border: 0;
 41     vertical-align: middle;
 42 }
 43 
 44 table {
 45     border-collapse: collapse;
 46 }
 47 
 48 body {
 49     font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*宋体 unicode */
 50     color: #666;
 51     background: #fff;
 52 }
 53 
 54 /*清除浮动*/
 55 .clearfix:before, .clearfix:after {
 56     content: "";
 57     display: table;
 58 }
 59 
 60 .clearfix:after {
 61     clear: both;
 62 }
 63 
 64 .clearfix {
 65     *zoom: 1; /*IE/7/6*/
 66 }
 67 
 68 a {
 69     color: #666;
 70     text-decoration: none;
 71 }
 72 
 73 a:hover {
 74     color: #C81623;
 75 }
 76 
 77 h1, h2, h3, h4, h5, h6 {
 78     text-decoration: none;
 79     font-weight: normal;
 80     font-size: 100%;
 81 }
 82 
 83 /*废物利用*/
 84 s, i, em {
 85     font-style: normal;
 86     text-decoration: none;
 87 }
 88 
 89 /*公共类*/
 90 .w {
 91     /*版心 提取 */
 92     width: 1210px;
 93     margin: 0 auto;
 94 }
 95 
 96 .fl {
 97     float: left;
 98 }
 99 
100 .fr {
101     float: right;
102 }
103 
104 .al {
105     text-align: left;
106 }
107 
108 .ac {
109     text-align: center;
110 }
111 
112 .ar {
113     text-align: right;
114 }
115 
116 .hide {
117     display: none;
118 }
119 
120 /*css 初始化end*/

View Code

2、i s em标签的废物利用

i标签本来是italic意大利斜体的标签但是后来结构样式分离这种表示样式的标签就废弃了

其实span标签完全可以，但是i标签正好是icon图标这个英文单词的首字母，并且只有一个字母所以简单。最初是bootstrap将其用于表示图标，后来渐渐传开，再后来s 和 em 这些也用来表示图标了。

但是这些标签有自身的默认样式，在使用的时候要把默认样式清除（样式初始化中已经清楚）

3、小三角的详细步骤

可以看到很多网站上有类似小三角的图标或符号，它是由对◇图案的遮挡来实现的

先确定内部内容的大小

然后确定遮罩盒子的大小定位后宽高才可以生效 overflow:hidden后才能遮住

最后调整s的位置盒子大小以及 i的位置

可以看如下Demo效果显示为技术分享：

 1 html:
 2 
 3 <li class="dropdown">
 4         送至：北京
 5         <i><s>◇</s></i>
 6 </li>
 7 
 8 css:
 9 .dropdown{
10       position: relative;
11       padding-right: 25px;
12 }
13 .dropdown i{
14     width: 15px;
15     height: 9px;
16     overflow:hidden;
17     position: absolute;
18     top: 13px;
19     right: 6px;
20 }
21 .dropdown s{
22     font: 400 15px/15px consolas;
23     color: #6A6A6A;
24     position: absolute;
25     top: -7px;
26     left: 0px;
27 }

View Code

4、精灵图：

主要讲述好处：

减少http请求，提高页面的性能，这是CSS Sprites最大的优点

减少图片的字节，多张图片合并成1张图片的字节总是小于多张图片的字节总和

只需对一张集合的图片命名就可以了，不需要对每一个小元素进行命名。

更换风格方便，只需要在一张图片上修改颜色或样式，整个网页的风格就可以改变

注意：以显示的位置为参照物，图片移动。x越往右越大 y越往下越大，向上移动是y是负的。

5、清除浮动

在需要清除浮动的元素中加入clearfix类即可

 1 /*清除浮动*/
 2 .clearfix:before, .clearfix:after {
 3     content: "";
 4     display: table;
 5 }/*在有该类的元素内部元素的前面和后面添加元素*/
 6 
 7 .clearfix:after {
 8     clear: both;
 9 }*只要after两侧有浮动元素，after就会跑到最下面，从而撑开带有该类名的父盒子*/
10 
11 .clearfix {
12     *zoom: 1; /*IE/7/6*/
13 }

View Code

css

标签：

原文地址：http://www.cnblogs.com/jingh/p/5740802.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行