首页 > 任务二:1、选择器 2、连接集中状态的顺序 3、浮动的用发和原理 4、盒模型在IE和Google等不同浏览器的区别与联系...

任务二:1、选择器 2、连接集中状态的顺序 3、浮动的用发和原理 4、盒模型在IE和Google等不同浏览器的区别与联系...

1、选择器类型

标签选择器,类选择器,ID选择器,组合选择器,伪类和伪元素,属性选择器,子选择器,同胞选择器, :not()选择器

 

1、同胞选择器

相邻同胞标签: 

h2 + p{ color:red; }

选择每个h2标签后面的直接相邻的段落

(其中空格可选。(可选,就是可有可无,意思都一样))

同胞标签:

h2 ~ p{ color:red; }

选择属于h2同胞标签的所有p标签(和h2同一级的所有p)

 (~表示选择h2的所有同胞标签。其中空格可选)

 

2、属性选择器

img[title]  如

的css可以这样

a[ href=”#”]{ color:red; }

a[href^=”fttp://”]  ^表示以……开始

a[href$=”.pdf”]  $表示以……结束

 

2、    组合选择器 

(组合选择了不同类型的选择器,如下面的组合使用类选择器和类型选择器)

.architec .project em{ color:red; }  表示值选择在architec 这个类下面的project类中的 em元素

 

3、    子选择器

   body > h1 将选择body标签子标签里面的所有h1标签(注意子标签的定义)

 

(伪类选择器)

:first-child

:last-child

:nth-child (有着强大的功能)可以将表格隔行设置不同的样式,可以设置不同列表项目的不同样式

设置表格行颜色交替

tr: nth-child(odd){ background-color: #993366; }  (偶数行)

tr: nth-child(even){ background-color: #993366; }  (奇数行)

tr: nth-child(3n+2){ background-color: #993366; }  (从第2个元素开始,没3个元素选择一次)

 

2、链接状态的顺序

链接可能出现多种状态,并且晚出现的会覆盖前面的规则所以要注意多种状态出现的顺序,按照下面的顺序规则:link visited focus hover active  (缩写为LVFHA)

 

未完成任务:(周四完成,并更新上来)

1、  盒模型在IE goole等不同浏览器的使用和区别

2、  浮动的用法,原理

 (今天没完成。在改第一个页面。2016-01-07)

 

(补 之前没完成的任务  2016-01-17)

 

1 、盒模型在IE 等不同浏览器的使用和区别

(图片传不上来)

IE和W3C分别有一套盒子模型,Firefox中采用W3C标准模型,而IE中则采用Microsoft自己的标准,W3C标准认为,盒子的宽度仅仅是内容的宽度,而IE标准认为“内容+padding+border”才是盒子的宽度,所以在ie中盒子会比标准的多两个像素。

 

2、基本的浮动原理



任何元素 element 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动,事实上即使是像 span 和 strong 这样的行内置元素也可以很好地进行浮动。

任何申明为 float 的元素自动被设置为一个"块级元素", 这表示它可以具有申明的"width"和"height"属性。

浮动"从流程中被移除出来", 但是与绝对位置的元素不同,浮动是在他们前面的最后一个块元素之后直接被显示出来(就像盒子一样)。如果该浮动是在一个“行块”中,该浮动的上边界被放置在行块顶部的水平上。当除此以外,浮动与绝对元素相似,原先的块盒会完全忽略浮动。那些静态的块盒知识保持一个接一个地”跟随“,就好像没有浮动不在那里一样。

转载于:https://www.cnblogs.com/lal-fighting/p/5107484.html

更多相关:

  • 一,样式表分类 (1)内联样式。 --优先级最高,代码重复使用最差。 (当特殊的样式需要应用到单独某个元素时,可以使用。 直接在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。) (2)内嵌样式表。 --优先级别第二,不常用,代码重用性一般。 (当单个文件需要特别样式时可以使用内嵌样式表。在 head 部分通过

  • 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。   前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。   写在前面的话:   由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解。   如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你...

  • 通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果。Float的功能很强大,但是如果没有好好掌握而使用很可能会...

  • 栈stack:stack 后入先出(LIFO) q.top()获取栈顶元素(并不删除)q.pop()删除栈顶元素q.push(x)向栈中加入元素q.empty()判断栈是否为空 队列queue:先入先出(FIFO)   q.front()获取队首元素(并不删除)q.pop()删除队首元素q.push(x)向队列中加入元素q....

  • resize(),设置大小(size); reserve(),设置容量(capacity); size()是分配容器的内存大小,而capacity()只是设置容器容量大小,但并没有真正分配内存。 打个比方:正在建造的一辆公交车,车里面可以设置40个座椅(reserve(40);),这是它的容量,但并不是说它里面就有了40个座椅,只能说...

  • v-for="(index,$i) in total" :key="$i":style="{left:`${itemWidth*((index-1)%rowItemCount)}px`,top:`${itemHeight*(Math.ceil(index/rowItemCount)-1)}px`}" //total是显示总数量 //l...

  •   技巧一(推荐指数★★★★★) 采用top、right、bottom、left,可以不在乎父元素的宽度和高度,对GPU损耗低于技巧三,但是对浏览器内存的消耗高于技巧三 .子元素 {/*父元素需要position: relative|absolute;*/position: absolute;margin: auto;to...

  • 设计一个支持 push,pop,top 操作,并能在常数时间内检索到最小元素的栈。 push(x) – 将元素 x 推入栈中。pop() – 删除栈顶的元素。top() – 获取栈顶元素。getMin() – 检索栈中的最小元素。 示例: MinStack minStack = new MinStack(); minStack...