html&css扫盲篇

XHTML规则

1、使用恰当的文档声明和命名空间

2、使用meta标签声明内容类型

3、属性值使用引号

4、为属性赋值

5、元素、属性小写

6、关闭标签

7、空标签使用空格斜杆结束

8、注释内容不要使用双下划线

9、确保小于号及和号是<、&

css选择器

id选择器不能以数字开头,因为mozilia/firefox不支持

css3选择器分类

基本选择器

元素选择器、id选择器、类选择器、通配选择器、群组选择器

层次选择器

后代选择器E F
子代选择器E>F

相邻兄弟选择器

E+F
通用选择器E~F

相邻兄弟选择器指的是匹配紧邻在后面的元素

通用选择器指的是匹配E元素后面的所有F元素

常见的伪类选择器

链接伪类选择器

:link 常用于链接锚点,匹配未被访问过的元素

:visited 常用于链接锚点,匹配已经被访问过了的元素

用户行为伪类选择器

:active 匹配被激活状态的元素

:hover 匹配处于悬浮状态的元素

:focus 匹配获取了焦点的元素

链接伪类选择器、用户行为伪类选择器统称动态伪类选择器

动态伪类有一个顺序问题(简记:LoVe HA):https://blog.csdn.net/u013853928/article/details/52036825

目标选择器

:target 选择被相关url所指向的元素

结构伪类选择器

结构伪类名字看起来有点复杂,很多时候记得了,过一段时间又忘记了哪个跟哪个,但是最近我发现了一个在名字上的规律,把结构伪类归为一个组一个组地记,思绪撸清晰了许多。

第一组

E:first-child

E:nth-child(n) (n>=0)

E:nth-child(odd) 奇数项

E:nth-child(even) 偶数项

E:last-child

E:nth-last-child(n)(n>=1)

E:nth-last-child(odd) 偶数项

E:nth-last-child(even) 奇数项

第二组(死磕到底,只为找到你)

E:first-of-type

E:nth-of-type(n) (n>=0)

E:last-of-type

E:nth-last-of-type(n)(n>=1)

第三组

E:only-child

E:only-of-type

比如first-child、last-child、nth-child(n)这些可以归为一组记,E:first-child会匹配E元素的父元素里面的第一个E元素,需要注意的是,如果父元素里面的第一个子元素不是E元素,那么是不会匹配到的。同样的规则,来到E:last-child这里,它表示的是匹配E元素的父元素里面的最后一个E元素,如果父元素的最后一个子元素不是E元素,那么是不会匹配到的。同样的,在E:nth-child(n)这里,它表示的是匹配E元素的父元素里面的第n个E元素,如果父元素里面的第n个元素不是E元素,那么也是不会匹配到的。除了以上这三个,在这一组里还有一个E:nth-last-child,其实这个就很简单了,我们知道:last-child是从最后数到的第一个,那么:nth-last-child(n)就会是从最后面开始数起的第n个元素,但这里需要 注意的是,从头开始数的,n都是从0开始计数;从最后开始数的,n都是从1开始计数。除此之外,n就是n,字母不能用其他的来代替,比如不能写成E:nth-child(s)。n还可以是odd、even,我们都知道,odd表示的是奇数,even表示的是偶数。

<div class="box1">
    <h2>:first-child选择器</h2>
    <ul class="list1">
        <li>1</li>
        <li class="li2">2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

<style>
        .box1 li:first-child{
            color: red;
        }
</style>

效果:

<div>
    <h2>:first-child选择器</h2>
    <p> 
        如果是.li2:first-child是不会匹配到的,因为.li2对应的元素不是其父元素的第一个子元素
    </p>
    <ul class="list1">
        <li>1</li>
        <li class="li2">2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

    <style>
        .box1 .li2:first-child{
            color: red;
        }
    </style>

效果:

相信很多人也会像我一样,时常搞混第一组和第二组(分得清楚的就当这段不存在直接跳过吧),但是弄清楚了它们的真面目后,我们就不用害怕分不清楚它们谁是谁了。

