选择器和页面布局
什么是选择器?
选择器:描述后面的样式是加到那些目标,或者说根据某个
-
元素选择器
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使得元素从原本的文档流中脱离出来,就像浮动着一样
定位总结:
标准文档流:按照从左到右,自上而下的方式排列元素
- 如果想要改变默认的布局方式,就需要用到relative,Absolute,fixed等定位方式
- relative是相对于原来的位置进行偏移
- absolute是相对于它的父容器(上一级)进行偏移,但是它的父容器也必须不是默认定位(static),否则的话,会一直顶在网页的最顶部
- fixed是相对于整个页面进行偏移
- relative不会从标准文档里脱离,但是absolute和fixed都会从文档流中脱离出来