【摘要】 css-02
一、块级元素，行级元素，行级块元素
1.块元素独占一行。block
2.行元素的宽度是由内容决定的。inline    行元素不能手动设置宽高
3.行级块 元素，可以设置宽高，也可以在一行显示。inline-block
二、选择器
1.全局选择器
* { /*通配符*/ }
123
2.群组选择器
选择器1，选择器2，……{
属性名：…

css-02

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

1.块元素独占一行。block

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

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

二、选择器

1.全局选择器

* { /*通配符*/ }

  
 

  
1
  
2
  
3
 

2.群组选择器

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

  
 

  
1
  
2
  
3
 

3.层次选择器

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

  
 

  
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 : 设置元素的上边距

  
 

  
1
  
2
  
3
  
4
 

参数个数：

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

  
 

  
1
  
2
  
3
  
4
 

怪异盒模型 (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.根据原来的位置进行偏移

  
 

  
1
  
2
 

2、绝对定位 (position:absolute)

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

  
 

  
1
  
2
  
3
  
4
 

3、固定定位 (position:fixed)

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

  
 

  
1
  
2
 

4、粘性定位 sticky

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

  
 

  
1
  
2
 

五、浮动

1.概述：

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

left：左浮动
right：右浮动

  
 

  
1
  
2
 

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

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

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

3.清除浮动

3.1. 方式一

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

  
 

  
1
  
2
 

3.2. 方式二

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

  
 

  
1
  
2
 

3.3. 方式三：

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

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

  
 

  
1
  
2
  
3
  
4
 

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

3.4.方式四：

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

  
 

  
1
 

文章来源: blog.csdn.net，作者：小牧要学习，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/muhaokai/article/details/115694357