再来到第二组这里,E:first-of-type匹配E元素的父元素里面的类型为E的第一个元素,E:first-of-type与E:first-child的区别在哪里呢,区别就在于,E:first-of-type表示在父元素里面,第一个子元素不是E类型的,没关系呀,继续往下找,直到找到一个是E类型的,而且是第一个。E:first-child它只认第一个子元素,如果第一个子元素不是E类型,那么就不会继续往下找了。如果理解了E:first-of-type与E:first-child的区别,那么,顺理成章地,E:nth-of-type(n)与E:nth-child(n)、E:last-of-type与E:last-child、E:nth-last-of-type(n)与E:nth-last-child(n)的区别就容易了。

E:last-of-type表示匹配E元素的父元素里面的类型为E的最后一个元素。

E:nth-of-type(n)表示匹配E元素的父元素里面的类型为E的第n个元素。

E:nth-last-of-type(n)表示匹配E元素的父元素里面的类型为E的倒数第n个元素。

第三组,E:only-child指的是匹配E元素的父元素里面的唯一E元素,且E元素是父元素的唯一一个子元素,换句话,E是父元素的“独生子女”。E:only-of-type指的是匹配E元素的父元素里面的类型唯一的E元素,父元素不一定只有一个子元素,但是E类型的只能是一个。

除了以上的这些结构伪类选择器,其实还有如下几个

E:empty 表示匹配E的父元素里面的空元素,空元素表示的是没有嵌套任何标签和内容的标签

E:not(子元素F)  否定伪类选择器  匹配所有除子元素F外的所有E元素

E:root 匹配E元素所在文档根元素,html文档的根元素始终是html,所以也表示html

伪元素

E::first-line 匹配E元素的第一行

E::first-letter 匹配E元素的第一个字符

E::after 在E元素后面插入子元素,可用于清除浮动

(ps:清除浮动的原理可以看看这篇博文)

https://www.cnblogs.com/nxl0908/p/7245460.html

1、在父元素后面添加伪元素,实现清除浮动
<div class="wrap">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box3"></div>
</div>

<style>
    .box{width: 100px; height: 100px; float: left;}
    .box1{background: red;}
    .box2{background: blue;}
    .wrap:after{
        content: '';
        height: 0;
        visibility: hidden;
        display: block;
        clear: both;
    }
    .wrap{zoom:1}/*兼容ie*/
</style>

2、其他清除浮动的方法
(1)父元素设置高度
(2)父元素也清除浮动
(3)父元素创建BFC   overflow: hidden
(4)结尾处添加标签,.box3{clear:both}

E::before 在E元素前面插入子元素

属性选择器

element[attribulte="value"]    有某个属性值的element元素

element[attribulte~="value"]     包含某个单词的属性值的element元素

element[attribulte|="value"]     以某个单词开头的属性值的element元素

element[attribulte*="value"]      包含某部分字母的属性值的element元素

element[attribulte^="value"]    以...开头的属性值的element元素

element[attribulte$="value"]    以...结尾的属性值的element元素

background-position: x y

简写顺序:

background: color image repeat attachment position

文本对齐

text-align: center || left || right || justify 块级元素

vertical-align: middle  常用于设置块级元素对垂直居中,设置父元素display: table;子元素display: table-cell;vertical-align: middle;

文本缩进

text-indent  只对块级元素有效,行内元素无效,如果行内元素需要设置缩进,可以使用padding属性。

盒子模型

box-sizing: content-box(默认) || border-box (ie盒模型)

使用ie盒模型时,border、padding、width三者一起作为容器的宽度。

border-box这个用法很巧妙,在很多时候我们定死了容器的百分比宽度,抑或者长度值宽度吧,再设置边框、内边距后,很容易出现容器位置不够的情况,这时设置盒子模型为border-box就解决了问题,只是这种方法要牺牲一下实际的高、宽度大小。。

padding对行内元素有效,margin对行内元素无效。

 

相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页