css 小总结

1. float闭合
    1)添加一个新的div子元素 clear:both
    2)父元素样式 overflow:auto;zoom:1;
    3)after伪类添加元素

div:after{
   display:block;
   clear:both;
   content:".";
   visibility:hidden;
   height:0;
}

2. IE不认识min-,父元素样式设置

height:auto!important;
height:150px;
min-height: 150px;

3. float的div在ie下margin加倍等问题

#box{
float:left;
width:100px;
margin:0 0 0 100px;
display:inline;
}

4. ul标签在FF下面默认有list-style和padding,所以为了兼容最好设置common的style

ul{
margin:0px;
padding:0px;
list-style:none;
}

5. 关于手型光标:

IE下cursor:pointer;而IE下是hand

6. css布局中的剧中问题

body {text-align: center;}
#center { margin-right: auto; margin-left: auto; }

7. css技巧

1)css简写

font: bold italic small-caps 1em/1.5em verdana,sans-serif;
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
border:5px solid red;

2)图片替换技巧

h1 {
background: url(/blog/widget-image.gif) no-repeat;
height: 100px;
text-indent: -2000px;
}

8. CSS3 过渡动画等

CSS3 边框[-o-, -webkit-, -moz-]border-radius, box-shadow, border-image
CSS3 背景background-size, background-origin

9. 多余的文字用"..."表示

.ellipsis{
width: 100px;
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}

10. 伪类的优缺点:

优点就是可以向某些选择器添加特殊的效果。伪类在IE上不识别。伪类和为元素的根本区别在于:它们是否创造了新元素。如果需要添加新元素加以识别则是为元素,反之只需要在既有元素上添加类别的就是伪类。如果不使用伪元素则需要添加另外的元素,如果不使用伪类则只需要添加一个class

用于向某些浏览器添加特殊的效果。
     伪类可用来表示一些元素的动态状态比如链接的各个状态,还可表示逻辑上存在但在文档树中无需标志的元素比如第一个段落p:first-child
     伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在但并不实际存在文档中,比如一段话的第一行p:first-line

伪类:

伪元素:

时间: 2024-10-17 21:53:00

css 小总结的相关文章

CSS小技巧

CSS 小技巧 总结的网络上的资源,以备自己后续参考... 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框… /* 添加边框 */ .nav li { border-right: 1px

css小案例:导航栏特效

css小案例:导航栏特效,实现如下图所示效果: 首先可以将html代码写出: 1 <nav class="cl-effect-1"> 2 <a href="#">Umbrella</a> 3 <a href="#">Ineffable</a> 4 <a href="#">Lilt</a> 5 <a href="#"&g

css小随笔(二)与通用样式

51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟css的标签,所以在没有接触通用样式之前很可能就是这两个板块就是两个不同的代码了,然后就会导致css文件里面的代码会非常的多,也会是比较混乱的,不能够清楚明了的看懂.而且应用的通用样式就是可以用一套代码来搞定各个类似板块,并且每个板块不同的地方仅仅需要微调就可以了.这样不仅仅使代码明了,而且还会很省事,

纯CSS小三角制作

无关的知识点 ① background-clip 属性规定背景的绘制区域. 1.padding-box:从padding区域(不含padding)开始向外裁剪背景. 2.border-box:从border区域(不含border)开始向外裁剪背景. 3.content-box:从content区域开始向外裁剪背景. 4.text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果. ② clip auto:对象无剪切rect(<number>|aut

css小细节罗列

有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样的代码来设置绝对的行高.但是当我们的需求改变,字体大小变动的时候,可能我们还需要再次改动行高,那么现在我们可以使用直接设置数字来设置行高,当我们使用纯数字来设置行高的时候,它相对于的是字体大小的倍数,也就是说下面的h4其实设置的行高也是12*2px就是24px.这样设置的好处是当我们在改变字体大小的

12个你未必知道的CSS小知识

虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方. 请注意,上面的代码里只使用了一个color属性,就是在body元素上,设置成了yellow.但是,你也看到了,所有这个页面上的东西都变成了黄色

css小技巧(1)

1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selection 选中文字时文字颜色和选中色 <!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-s

Css 小技巧总结

相对偏移 指定left top等属性就能够够完美控制一个元素的位置 如: position:relative; left:2px; 今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会把另一个框顶到下一行,这个时候就可以用margin-right:-2px;将右外距设置为负数来解决! css写表达式控制图片大小,当图片大小大于某一数值时,强制设置其宽 高为指定大小. img { max-width: 163px; width:expression(this.width > 163

【前端词典】几个有益的 CSS 小知识

今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTM

几个有益的 CSS 小知识

样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTML 标签来定义 CSS 的方式,换成使用具体的class. 浏览器