CSS样式（续前）

最新推荐文章于 2025-08-14 19:36:32 发布

原创最新推荐文章于 2025-08-14 19:36:32 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

AAA 专栏收录该内容

28 篇文章

订阅专栏

CSS样式（续前）

css 特性 :cascading style sheet 层叠样式表
层叠性：如果多个选择器同时设置一个标签，如果设置的样式相同，按照优先级显示(权重)，否则，同时起作用。
继承性：子代元素会默认的继承父元素的样式（字体样式/文本样式），布局样式都不能继承。

精灵图

1. 什么是精灵图

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

2 为什么要用精灵图

提升页面加载速度。减轻服务器压力。。。。实际上就是背景属性的应用。

3.精灵图使用案例：当当网图标

在这里插入图片描述

选择器深入

	<style type="text/css">
			/* 
			全局选择器
			并集选择器
			交集选择器
			子集选择器
			伪类选择器
			属性选择器
			 */
			/* *{
				全局选择器		
				color: red;
			} */
			/*并集选择器*/
			h1,h2{
				color: blue;
			}
			/*交集选择器*/
			li.xx{
				color: red;
			}
			/*子集选择器 对div下的所有b生效*/
			/* div b{
				color: red;
			} */
			/*仅对div下一级的标签生效
			div>b{
				color: red;
			}*/
			/*伪类选择器 对于超链标签顺序不能错，有些浏览器会显示失败*/
			a:link{
				color: #0000FF;
			}
			a:visited{
				color: red;
				font-size: 30px;
			}
			a:hover{
				color: orange;
				font-size: 70px;
			}
			a:active{
				color: green;
				font-size: 100px;
			}
			/*属性选择器 可以根据标签内的属性选择作用的标签 */
			input[name='mz']{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>标题1</h1>
		<h2>标题2</h2>
		<b>这是外层的b标签</b>
		<div>
			<b>这是div内的b标签</b>
			<span>
				<b>这是span内的b标签</b>
			</span>
		</div>
		<p class="xx">这是一个段落。。。。。。。</p>
		<ul>
			<li class="xx">这是一个列表</li>
		</ul>
		<a href="www.baidu.com">百度</a>
		<br>
		姓名：
		<input type="text" name="mz" value="111"/><br>
		密码：
		<input type="password" name="mm" />
	</body>

标签布局分类

1.标签分类

从布局来看分为：块状标签/行内标签/行内块状标签
块状标签：独占一行，可以设置宽高

常用块状：div、p、h1-h6、table、ul li、ol li、hr
在没有div之前，一般都是用表格做页面的布局。但是不能满足关于定位的需求。
div : 块状标签，层级标签(页面的布局)，没有语义的标签，语义由我们开发者设置。默认宽度为 100% ，高度为0

行内标签：全部挤在一行，不能设置宽高

常用行内：input、span、img、b、i、a、br
span: 行内标签行级文本容器。

行内块状标签(inline-block)：既有行内标签特征(挤在一行)，又有块状标签特征(可以设置宽和高)

常用行内快： img,input

2.display属性

html中的每一个标签都具有默认的display属性。标签是块状还是行内都由默认的display 属性决定。可以通过display属性的值来改变标签的类别。

display:none(不显示)
block 块状
inline 行内
inline-block 行内块(既能设置宽高又可以在一行内排列显示);

浮动

1.先了解标准文档流

标准文档流：数据流(二进制的)
文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
块状元素：从上到下。行内元素：从左到右，放满了，换行接着排列

2.什么是浮动？

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

3.浮动的特点

块内元素浮动：失去独占一行的特性。
行内元素浮动：可以设置宽高。
思考：浮动跟inline-block有点相似？
inline-block始终处于标准文档流，但是浮动脱离了标准文档流。

float:left 左浮动
float:right 有浮动
float:none 不浮动
当我们做浮动布局时，当元素浮动后，其下级所有元素都要进行浮动，浮动会使元素高度变为0.

所以当所有子级元素都浮动后，则其父级元素高度就会变为0，该现象成为浮动塌陷。

4.浮动塌陷

概念：当一个(没有设置高度的)元素中所有的子元素都进行了浮动，此时，该元素的高度会塌陷为0.（父容器没有高度）

解决：
1.直接设置元素高度
2.设置overflow属性 hidden/auto，让父容器自动包裹子元素，解决塌陷问题(最常用的方法)
3.在浮动元素的后面，添加一个新元素，设置元素的样式属性clear:both。会清除浮动元素的影响解决塌陷问题（额外添加标签，不常用）
4.通过元素的after伪类设置清楚浮动模型