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

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)