![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css小结
文章平均质量分 65
somnus_ly
当你对某种东西着迷之后,你会很努力的去追寻
展开
-
CSS优先级,优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .classCSS优先级权重计算法CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数!根据这四个级别出现的次数计算得到CSS的优先级。CSS原创 2014-10-18 18:09:30 · 432 阅读 · 0 评论 -
css link和@import标签的区别
差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再原创 2014-10-17 11:17:34 · 546 阅读 · 0 评论 -
标准盒模型和IE盒模型
大家好像对盒模型还不是很清楚,我来总结一下。盒模型分为两种:标准盒模型和怪异盒模型(可恶的IE浏览器)一.标准盒模型在标准盒模型中一个盒子实际所占的位置大小为:margin + padding + border + content(width,height)。在标准盒模型中一个盒子的大小为:padding + border + content(width,heigh原创 2014-10-10 18:45:33 · 900 阅读 · 0 评论 -
清除浮动的方法及其利弊
1、采用伪类:after进行后续空制的高度位零的伪类层清除 2、采用CSS overflow:auto的方式撑高 3、采用CSS overflow:hidden的方式产生怪异适应 4、采用display:table将对象变成table形式 5、采用div标签,以及css的clear属性 6、采用br标签,以及css的clear属性 7、采用br标签,原创 2014-10-22 15:33:21 · 531 阅读 · 0 评论 -
影响CSS渲染速度的写法与建议
一、*{} #zishu *{} 尽量避开由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签;*{margin:0; padding:0}建议的的解决办法:1、不要去使用生僻的标签转载 2014-09-16 15:13:35 · 423 阅读 · 0 评论 -
margin的一些技能
在一些页面底部,经常会使用到一些像关于我们之类的小导航。但是有的时候不需要用到最右边的竖线。可能有些童鞋会使用一个class来控制,但这并不是一个好技能。其实可以利用下margin负值来实现这样的效果。Examplesbody,ul,li,div{margin: 0;padding: 0;}ul,li{list-style: none;}.clearfix:after{cont原创 2014-09-01 18:54:44 · 356 阅读 · 0 评论 -
css编码规范(一)
注释规范1. 文件顶部注释(推荐使用) /**@descripition:*@author:*@update: */2. 模块注释(推荐使用) /*module: module1 by ...*/ /*module: module2 by... */ 模块注释必须单独写在一行3. 简单注释 单行注释:/* thi原创 2014-08-11 17:55:15 · 522 阅读 · 0 评论 -
垂直对齐vertical-align的一些认识
垂直对齐vertical-align与text-align对比对于vertical-align垂直对齐属性,w3c是这么解释的:vertical-align 属性会影响到由内联元素产生的行内框的垂直位置。原文请猛戳 w3c注解值:baseline | sub | super | top | text-top | middle | bottom | text-bottom原创 2014-09-18 11:34:56 · 869 阅读 · 0 评论 -
精通CSS(1)-图像背景那些事儿
1.背景图像先说一下background的用法。通常使用简写形式:background:背景色 背景图 重复方式 定位方式 图像位置,比如background: #00FF00 url(bgimage.gif) no-repeat fixed top;background-position有center属性,可以让背景居中。如果使用像素对背景定位,如b转载 2014-08-04 17:25:06 · 463 阅读 · 0 评论 -
精通CSS(2)-布局
css布局被认为是一个很麻烦的东西,可能它本身并不复杂,只是浏览器的不一致让人觉得很头疼。对于初学者来说或许框架能更快的得到想要的结果,但这种傻逼的使用方式蒙蔽了布局的内部原理,这是非常可怕的!所有css布局技术的根本都是3个基本概念:定位、浮动和外边距操控(喵了个咪的,怎么又是3个)。下面开始写代码(一定要自己写一遍)。1.浮动布局貌似浮动布局是最简单也是最可靠的,先来一转载 2014-08-04 17:28:20 · 445 阅读 · 0 评论 -
精通css(3) 盒模型,定位,浮动
终于到了css最重要的3个部分:盒模型,定位,浮动。先讲盒模型吧。1.盒模型概述页面上的每个元素都被看成一个矩形框。这个框由元素的内容、内边距、边框和外边距组成。内边距、边框和外边距都是可选的默认为0。但是许多元素由用户代理样式表设置外边距和内边距。所以不见的一定是0。在css中,width和height是指内容区域的宽度和高度,对边距没有影响。所以增加widt转载 2014-08-04 18:21:41 · 544 阅读 · 0 评论 -
精通css(4)bug和修复bug
浏览器bug和不一致的显示方式是大多数CSS开发人员面临的主要问题。本文就bug问题作一些学习。1.bug来源于自己如果你写的布局跟你想象的不太一致,不要以为这是浏览器bug,首先应该想象是不是自己的问题。要么手贱忘了写";"或者把单词拼错了,要么是自己对css理解还不够。2.IE中的bugIE上的bug无疑是众多浏览器中最多的,这主要是它的显示引擎使用转载 2014-08-04 18:23:25 · 429 阅读 · 0 评论 -
CSS编码规范(二)
属性编写顺序推荐的原创 2014-08-02 09:15:28 · 482 阅读 · 0 评论 -
CSS样式的优先级
在CSS中使得一个具体的元素获得一个样式定义属性集合,有以下几种方式:1、直接在元素中通过style来定义标签样式比如有以下代码通过style方式来定义了div标签的样式,这种方式定义样式在css规范中有很高的优先权(1000) 2、通过ID选择器来获取样式定义,有以下代码:然后我们定义了ID选择器的:#bgc{background:black}ID原创 2014-08-02 19:44:49 · 897 阅读 · 0 评论 -
css代码重构与优化
写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多。CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置,你不知道修改这行代码会有什么影响,所以如果有修改或增加新功能时,开发人员往往不敢去删除旧的冗余的代码,而保险地增加新代码,最终的坏处就是项目中的CSS会越来越多,最终陷入无底洞。CSS代码重原创 2016-01-26 11:07:42 · 427 阅读 · 0 评论