CSS-02

css-02

一、块级元素，行级元素，行级块元素

1.块元素独占一行。block

2.行元素的宽度是由内容决定的。inline
   行元素不能手动设置宽高

3.行级块 元素，可以设置宽高，也可以在一行显示。inline-block

二、选择器

1.全局选择器

* {  
     /*通配符*/  
  }

2.群组选择器

选择器1，选择器2，……{ 
	属性名：属性值 
	}

3.层次选择器

1、后代选择器   空格
2、子代选择器  >  
3、相邻兄弟  +      
4、通用兄弟  ~        同级的兄弟

4.属性选择器 [ ]

​ 1）E[title] 只有属性名

​ 2）E(title=“value”)属性名和值

​ 3）E(title ~=“value”)值为多个词中间有空格隔开，属性值在其中

​ 4）E(title^=“value”)属性值是以value开头

​ 5）E(title $=“value”) 属性值是以value结束

​ 6）E(title *=“value”)属性值包含value

​ 7）E(title |=“value”)属性值为value或value-

5.伪类选择器

5.1.结构型伪类选择器：

​ E:nth-child(n) 元素的第n个相同元素

5.2.UI伪类选择器：

​ E:link{ 属性:属性名}初始状态默认状态

​ E:visited{属性:属性名}超链接被访问后的状态

​ E:hover{属性:属性名}超链接鼠标悬浮时的状态

​ E:active{属性:属性名}超链接被激活时的状态

三、盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

bottom :     设置元素的下边距
left   :     设置元素的左边距
right  :     设置元素的右边距
top    :     设置元素的上边距

参数个数：

一个参数时   上右下左、
两个参数时   上下、左右
三个参数时   上、右左、下
四个参数时   上、右、下、左

怪异盒模型 (ie盒模型)

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box：border和padding不计算入width之内
border-box：border和padding计算入width之内

四、定位

CSS 有三种基本的定位机制：普通流、浮动和定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。

1、相对定位 (position:relative)

1.如果没有偏移量（left/right/top/bottom）就是正常显示；
2.根据原来的位置进行偏移

2、绝对定位 (position:absolute)

1.使用绝对定位，
  有定位祖先元素就相对于定位祖先元素发生偏移，
  没有定位祖先元素就会相对于整个文档发生偏移（绝对   相对  固定）
2.使元素脱离文档流

3、固定定位 (position:fixed)

1.相对于整个窗口进行定位，不会受滚动条影响
2.使元素脱离文档流

4、粘性定位 sticky

最初会被当作是relative，相对于原来的位置进行偏移；
一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。

五、浮动

1.概述：

1.1.使当前元素脱离普通流，相当于浮动起来一样
1.2.浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。
1.3.浮动属性：用float属性
   属性值有两个，为right和left两个属性值。

left：左浮动
right：右浮动

浮动和定位没有父元素的情况下，是针对当前窗口进行浮动的

2.使用浮动常出现的问题

1)对附近的元素布局造成改变，使得布局混乱（覆盖）
2)因为元素脱离了文档流，会造成一种坍塌的现象。

3.清除浮动

3.1. 方式一

给前面一个父元素设置高度
缺点：元素容器不可以自适应高度

3.2. 方式二

给使用浮动的元素和后面添加一个div
缺点：成本太高，添加了一个元素，难维护

3.3. 方式三：

通过设置css的样式： overflow：hidden

通过overflow:hidden;来清除浮动，
其实overflow无形中对父容器高度进行了测量，是设置父容器高度的另一种方法。

overflow作用： 将超出标签范围的内容拆剪掉

3.4.方式四：

after伪类：对子元素的after伪类进行设置。