Web前端开发（三）--css优先级进阶，文本属性，元素类型转换，display，overflow，浮动，定位

最新推荐文章于 2021-07-21 14:33:17 发布

一个非常正经的人

最新推荐文章于 2021-07-21 14:33:17 发布

阅读量300

点赞数

分类专栏： Web前端文章标签：前端

本文链接：https://blog.csdn.net/qq_34244910/article/details/99597765

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、选择器优先级进阶

计算方式：

行间样式 1000
id 100
class 10
标签选择器 1
让每一个选择器对应的值相加，谁的值大谁的优先级就高。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器优先级进阶</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		#box p{
			color: green;
		}
		/*.wrap .item p{
			color: red;
		}*/
		#el .item p{
			color: #520;
		}
	</style>
</head>
<body>
	<div class="wrap" id="el">
		<div class="item" id="box">
			<p>优先级</p>
		</div>
	</div>
</body>
</html>

二、文本属性

1.text-indent：设置首行缩进

2.text-align：文本的水平对齐方式

3.text-decoration：去除下划线

4.line-height：设置行高

设置行与行之间的间距，一般用于单行文本的垂直居中。

5.vertical-align：垂直对齐方式（一般用于有图片）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>text</title>
	<style type="text/css">
		*{margin: 0px;padding:0px;}
		.item{
			width: 400px;
			height: 400px;
			border: 1px solid red;

			/*设置首行缩进，字体16px，缩进两个字的位置*/
			text-indent: 32px;

			/*设置行高*/
			line-height: 30px;
		}
		.item1{
			width: 400px;
			height: 400px;
			border: 1px solid red;

			/*对齐方式，默认靠左（一般用于单行文本）*/
			text-align: center;

			/*添加下划线*/
			/*text-decoration: underline;*/
			/*添加上划线*/
			/*text-decoration: overline;*/
			/*添加删除线*/
			text-decoration: line-through;

			/*设置垂直居中*/
			line-height: 400px;
		}
		a{
			/*去除下划线*/
			text-decoration: none;
		}
		.item2 img{
			/*让文本和图片的中间对齐*/
			/*vertical-align: middle;*/
			/*让文本和图片的顶部对齐*/
			/*vertical-align:top;*/
			/*让文本和图片的底部对齐（默认）*/
			vertical-align:bottom;
		}
	</style>
</head>
<body>
	<div class="item">
		帝高阳之苗裔兮，朕皇考曰伯庸。
		摄提贞于孟陬兮，惟庚寅吾以降。
		皇览揆余初度兮，肇锡余以嘉名：
		名余曰正则兮，字余曰灵均。
		纷吾既有此内美兮，又重之以修能。
		扈江离与辟芷兮，纫秋兰以为佩。
		汨余若将不及兮，恐年岁之不吾与。
		朝搴阰之木兰兮，夕揽洲之宿莽。
		日月忽其不淹兮，春与秋其代序。
	</div>
	<div class="item1">
		帝高阳之苗裔兮，朕皇考曰伯庸。
	</div>
	<a href="http//www.baidu.com">百度</a>
	<div class="item2">
		摄提贞于孟陬兮，惟庚寅吾以降。
		<img src="https://pic.baike.soso.com/ugc/baikepic2/11621/20180721222709-2008978979_jpeg_448_600_67482.jpg/0" alt="">
	</div>
</body>
</html>

文本属性练习

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文本属性练习</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		.box{
			width: 400px;
			height: 50px;
			border-top: 1px solid #f00;
			border-bottom: 3px solid #666;
			color: #333;
			font-size: 20px;
			font-family: 雅黑;
			font-weight: bold;
			line-height: 50px;
			text-indent: 20px;
		}
	</style>
</head>
<body>
	<div class="box">
		新闻列表
	</div>
</body>
</html>

三、元素类型和类型转换

（一）元素类型

1.块元素

独占一行
宽度默认是父元素的100%，默认高度由内容决定
支持所有的样式
就算设置了宽度，也会独占一行

2.行内元素

不会独占一行，元素排在一行显示
默认宽度是0，默认高度由内容决定
不支持宽高属性，不支持margin的上下属性

3.行内块

不会独占一行，可以设置宽高
默认宽度是0，默认高度由内容决定
支持所有的样式

（二）类型转换

1.display：规定元素以哪种元素类型显示

