Web--CSS

最新推荐文章于 2020-08-19 17:15:42 发布

拯救发际线的张哈哈

最新推荐文章于 2020-08-19 17:15:42 发布

阅读量136

点赞数

分类专栏： MySQL

本文链接：https://blog.csdn.net/weixin_44863429/article/details/99612048

版权

MySQL 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. 选择器优先级进阶

<div id=”item” class=”box”>
<p></p>
</div>

#item p{}
.box p{}

id 100
class 10
标签选择器 1
行间优先级是 1000

计算方式：让每一个选择器对应的值相加谁的值大谁的优先级高

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>优先级</title>
	<style type="text/css">
		*{
			margin: 0;padding:0;
		}
		/*.wrap .item p{
			color: red;
		}*/
		.warp #box p{
			color: green;
		}
		#el .item p{
			color: #518;
		}
	</style>
</head>
<body>
	<div class="wrap" id="el">
		<div class="item" id="box">
			<p>优先级</p>
		</div>
	</div>
</body>
</html>

2.文本属性

text-indent: 设置首行缩进
text-align: 文本的水平对其方式
text-decoration: 设置下划线
line-height: 行高
设置行于行之间的间距
一般用于单行文本的垂直居中

vertical-align:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本属性</title>
	<style type="text/css">
		*{
			margin: 0; padding: 0;
		}
		.item{
			width: 400px;
			height: 400px;
			border: 1px solid red;
			
			/*设置首行缩进*/
			text-indent: 32px;

			/*设置行高*/
			line-height: 20px;
		}
		.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;*/
		}
	</style>
</head>
<body>
	<div class="item">
		帝高阳之苗裔兮，朕皇考曰伯庸。
		摄提贞于孟陬兮，惟庚寅吾以降。
		皇览揆余初度兮，肇锡余以嘉名：
		名余曰正则兮，字余曰灵均。
		纷吾既有此内美兮，又重之以修能。
		扈江离与辟芷兮，纫秋兰以为佩。
		汩余若将不及兮，恐年岁之不吾与。
		朝搴阰之木兰兮，夕揽洲之宿莽。
	</div>
	<div class="item1">
		日月忽其不淹兮，春与秋其代序。
	</div>
	<a href="http://www.baidu.com">百度</a>

	<div class="item2">		朝搴阰之木兰兮，夕揽洲之宿莽。<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565758874711&di=5cf7a37202022a4e928772262957e007&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201507%2F11%2F20150711160244_vZ4ci.thumb.700_0.jpeg"></div>
</body>
</html>

3.布局属性

块元素：独占一行宽度默认是父元素的100% 默认高度由内容决定，支持所有的样式，就算设置了宽度也会独占一行
行内元素：不会独占一行，元素排在一行显示，默认宽度是0，高度由内容决定，不支持宽高属性和margin的上下属性
行内块：不会独占一行，支持所有的样式，默认宽度0，默认高度由内容决定

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

			/*将div以行内元素显示*/
			/*display: inline;*/
			/*将div转换成行内块*/
			display: inline-block;
		}
		span{
			width: 200px;
			height: 200px;
			background: red;
			/*margin: 20px;
			padding: 20px;*/
			/*将span转成块*/
			/*display: block;*/
			/*将span转成行内块*/
			display: inline-block;
		}
		img{
			width: 80px;
			margin: 20px;
			padding: 20px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="inner">1</div>
		<span>2</span>
		<span>3</span>
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565758874711&di=5cf7a37202022a4e928772262957e007&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201507%2F11%2F20150711160244_vZ4ci.thumb.700_0.jpeg">
		<span>4</span>
	</div>
</body>
</html>

display：规定元素以哪种元素类型显示
none 隐藏
block 以块元素显示
inline-block 以行内快元素显示此属性已经被废弃但是还能用
inline: 以行内元素显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0; padding: 0;
			list-style: none;
		}
		ul{
			width: 300px;
			border: 1px solid red;
		}
		ul li{
			width: 100px;
			height: 50px;
			border: 1px solid pink;
			text-align: center;
			line-height: 50px;
			background: #c4c4c4;

			display: inline-block;

			box-sizing: border-box;
		}
		.item{
			margin-left: -6px;
		}
		ul li:hover{
			background-color: pink;
		}
		.inner{
			height: 200px;
			background-color: gold;
			display: none;
		}
		/*注意：inner必须是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>

display:none与visibility:hidden的区别：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.item1, .item2{
			width: 200px;
			height: 200px;
		}
		.item1{
			background: blue;
			/*display: none;*/
			visibility:hidden;
		}
		.item2{
			background: green;
		}
	</style>
