CSS笔记-1

1. 选择器

组选择器

p1,p2,p3{
    font-size:10px;
    color:red;
}

<div>
    <p1>this is p1</p1>
    <p1>this is p2</p1>
    <p1>this is p3</p1>
</div>

标签选择器

格式：

#idType{
    /* ID选择器  只能使用一次 */
    font-size: 20px;
    color: yellow;
}

<div id="idType">ID选择器</div>

类选择器

格式：

.classType{
    /* 类选择器  能使用多次 */
    font-size: 25px;
    color: green;
}

<div class="clssType">类选择器</div>

后代选择器

//只有对 p1的后代span标签内容起作用，其他的标签span不起作用
p1 span{
    color:red;
} 

<h1>标题：<span>此处不起作用</span></h1>
<p1>内容：<span>此处后代选择器起作用</span></p1>

子选择器

只对直接子标签起作用

p2 > sp{
    color:red;
}

<p2>
<!-- 直接子元素，颜色改变 -->
    <sp>222</sp>
        <p3>
 <!-- 此处的为第二代子元素不会改变颜色 -->
            <sp>333</sp>
        </p3>
</p2>

CSS的盒子模型

1. 边框(border)
   
   • dashed(虚线)
   • dotted(点线)
   • solid(实线)
2. 外边距(margin)
3. 内边距(padding)
   

CSS布局模型

1. 流动模型(Flow)
2. 浮动模型(Float)
3. 层模型(Layer)

流动模型

网页默认的排布模型，内联元素在同一行。块级元素单独占一行。块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

浮动模型

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

/* 浮动模型 */

div{
    width:100px;
    height:100px;
    border:2px red dotted;

}
#div1{float:right;}
#div2{float:left;}

<div id="div1">left</div>
<div id="div2">right</div>

层模型

什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。

• 绝对定位(position: absolute)
• 相对定位(position: relative)
• 固定定位(position: fixed)
• 绝对定位(position: absolute)

绝对定位(position: absolute)

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

/* 层模型--绝对定位 */
#div3{
    position:absolute;
    top:20px;
    right:100px;
}

<div id="div3">绝对定位</div>

相对定位(position: relative)

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
以前的位置

/* 层模型--相对定位 */
#div4{
    position:relative;
    left:100px;
    top:50px; 
}

<div id="div4">相对定位，这时原来的位置</div>

固定定位(position: fixed)

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同

/* 层模型--固定位置 ，类似于广告条，滚动条拖动，但是位置始终不变*/
#div5{
    position:fixed;
    right:0px;
    bottom:0px;
}

<div id="div5">固定定位fixed，类似于广告条</div>

Relative和Absolute组合使用

两个要注意的点：
1. 参照定位的元素必须是相对定位元素的前辈元素
2. 参照定位的元素必须加入position:relative;

组合定位的时候父元素必须是relative子元素是absolute

/* Relative 和 Absolute 组合使用*/
#box1{
    position:relative;
    width:200px;
    height:200px;          
}
#box2{
    position:absolute;
    top:50px;
    left:50px;         
}

<div id="box1">
    <div id="box2"></div>
</div>