none 隐藏
block 以块元素显示
inline-block 以行内块元素显示，此属性已经被废弃，但还能使用
inline 以行内元素显示
一般情况下，我们都是将行内元素转变为行内块或块元素，不会将块元素转成行内元素

2.overflow

visible:默认值
hidden:超出部分隐藏
scroll:添加滚动条
auto:自动监测并添加滚动条（清除当前元素内部对外部的影响）

display

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>元素类型</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		.wrap{
			width: 500px;
			height: 500px;
			border: 1px solid red;
		}
		.inner{
			height: 200px;
			width: 200px;
			background-color: pink;

			/*将div以行内元素显示*/
			/*display: inline;*/
			/*将div转换为行内块*/
			/*display: inline-block;*/
		}
		span{
			width: 200px;
			height: 200px;
			background-color:red;
			/*margin: 10px;*/

			/*将span转为块*/
			/*display:block;*/
			/*将span转换为行内块*/
			display: inline-block;
		}
		img{
			width: 80px;
			margin: 20px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="inner">div</div>
		<span>1</span>
		<span>2</span>
		<img src="https://pic.baike.soso.com/ugc/baikepic2/11621/20180721222709-2008978979_jpeg_448_600_67482.jpg/0" alt="">
		<span>3</span>
	</div>
</body>
</html>

display练习

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>display练习</title>
	<style type="text/css">
		/*list-style: none;取消列表样式*/
		*{margin: 0;padding: 0px;list-style: none;}
		ul{
			width: 300px;
			border: 1px solid white;
		}
		ul li{
			width: 100px;
			height: 50px;
			border:1px solid pink;
			text-align: center;
			line-height: 50px;
			display: inline-block;
			box-sizing: border-box;
		}
		.item{
			/*取消行内块自带空白*/
			margin-left: -6px;
		}
		ul li:hover{
			background-color: pink;
		}
		.inner{
			height: 200px;
			background-color: yellow;
			display: none;
		}
		/*鼠标移入li标签时，对.inner的动作*/
		/*这里.innner必须是li的直接子元素*/
		ul li:hover .inner{
			display: block;
		}
	</style>
</head>
<body>
	<ul>
		<li>国内
			<div class="inner"></div>
		</li>
		<li class="item">欧美
			<div class="inner"></div>
		</li>
		<li class="item">日韩
			<div class="inner"></div>
		</li>
	</ul>
</body>
</html>

overflow

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>overflow</title>
	<style type="text/css">
		*{margin: o;padding: 0}
		.item{
			width: 200px;
			height: 200px;
			border: 1px solid red;

			/*超出部分隐藏*/
			/*overflow:hidden;*/
			/*添加滚动条*/
			/*overflow: scroll;*/
			/*自动监测内容是否超出，如果超出自动添加滚动条*/
			overflow: auto;
		}
	</style>
</head>
<body>
	<div class="item">
		<img src="https://pic.baike.soso.com/ugc/baikepic2/11621/20180721222709-2008978979_jpeg_448_600_67482.jpg/0" alt="">
	</div>
	哈哈哈哈哈哈
</body>
</html>

四、浮动（前能覆盖后，后不能覆盖前）

文档流：元素以从上到下，从左向右的排列方式，就是文档流。

浮动特点：

a.浮动会脱离文档流，会将后面没有浮动的元素覆盖，但不会覆盖文字。
b.浮动只有两个方向，左浮动或右浮动
c.当浮动元素碰到父元素的边界时，会停止浮动。
碰到前面浮动的元素时，会停止浮动，且排在一排显示。如果浮动的元素宽度大于父元素的宽度，会另起一行。
d.碰到前面未浮动的元素时，会另起一行进行浮动。

浮动遇到的问题：

当父元素没有设置固定高度时，子元素全部浮动，会导致父元素高度无法撑开。

解决方法：

a.给父元素设置固定高度
b.给父元素添加overflow:hidden
c.给父元素的最后加上一个空标签设置clear:both（这种方式会添加无意义的空标签，影响页面结构，不推荐使用）
d.使用伪元素选择器，给父元素添加伪类 after
（推荐使用）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动</title>
	<style type="text/css">
		.wrap{
			width: 250px;
			border: 2px solid red;

			/*清除浮动对外部元素的影响*/
			/*overflow: hidden;*/
		}
		/*解决父元素无法撑开*/
		/*.wrap:after{
			content: '';
			display: table;
			clear:both;
		}*/
		.item1{
			width: 100px;
			height: 100px;
			background-color: green;

			/*添加左浮动*/
			float: left;
			/*添加右浮动*/
			/*float: right;*/
		}
		.item2{
			width: 105px;
			height: 105px;
			background-color: blue;

			/*添加左浮动*/
			float: left;
		}
		.item3{
			width: 90px;
			height: 90px;
			background-color: #f39;

			float: left;
		}
		.clear{
			/*
			清除前面浮动元素对当前元素的影响
			clear:
				both 清除两边元素浮动产生的影响
				left 清除前面元素左浮动带来的影响
				right 清除前面元素右浮动带来的影响
			*/
			clear: both;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="item1">1</div>
		<div class="item2">2</div>
		<div class="item3">3</div>
		<div class="clear"></div>
	</div>
</body>
</html>

五、定位

（一）相对定位

relative
相对于元素原来的位置，进行偏移，参考点是原来位置的起始点（左上角）。
定位后原位置不会脱离文档流，定位后的是脱离文档流的，会覆盖。（像灵魂出窍）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>相对定位</title>
	<style type="text/css">
		*{margin: 0;padding: 0}
		.wrap{
			width: 600px;
			height: 600px;
			border:1px solid red;
			margin-left: 100px;
		}
		.item1{
			width: 200px;
			height: 200px;
			background-color: #f33;

			/*相对定位*/
			position: relative;
			top: 200px;
			/*left: 200px;*/
		}
		.item2{
			width: 200px;
			height: 210px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="item1"></div>
		<div class="item2"></div>
	</div>
</body>
</html>

（二）绝对定位和定位的层级

absolute
默认以body的左上角为参考点。
如果父元素有定位属性，那么绝对定位就以父元素的参考点进行偏移。
如果父元素没有定位属性，就再往上找一层，依次如此，若一直没有，就找到body为止。
定位后原位置会脱离文档流，定位后的是脱离文档流的，会覆盖。
定位的层级：z-index
只能给有定位属性的元素设置

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>绝对定位</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.wrap{
			width: 400px;
			height: 400px;
			border: 1px solid red;
			margin-left:100px; 

			/*随便一个定位属性*/
			position: relative;
		}
		.item1,.item2{
			width: 100px;
			height: 100px;
		}
		/*后会覆盖前*/
		.item1{
			background-color: yellow;

			/*绝对定位*/
			position: absolute;
			top: 100px;
			left: 100px;
			z-index: 1;
		}
		.item2{
			background-color: blue;

			/*绝对定位*/
			position: absolute;
			top: 100px;
			left: 100px;
			z-index: 2;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="item1">1</div>
		<div class="item2">2</div>
	</div>
</body>
</html>

（三）固定定位

fixed（又叫绑定定位）
脱离文档流。
相对于浏览器窗口进行定位。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>固定定位</title>
	<style type="text/css">
	*{margin: 0;padding:0;}
	body{
		height: 2000px;
	}
	.top{
		width: 100px;
		height: 50px;
		background: blue;
		text-align: center;
		line-height: 50px;

		/*固定定位*/
		position: fixed;
		right: 20px;
		bottom: 20px;
	}
	</style>
</head>
<body>
	<div class="top">返回顶部</div>
</body>
</html>

应用

侧边栏导航

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
		ul{
			width: 150px;
			background: rgba(0,0,0,0.15);

			/*给一个定位属性，确定内部元素定位的参考点*/
			position: relative;
		}
		li{
			padding-left:20px; 
			padding-top: 10px;
			padding-bottom: 10px;
		}
		ul li:hover{
			background: #ff6700;
		}
		.inner{
			width: 600px;
			height: 600px;
			background: pink;
			/*绝对定位*/
			position: absolute;
			top: 0px;
			left: 150px;
			/*默认隐藏*/
			display: none;
		}
		ul li:hover .inner{
			display: block;
		}
	</style>
</head>
<body>
	<ul>
		<li>手机 电话卡
			<div class="inner">1</div>
		</li>
		<li>电视盒子
			<div class="inner">2</div>
		</li>
		<li>笔记本
			<div class="inner">3</div>
		</li>
	</ul>
</body>
</html>

一个非常正经的人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发（三）--css优先级进阶，文本属性，元素类型转换，display，overflow，浮动，定位

一、选择器优先级进阶计算方式：行间样式 1000id 100class 10标签选择器 1让每一个选择器对应的值相加，谁的值大谁的优先级就高。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>选择器优先级进阶&lt...
复制链接

扫一扫