![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
一书一进步
luoluolun
这个作者很懒,什么都没留下…
展开
-
《精彩绝伦的CSS》——选择器(三)特殊性和重要性
三、特殊性和重要性 1、这本书中将css的选择器特殊性(个人喜欢叫做优先级)定义为三种: a.元素描述符(如div)贡献:0,0,0,1; b.每个类、伪类或者属性描述符贡献:0,0,1,0; c.每个ID描述符贡献:0,1,0,0;用以下几个例子帮助理解: div ul ul li 0,0,0,4 4个元素描述符 body #mai原创 2017-04-16 17:18:23 · 450 阅读 · 0 评论 -
《精彩绝伦的CSS》——布局(四)清除浮动
四、清除浮动1、清除浮动最最简单的方式就是在文档中插入一个元素,并设置它的clear属性。 div class="colum one">...div> div class="colum two">...div> div class="colum three">...div> br class="clearfix"> 这里的br元素是关键,它会把自身以及后面跟随的任何元素都放置原创 2017-04-17 12:14:06 · 191 阅读 · 0 评论 -
《精彩绝伦的CSS》——布局(三)遏制浮动
三、遏制浮动若一个容器中的元素全部采用浮动,则该容器如果没有自适应包裹内容其高度就会为0。如下:div#container{border: 2px dashed gray;background-color: #9AC;}div.colum{float: left;width:28%; padding: 0 1%;margin: 0 1%;原创 2017-04-17 11:21:10 · 344 阅读 · 0 评论 -
《精彩绝伦的CSS》——布局(二)居中块状框
二、居中块状框最容易理解的就是,给一个固定宽度的父元素内的子元素居中,只需确定子元素宽度,接着计算子元素左右需留出多少空白用子元素的外边距或者父元素的内边距都可以轻松解决。如:div#contain{width:800px;}div#main{width:760px;margin:0 20px;}还有一种情况是,有一个固定宽度的元素,但不知道容器有多大。这时仍可以使用外边距实现原创 2017-04-17 03:40:01 · 233 阅读 · 0 评论 -
《精彩绝伦的CSS》——布局(一)用轮廓代替边框
一、用轮廓代替边框(outline)平时布局时,习惯用border来看布局效果,但是border有个缺点就是border参与布局,而接下来要讲的outline则不会。创建布局时,可以像下面这样使布局块的放置位置可视化div{outline:1px dashed red;}效果:其实。。并看不出有什么不同。但还是要说轮廓的特点的:首先,轮廓必然是环绕着元素的,并且在元素周原创 2017-04-17 03:03:21 · 581 阅读 · 0 评论 -
CSS——“凸排列表”
我们知道要想给元素实现“首行缩进”功能只需加上:text-index:2em;即可实现。而“凸排列表”也是同样原理:ul{text-indent: -2em;list-style: none;}以上即可实现列表的凸排列表,注意样式中包含了list-style:none这一条,如果没有这一条每个列表项就不会被凸排,且文本会跟列表标记重合。当然,我们可以凸排任何东西,包括段落、标题、d原创 2017-04-17 02:54:19 · 394 阅读 · 0 评论 -
《精彩绝伦的CSS》——提示(三)让元素“消失”
三、让元素消失1、抑制元素的显示:display:none;.hide{display:none;}应用了hide类的元素,就像不存在一样,不会对布局有任何影响。然而这样子做会有两个陷阱,一个潜在的,一个固有的。潜在的就是,如果通过js将display设为none那么想复原时该怎么做,因为原显示值可能是inline或者block又或者都不是,有个原创 2017-04-17 02:13:40 · 479 阅读 · 0 评论 -
《精彩绝伦的CSS》——提示(四)打印样式
四、打印样式原创 2017-04-16 23:03:50 · 167 阅读 · 0 评论 -
《精彩绝伦的CSS》——提示(二)无单位的行高值
二、无单位的行高值行高值即可接受无单位的数值,也可使用带单位的行高值——尽管一般情况下不推荐这么做那么怎么区别这两者的关系呢?当一个元素定义了有单位的行高值,例如1em或者100%时,就会将计算后的行高值传给全部的后代元素,不只是子元素(但如果后代元素设置了行高值就另当别论了)。若设置的是无单位的行高值,例如:1时,那么传给后代的就是这个“换算系数”(比如一个乘数),而不是计算后的原创 2017-04-16 22:05:13 · 330 阅读 · 0 评论 -
《精彩绝伦的CSS》——提示(一)属性值排序
一、属性值排序大多数允许使用多个关键字的CSS属性都允许以任何顺序书写关键字,但是一些属性要求以特定顺序进行书写,比如下面这几个1、调整字体值的顺序: font: ;在定义字体属性时必须同时包含字体大小(font-size)和字体族(font-family),并且按照既定的顺序进行书写,如果顺序颠倒或者漏掉了一个,则现代浏览器都会直接忽略这条声明。此外,如果包含其他关键字,则它们全原创 2017-04-16 21:29:24 · 199 阅读 · 0 评论 -
《精彩绝伦的CSS》——选择器(五)多种选择方式
五、多种选择方式 1、元素类型选择器 2、类选择器 3、id选择器 4、通用选择器(*)——匹配文档中所有元素 个人经常喜欢用该选择器做一下简单的兼容如: *{ margin:0; padding:0; } 但建议还是用一些规范的兼容设置,如: html, body, div, span, applet, object, iframe, h1,原创 2017-04-16 21:17:02 · 356 阅读 · 0 评论 -
《精彩绝伦的CSS》——选择器(一)简写属性值
四、简写属性值 属性值的简写在使用时很方便,但如果省略了部分关键属性时,缺失部分则会使用该属性的默认值。原创 2017-04-16 17:47:49 · 314 阅读 · 0 评论 -
《精彩绝伦的CSS》——选择器(一)伪类与伪元素
一、伪类与伪元素伪类与伪元素的区别在于影响文档的方式不同,伪类就像给文档元素添加类,而伪元素效果就像将元素插入到了文档中。eg:h1:hover{font-size:250%;} h1>媚媚你好!h1> h1::first-letter{font-size: 250%;} h1>媚媚你好!h1>下面列出主要的伪类和伪元素1、伪类(pseudo-class原创 2017-04-16 10:33:10 · 186 阅读 · 0 评论 -
《精彩绝伦的CSS》——选择器(二)为“目标”元素添加样式(:target)
二、为“目标”元素添加样式(:target)有时候我们希望指向文档中某一具体片段时,通常会使用到锚点(anchor)来实现,比如跳转到某一页面的id为LLL-target的元素:head to LLL-target其中url为该页面具体url,这样点击该a标签就会自动跳转到指定元素这样的话会有个不够人性化的方面,就是跳转过去不会有任何提示,视觉上该元素并没有突出显示,对于这种情况就原创 2017-04-16 16:40:23 · 787 阅读 · 0 评论 -
《精彩绝伦的CSS》——布局(五)两栏布局
五、两栏布局使两栏文本并排在一起非常简单,使他们浮动即可,通过float:left;和float:right;可控制某一栏置左还是置右原创 2017-04-17 12:36:24 · 278 阅读 · 0 评论