前端学习之路-css选择器和布局

时间:2022-12-12 17:45:26

css 选择器就是控制html中的标签的属性类似android 中控件的属性:

css 选择器大致分为以下几种:

1.标签选择器例如:p{};{}前就是选择器

2.ID选择器 例如<div id ="gsc">祝大家鸡年大吉</div> #gsc{ color:red}

3.class 选择器 eg:<div  class=""gsc>祝大家鸡年大吉</div> .gsc{ color:red}

学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点:

相同点:可以应用于任何元素
不同点:

1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

下面的代码是正确的(完整代码见右侧代码编辑器)

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
p{color:red;}
p{color:green;}
p{color:pink;}
多种样式会覆盖,类似变量
布局:
1.默认流动布局,从上至下,并列的标签左右对齐()类似android 中线性布局
2.float 浮动布局 常用于块状标签如div span 等
3 .层模型有三种形式:


1、绝对定位(position: absolute)类似android 中绝对布局 
div{
    width:200px;
    height:200px;
border:2px red solid;
position:absolute;
    right:100px;
    top:20px;
}


2、相对定位(position: relative)类似android 中相对布局




3、固定定位(position: fixed)