回炉重造七

勿

夜

1.同级别的第几个

:first-child 选中同级别中的第一个标签

:last-child 选中同级别中的最后一个标签

:nth-child(n) 选中同级别中的第n个标签

:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素中唯一的标签

注意点: 不区分类型

如:

p:first-child{

color:blue

}

我是h1

我是段落

我是div中的p

p:first-child这是要找到同级别的一个元素,

这个时候由于 "我是段落"的p标签前面有一个h1元素,这时候,h1是第一个开头的标签,它不是p没办法给它加效果,所以就产生不了效果

2.同级同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签

:last-of-type 选中同级别中同类型的最后一个标签

:nth-of-type(n) 选中同级别中同类型的第n个标签

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素中唯一类型的某个标签

3.其它用法

:nth-child(odd) 选中同级别中的所有奇数

:nth-child(even) 选中同级别中的所有偶数

:nth-child(xn+y)

x和y是用户自定义的, 而n是一个计数器, 从0开始递增

:nth-of-type(odd) 选中同级别中同类型的所有奇数

:nth-of-type(even) 选中同级别中同类型的所有偶数

:nth-of-type(xn+y)

x和y是用户自定义的, 而n是一个计数器, 从0开始递增

odd是奇数 even是偶数

div和span有什么区别?

div会单独的占领一行,而span不会单独占领一行

2.div是一个容器级的标签, 而span是一个文本级的标签

容器级的标签和文本级的标签的区别?

容器级的标签中可以嵌套其它所有的标签

常见容器级的标签: div h ul ol dl li dt dd ...

文本级的标签中只能嵌套文字/图片/超链接

常见文本级的标签:span p buis strong em ins del ...

注意点:

不用刻意去记忆哪些标签是文本级的哪些标签是容器级, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套(ul>li, ol>li , dl>dt+dd)

在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级

在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素(其实还有一类, 行内块级)显示模式

容器级都是块级元素,除了p其他文本级元素都是行内元素

背景定位

background-position: 水平方向 垂直方向;控制背景图片的位置

取值:

具体的方位名词

水平方向: left center right

垂直方向: top center bottom

具体的像素

例如: background-position: 100px 200px;

记住一定要写单位, 也就是一定要写px

记住具体的像素是可以接收负数的

应用场景:(重要)

当图片比较大的时候, 可以通过定位属性保证图片永远居中显示,那么这样的话可以使重要的信息永远在中间显示完美

注意:在前端中的x,y轴数值跟数学的不一样,在前端,x往右越大,y往下越大.

背景属性缩写的格式:

background:背景颜色 背景图片 平铺方式 关联方式 定位方式;

快捷键:

bg+ background: #fff url() 0 0 no-repeat;

background属性中,任何一个属性都可以省略

什么是背景关联方式？(作为了解用的不多)

默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式

如何修改背景关联方式？

在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的

格式

background-attachment：scroll;

取值：

scroll 默认值， 会随着滚动条的滚动而滚动

fixed 不会随着滚动条的滚动而滚动

快速写标签方法:

如:div.box$*3

将会生成:三个class名字从box1到box3的div

插入图片对比使用背景图来说:会使服务器请求很多数据,不利于网页上的优化,背景图使用雪碧图,精灵图,firework的使用(重要)

用background-position定位的方式减少请求服务器的次数,提高用户体验