2020-08-28

选择器和页面布局

什么是选择器？

选择器：描述后面的样式是加到那些目标，或者说根据某个

1. 元素选择器

   Div{background-color:red}

   2.id选择器

   根据元素的ID属性选择

   书写格式： #idname{xxxx}

   #username{font-size：25px}

   3.类选择器

   根据元素的class属性来选择

   书写格式：classname{xxxxx}

   .passwd{font-size：20px}

   4.属性选择器

   根据属性的特征来选择应用样式的目标，从这个意义上来讲，它包含了id选择器和类选择器

   【title】：选择设置了title属性的元素

   【title=“tt‘】选择了title属性等于”tt“的元素

   【title^=“tt”】选择了title属性以“tt”开头的元素

   【title$=“tt”】选择了title属性以“tt”结尾的元素

   【title~=”tt“】包含完整单词tt的元素

   【title=“tt”】包含tt的元素*

   5.关系选择器

   根据元素之间的家族关系来选择目标

   6.伪元素，伪类选择器

   伪元素：其效果等同于增加一个元素，所以称之为伪元素

   伪类：其效果等同于增加一个类

   7.组合选择器

   多个选择器如果想应用同一个样式，可以用逗号隔开

布局

文档流

所谓文档流就是元素按照从上到下，从左到右来排列

定位

默认的文档流很多时候不能满足我们的要求，那么我们就需要跟多的布局手段，这个时候我们就需要定位了

定位方式：static，fixed，relative，absolute

Static 静态定位（默认）

无定位，元素正常出现在（文档流）中

不受left，right，top，bottom的影响

Relative 相对定位

绝对定位

固定定位

Z-index

为了处理层叠式事件，我们需要一个等级划分

浮动

通过设置float使得元素从原本的文档流中脱离出来，就像浮动着一样

定位总结：

标准文档流：按照从左到右，自上而下的方式排列元素

1. 如果想要改变默认的布局方式，就需要用到relative，Absolute，fixed等定位方式
2. relative是相对于原来的位置进行偏移
3. absolute是相对于它的父容器（上一级）进行偏移，但是它的父容器也必须不是默认定位（static），否则的话，会一直顶在网页的最顶部
4. fixed是相对于整个页面进行偏移
5. relative不会从标准文档里脱离，但是absolute和fixed都会从文档流中脱离出来