</head>
<body>
	<div class="item1">1</div>
	<div class="item2">2</div>
</body>
</html>

一般情况下我们都是将行内元素转变成块元素或者行内快，不会将块元素转成行内元素
overflow：
visible: 默认值
hidden: 超出部分隐藏
scroll: 添加滚动条
auto: 自检测并添加滚动条

清除当前元素内部对外部元素的影响

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

			/*超出部分隐藏*/
			/*overflow:hidden;*/
			/*添加滚动条*/
			/*overflow: scroll;*/
			/*自动检测内容是否超出，如果超出自动添加滚动条*/
			overflow: auto;

		}
	</style>
</head>
<body>
	<div class="item">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565758874711&di=5cf7a37202022a4e928772262957e007&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201507%2F11%2F20150711160244_vZ4ci.thumb.700_0.jpeg" alt="">
	</div>
</body>
</html>

4.浮动

float:
left
right
文档流：元素以从上到下，从左向右的排列方式这种排列规则就是文档流
A.浮动会脱离文档流会将后面没有浮动的元素覆盖
浮动不会覆盖文字
B.浮动只有两个方向，左浮动或者右浮动
C.当浮动元素碰到父元素的边界时会停止浮动，碰到前面有浮动元素也会停止浮动，并排在一排显示如果浮动元素的宽度超过父元素的宽度会自动换行
D.如果前面有未浮动的元素会另起一行进行浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style type="text/css">
		.wrap{
			width: 300px;
			border:2px solid red;
			overflow: hidden;
		}
		/*清除浮动*/
		/*.wrap:after{
			content: '';
			display: table;
			clear:both;
		}*/
		.item1{
			width: 100px;
			height: 100px;
			background: green;
			/*添加左浮动*/
			float: left;
			/*添加右浮动
			/*float: right;*/
		}
		.item2{
			width: 105px;
			height: 105px;
			background: blue;
			float: left;
		}
		.item3{
			width: 100px;
			height: 100px;
			background: #f39;
			float: left;
		}

		.clear{
			/*width: 100px;
			height: 100px;
			background: yellow;*/

			/*清除浮动
				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>

浮动遇到的问题：当父元素没有设置固定高度时，子元素全部浮动，会导致父元素高度无法撑开

解决办法：
1.给父元素设置固定高度
2.给父元素添加overflow：hidden
3.给父元素的最后添加一个空标签设置clear:both
这种方式会添加无意义的空标签影响页面结构所以不推荐
4.使用伪元素选择
给父元素添加伪类 after
5.定位
position
相对定位 relative
相对于元素原来的位置进行偏移参考点是原来位置的起始点
不会脱离文档流

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

			/*相对定位 参考点是原来位置的起始点*/
			position: relative;
			top: 200px;
			left: 200px;
			/*top: 200px;*/
		}
		.item2{
			width: 200px;
			height: 200px;
			background: blue;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="item1"></div>
		<div class="item2"></div>
	</div>
</body>
</html>

绝对定位
Absolute
会脱离文档流默认以body的00点位参考点进行位移
如果父元素有定位属性，绝对定位就以父元素的00点位参考点进行偏移
如果父元素没有定位属性，就找爷爷元素，以此向上找，找到body为止

<!DOCTYPE html>
<html lang="en">
<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: yellow;
			/*绝对路径 以body的(0,0)点为参考点*/
			position: absolute;
			/*position: relative;*/
			top: 100px;
			left: 100px;
			/*设置定位的层级关系  只能给有定位属性的元素设置*/
			z-index: 1;
		}
		.item2{
			background: blue;
			position: absolute;
			top: 100px;
			left: 100px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="item1"></div>
		<div class="item2"></div>
	</div>
</body>
</html>

固定定位(绑定定位)
fixed
脱离文档流
相对于浏览器窗口进行定位
定位的层级：
只能给有定位属性的元素设置
z-index:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0; padding: 0;}
		body{
			height: 2000px;
		}
		.top{
			width: 100px;
			height: 50px;
			background: green;
			text-align: center;
			line-height: 50px;

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