CSS进阶及浮动

最新推荐文章于 2024-07-11 17:28:05 发布

mxz_l

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量91

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/mxz_l/article/details/125183329

版权

1.精灵图

1.1 什么是精灵图

精灵图：图片整合技术（css sprites），就是将很多的小图片整合到一张大图上。使用的时候通过背景属性（背景图片的位置：background-position或使用背景复合属性background），调整在一个div框中显示的整个大图的某一点位置。

1.2 为什么要用精灵图

减少对服务器的请求次数，，提升页面的加载速度，减轻服务器压力。

2.标签分类

2.1 标签分类

（1）块状标签（block）：div p h1-h6 table ul li ol li hr 独占一行（宽度100%），默认撑满容器，可以设置宽高

div：块状标签，层级标签(页面的布局)，没有语义的标签，语义由我们开发者设置。默认宽度为 100% ，高度为0

（2）行内标签（inline）：span a br b u i sub sup 不能设置宽高，在一行内排列，靠内容撑起。

span: 行内标签行内级文本容器。

（3）行内块标签（inline-block），既有行内标签特征，又有块状标签特征，在一行显示，可以设置宽高。

2.2 display属性

html中的每一个标签都具有默认的display属性。标签是块状还是行内都由默认的display属性决定。

可以通过display属性的值来改变标签的类别。

display:none(不显示) block 块状 inline 行内 inline-block 行内块

3.CSS选择器进阶

3.1 全局选择器（*）

全局选择器匹配所有元素，一般用于重置样式，使用全局选择器清楚内外边距

<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
</style>

3.2 并集选择器

并集选择器用逗号分隔多个选择器，选择到的元素会使用相同的样式

<style type="text/css">
	/*并集选择器,h1,div,span元素标签中的文本内容均显示红色*/
	h1,div,span{
		color:red;
	}
  </style>

3.3 交集选择器

多个选择器条件同时满足。通过标签选择器和类选择器,id选择器进行组合

<style type="text/css">
	/*交集选择器:要同时满足多个选择器条件
	  h1.hs  : 前面是h1标签选择器，紧跟一个类选择器.hs,中间没有空格
			   两种选择器共同作用，这被称为交集选择器
	*/
	h1.hs{
		color:red;
	}
  </style>

3.4 子级选择器

子级选择器用大于号表示: div>b（会选中div下的所有孩子b标签）

3.5 后代选择器

后代选择器用空格表示: div b（会选中div下的所有b标签，不论是孩子还是孙子）

3.6 属性选择器

属性选择器：用中括号设置样式

<style type="text/css">
  input[type='text']{
		border:1px solid red;
	}

	[type='password']{
		border:1px solid blue;
	}  
</style>

3.7 伪类选择器

超链接元素伪类：

<style type="text/css">
	/*:link 默认的超链接样式*/
	a:link{
		font-size:20px;
		color:red;
	}
	/*:visited 访问过链接之后的样式*/
	a:visited{
		font-size:40px;
		color:black;
	}
	/*:hover 鼠标悬浮时超链接样式*/
	a:hover{
		font-size:30px;
		color:orange;
	}
	/*:active 鼠标点击的样式*/
	a:active{
		font-size:80px;
		color:purple;
	}
  </style>

超链接访问过后，浏览器中存在记录，所以显示的是访问过链接之后的样式，若要显示的是默认样式，则需清理浏览器的访问历史记录。

3.8 CSS特性

层叠性：如果多个选择器同时设置一个标签，如果设置的样式相同，按照优先级显示(权重)，否则，同时起作用。

继承性：子代元素会默认的继承父元素的样式（字体样式/文本样式），布局样式都不能继承。

4.浮动

标准文档流：数据流(二进制的)

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成多行，并在每行中从左至右的顺序排放元素。

块状元素：从上到下。行内元素：从左到右，放满了，换行接着排列

4.1 什么是浮动

浮动:就是让页面上的标签脱离标准文档流，向父标签的左边或者右边移动。直到遇到其它浮动标签或者到达父标签的边界。

float：left（左浮动）、right（右浮动）、none（不浮动）

4.2 浮动的由来

最初，浮动是为了实现一种环绕效果，后经过发展，出现浮动布局。

4.3 浮动的特征

块状元素浮动：能在一行内排列。失去独占一行的特性。

行内元素浮动：可以设置宽高。

浮动和inline-block的区别：inline-block始终处于标准文档流，但是浮动脱离了标准文档流。

（1）行内元素浮动影响

靠边排列，行内元素具有行内块的特征，可以设置宽和高

（2）块状元素浮动的影响

元素浮动后，高度变为0，底部空虚，后面元素会趁虚而入，会挤上来

4.4 浮动塌陷

当一个（没有设置高度）的元素中所有的子元素都进行了浮动，该元素的高度会塌陷为0

（1）产生原因

1）父元素没有高度

2）父元素中的所有子元素都浮动，导致父容器塌陷，高度为0

（2）解决方法

1）对父容器设置高度

2）通过overflow设置hidden/auto（最常用方法），让父容器自动包裹子元素，解决塌陷问题

3）在浮动元素的后面，添加一个新元素，设置元素属性为clear：both、left、right（使用哪个属性值依据浮动元素是向哪个方向浮动），会清除浮动元素的影响，但需要额外添加标签，不常用。

4）使用after伪类解决塌陷问题，就相当于添加了一个块级元素

ul:after{
		/*在ul后面添加空字符串*/
		content:"";
		/*设置内容块状显示*/
		display:block;
		/*设置内容清除两边的浮动效果*/
		clear:both;
	}