DAY1，记录自己之CSS选择器，布局

来源：互联网发布：收银员练习软件编辑：程序博客网时间：2024/06/07 03:34

好吧，回炉重造的正式第一天，css选择器分好多种，真的，以前只知道怎么用不知道叫什么，也不知道权重，总之就是知道有这么个东西，但是意思是什么，为什么就不清除了，所以，从头开始。

1.选择器

选择器有标签选择器，类选择器，id选择器，伪类选择器，还有什么子代，后代，多元素，并列，在我感觉就都是那4种的组合方式。
1.1类选择器
标签上有class，在css样式中的表达是一个点。比如： .span
1.2id选择器
标签上有设id 在css样式中的表达是#。比如： #div1
1.3 标签选择器
在css样式中直接就可以用标签名直接写。比如： p
1.4伪类选择器
：hover 意思是选择鼠标指针浮动在其上的元素，并设置其样式。当鼠标移动到相应元素上的时候，元素的样式会发生改变，这时候用的就是伪类选择器。比如：a:hover

2.权重和!important

选择器，不得不提到的就是权重，权重等于重要性的一个表示
标签的权重是1，类选择器的权重是10，id选择器的权重是100，这里有个特殊的东西
！important
举个例子

  <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            #div1{                width:200px;                height:200px;                background: red;                font-size:50px;            }            #div2{                border: 1px solid #000;                font-size: 30px !important;            }        </style>    </head>    <body>        <div id="div1">            我是div1                <div id="div2">                    我是div2                </div>        </div>    </body></html>

这个就是用了！important的显示结果，可以看出，用了之后把div2的字体大小有先级提到了最高，这样div2的字体大小样式就不会随着div1的字体大小样式而变化

回到权重上来，样式展示出来的优先级是，越接近标签有先级最高，这样就可以给三种css写入方式排个序
写在标签上的 > 内联样式 > 外联样式
权重，在我看来体现在内联样式和外联样式的时候更清楚，在外联样式中，我们有两个a的样式写入，第一个a是全局的a ，代表body里所有a标签的样式，第二个a是在id选择器下的，类选择器中的a标签。代码如下：
a{
font-size:30px;
}
#div1 .span1 a{
font-size:50px;
}
第二个a标签里的字体样式就会是50px，而不是30px 意思就是不会随着第一个a标签中的样式而改变
这里就体现一个权重，，一开始的时候就说了标签的权重是1，类选择器的权重是10，id选择器的权重是100，那么好了，上面说的第一个a，他就是一个标签选择器，那权重就是1，第二个a，他是id选择器下的类选择器里的a标签，这个权重就是 100+10+1=111。这就好像游戏一样，别人111级的等级，你只有1级的等级，在别人选择谁一起打副本的时候肯定选择的是别人而不是你，因为别人等级高啊，换句话说，权重就是这么个意思，就是拿来衡量优先级的一个度量。
ps: !important的权重就相当于无限大

3.布局

（1）float——浮动
理解浮动原理可以更好的理解布局，浮动是指所对应元素向上漂浮，脑子里有个立体的感觉，在一个只能放下两个箱子的盒子里，第一个箱子向上抬起，那么第二个箱子是不是有空间可以往上挪了呢？同样的道理，我们都知道，div是块元素，他很霸道，独占一行，当页面上有两个div时，两个div是上下排列的，

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            #div1, #div2, #div3{                /*float: left;*/            }        </style>    </head>    <body>        <div id="div1">容器1；</div>        <div id="div2">容器2；</div>        <div id="div3">容器3；</div>    </body></html>

这里写图片描述

然后我给他们设置浮动

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            #div1, #div2, #div3{                float: left;            }        </style>    </head>    <body>        <div id="div1">容器1；</div>        <div id="div2">容器2；</div>        <div id="div3">容器3；</div>    </body></html>

这里写图片描述

这样3个div就能在一排显示了

（2）clear——清除浮动

清除浮动是在浮动的基础上再提升一点，当我们想要容器2到第二排的时候，容器一和容器三保持在第一行的时候，我们就要用到清除浮动，具体做法如下：

  <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            #div1{             float:left;            }            #div2{            float:left;            clear:both;            }        </style>    </head>    <body>        <div id="div1">容器1；</div>        <div id="div2">容器2；</div>        <div id="div3">容器3；</div>    </body></html>

这里写图片描述

（3）overflow——溢出控制
用overflow属性控制其大小永远在长宽在100px以内的
显示效果；

    <div style="width: 100px;height:100px; overflow:hidden;background: red;">            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw            weqweqeqeqeqeqweqweqweqweqweqweqweqweqw        </div>

这里写图片描述

（4）position——定位

绝对定位：absolute

简单粗暴的直接上代码：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <style>        #div1{            width:100px;            height:100px;            position:absolute;            top:20px;            left:20px;            background: red;        }        #div2{            width:100px;            height:100px;            position:absolute;            top:20px;            left:140px;            background: blue;        }        #div3{            width:100px;            height:100px;            position:absolute;            top:20px;            left:260px;            background: green;        }    </style>    <body>        <div id="div1"></div>        <div id="div2"></div>        <div id="div3"></div>    </body></html>

这里写图片描述

相对定位：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            #div1{                width:100px;                height:100px;                position: relative;                top:20px;                left:20px;                background: red;            }            #div2{               width:100px;               height: 100px;               position:relative;               top:-80px;               left:140px;               background: green;            }            #div3{                width:100px;                height:100px;                position:relative;                top:-180px;                left:260px;                background:blue;            }        </style>    </head>    <body style="border:1px solid #aaa">        <div id="div1"></div>        <div id="div2"></div>        <div id="div3"></div>    </body></html>

这里写图片描述

解释以后再发，有点累了。。。。。。

这里展示的是同样的展现，用不同的写法写出来的

阅读全文

0 0