vito的Web前端学习 Day5（CSS）

vitocool

已于 2022-01-20 16:23:22 修改

阅读量477

点赞数 3

文章标签： css 前端 html

于 2022-01-20 16:19:35 首次发布

本文链接：https://blog.csdn.net/vitocool/article/details/122573558

版权

2022年1月20日，学习CSS的三大特性：层叠性、继承性、优先级，CSS盒子模型。

今日主要学习内容：

1 CSS的三大特性

1.1 层叠性

1.2 继承性

<head>
    <style type="text/css">
		body {
			/*color实现继承性*/
			color: pink;
			/*行高为字体大小的1.5倍*/
			font: 14px/1.5 "微软雅黑";
		}
		div {
			/*font-size改为24px，行高为当前字体大小的1.5倍*/
			font-size: 24px;
		}
	</style>
</head>
<body>
	<div>继承性</div>
    <!-- 行高为24*1.5 -->
	<div>继承性</div>
	<!-- 行高为14*1.5 -->
	<ul>
		<li>li 继承body的font-size</li>
	</ul>
</body>

1.2.1 行高的继承性

1.3 优先级

<head>
	<style type="text/css">
		body {
			color: pink;
		}
		div {
			color: red!important;
		}
		.div1 {
			color: yellow;
		}
		#div2 {
			color: blue;
		}
        p {
			color: green;
		}
	</style>
</head>
<body>
	<div class="div1" id="div2" style="color: orange;">
        优先级
        <p>继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。因此p标签字体颜色为green</p>
    </div>
</body>

1.4 权重的叠加

<head>
 	<style type="text/css">
        /*权重有叠加，但永远不会有进位*/
		/*ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2*/
		ul li {
			color: green;
		}
		/*li 权重 0,0,0,1*/
		li {
			color: red;
		}
		/*.ul1 li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1*/
		.ul1 li{
			color: purple;
		}
	</style>
</head>
<body>
    <ul class="ul1">
        <!-- li为紫色 -->
		<li>权重叠加</li>
	</ul>
</body>

2 盒子模型

2.1 盒子模型组成

2.2 border边框

<head>	
    <style>
        .div3 {
			width: 300px;
			height: 300px;
			/*边框的粗细，一般情况下都用px*/
			border-width: 5px;
			/*边框样式 实线*/
			border-style: solid;
			/*边框颜色*/
			border-color: bule;
		}
		.div4 {
			width: 300px;
			height: 300px;
			border-width: 5px;
			/*边框样式 虚线*/
			border-style: dashed;
		}
		.div5 {
			width: 300px;
			height: 300px;
			border-width: 5px;
			/*边框样式 点线*/
			border-style: dotted;
		}
	</style>
</head>

边框样式参数

2.2.1 边框复合写法

<head>
    <style>        
        .div6 {
			width: 300px;
			height: 300px;
			/*边框的复合写法 没有顺序*/
			border: 1px solid red;
		}
    </style>
</head>

2.2.1 边框拆分

<head>  
    <style>
        .div7 {
			width: 300px;
			height: 300px;
			/*上边框*/
			border-top: 2px dashed red;
			/*下边框*/
			border-bottom: 3px dotted red;
		}
	</style>
</head>
<body>
    <div class="div7"></div>
</body>

2.2.2 表格细线边框

<head>  
    <style>
        table, td, th{
			border: 1px solid hotpink;
			/*合并相邻边框*/
			/*否则边框为相邻两表格border之和，即2px*/
			border-collapse: collapse;
		}
		table {
			width: 100px;
			height: 100px;
		}
		th {
			width: 50px;
			height: 50px;
		}
	</style>
</head>
<body>
    <table cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<th></th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table><br>
</body>

2.2.3 边框会影响盒子的实际大小

2.3 padding内边距

<head>  
    <style>        
        .div8 {
			width: 300px;
			height: 300px;
			border: 1px solid red;
			/*左内边距*/
			padding-left: 20px;
			/*上内边距*/
			padding-top: 20px;
		}
	</style>
</head>
<body>
    <div class="div8">
		内边距
	</div><br>
</body>

2.3.1 padding内边距复合写法

2.3.2 padding内边距会影响盒子实际大小

2.3.3 padding内边距不会撑开盒子的情况

<head>  
    <style>   
        .div9 {
			width: 300px;
			height: 100px;
			background-color: darkred;
		}
		.div9 p {
			/*盒子本身没有指定width/height属性，padding不会撑开盒子*/
			padding: 30px;
			background-color: orange;
			font-size: 16px;
		}
		.div9 h4 {
			/*指定了width，padding会撑开盒子*/
			width: 100%;
			padding: 30px;
			background-color: black;
			font-size: 16px;
		}
        /*因为p和h4都是块元素，所以没指定width，默认独占一行*/
	</style>
</head>
<body>
<div class="div9">
		<p>没撑开盒子</p>
	</div>
	<div class="div9">
		<h4>撑开盒子</h4>
	</div>
</body>

2.4 margin外边距

2.4.1 margin外边距复合写法与padding相同

2.4.2 margin外边距会影响盒子实际大小

2.4.3 margin外边距不会撑开盒子的情况与padding相同

2.4.4 margin外边距使块元素水平居中对齐

<head>  
    <style> 
        .div10 {
			width: 300px;
			margin: 0 auto;
			background-color: black;
			text-align: center;
		}
	</style>
</head>
<body>
    <div class="div10">块元素水平居中</div>
</body>

2.4.5 外边距合并

<head>  
    <style>     
        .div11 {
			height: 500px;
			width: 500px;
			margin: 10px;
			background-color: yellow;
		}
		.div11 p, .div12 p, .div13 p, .div14 p{
			height: 300px;
			width: 300px;
			margin: 30px;
			background-color: black;
		}
		.div12 {
			height: 500px;
			width: 500px;
			margin: 10px;
			background-color: yellow;
			/*定义上边框*/
			border-top: 1px transparent  solid;
		}
		.div13 {
			height: 500px;
			width: 500px;
			margin: 10px;
			background-color: yellow;
			/*定义上内边距*/
			padding-top: 1px;
		}
		.div14 {
			height: 500px;
			width: 500px;
			margin: 10px;
			background-color: yellow;
			overflow: hidden;
		}
	</style>
</head>
<body>
    <div class="div11">
		<p>嵌套块元素垂直外边距塌陷</p>
	</div>
	<div class="div12">
		<p>为父元素定义上边框</p>
	</div>
	<div class="div13">
		<p>为父元素定义上内边距</p>
	</div>
	<div class="div14">
		<p>为父元素添加overflow:hidden</p>
	</div>
</body>

2.6 清除内外边距

3 总结

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*继承性*/
		body {
			/*color实现继承性*/
			color: pink;
			/*行高为字体大小的1.5倍*/
			font: 14px/1.5 "微软雅黑";
		}
		div {
			/*font-size改为24px，行高为当前字体大小的1.5倍*/
			font-size: 24px;
		}
		/*优先级*/
		div {
			color: red!important;
		}
		.div1 {
			color: yellow;
		}
		#div2 {
			color: blue;
		}
		p {
			color: green;
		}
		/*权重叠加*/
		/*权重有叠加，但永远不会有进位*/
		/*ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2*/
		ul li {
			color: green;
		}
		/*li 权重 0,0,0,1*/
		li {
			color: red;
		}
		/*.ul1 li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1*/
		.ul1 li{
			color: purple;
		}
		/*边框*/
		.div3 {
			width: 300px;
			height: 300px;
			/*边框的粗细，一般情况下都用px*/
			border-width: 5px;
			/*边框样式 实线*/
			border-style: solid;
			/*边框颜色*/
			border-color: bule;
		}
		.div4 {
			width: 300px;
			height: 300px;
			border-width: 5px;
			/*边框样式 虚线*/
			border-style: dashed;
		}
		.div5 {
			width: 300px;
			height: 300px;
			border-width: 5px;
			/*边框样式 点线*/
			border-style: dotted;
		}
		.div6 {
			width: 300px;
			height: 300px;
			/*边框的复合写法 没有顺序*/
			border: 1px solid red;
		}
		.div7 {
			width: 300px;
			height: 300px;
			/*上边框*/
			border-top: 2px dashed red;
			/*下边框*/
			border-bottom: 3px dotted red;
		}
		/*表格细线边框*/
		table, td, th{
			border: 1px solid hotpink;
			/*合并相邻边框*/
			/*否则边框为相邻两表格border之和，即2px*/
			border-collapse: collapse;
		}
		table {
			width: 100px;
			height: 100px;
		}
		th {
			width: 50px;
			height: 50px;
		}
		/*内边距*/
		.div8 {
			width: 300px;
			height: 300px;
			border: 1px solid red;
			/*左内边距*/
			padding-left: 20px;
			/*上内边距*/
			padding-top: 20px;
		}
		.div9 {
			width: 300px;
			height: 100px;
			background-color: darkred;
		}
		.div9 p {
			/*盒子本身没有指定width/height属性，padding不会撑开盒子*/
			padding: 30px;
			background-color: orange;
			font-size: 16px;
		}
		.div9 h4 {
			/*指定了width，padding会撑开盒子*/
			width: 100%;
			padding: 30px;
			background-color: black;
			font-size: 16px;
		}
		/*因为p和h4都是块元素，所以没指定width，默认独占一行*/
		/*外边距*/
		.div9 {
			margin: 20px;
		}
		.div9 h3 {
			width: 100%;
			padding: 30px;
			background-color: black;
		}
		.div9 p, .div9 h3 {
			margin: 20px;
		}
		/*块元素水平居中*/
		.div10 {
			width: 300px;
			margin: 0 auto;
			background-color: black;
			text-align: center;
		}
		/*嵌套块元素垂直外边距的塌陷*/
		.div11 {
			height: 500px;
			width: 500px;
			margin: 10px;
			background-color: yellow;
		}
		.div11 p, .div12 p, .div13 p, .div14 p{
			height: 300px;
			width: 300px;
			margin: 30px;
			background-color: black;
		}
		.div12 {
			height: 500px;
			width: 500px;
			margin: 10px;
			background-color: yellow;
			/*定义上边框*/
			border-top: 1px transparent  solid;
		}
		.div13 {
			height: 500px;
			width: 500px;
			margin: 10px;
			background-color: yellow;
			/*定义上内边距*/
			padding-top: 1px;
		}
		.div14 {
			height: 500px;
			width: 500px;
			margin: 10px;
			background-color: yellow;
			overflow: hidden;
		}
		/*清除内外边距*/
		* {
			margin: 0;
			padding: 0;
		}
	</style>
</head>
<body>
	<!-- 继承性 -->
	<!-- 行高为24*1.5 -->
	<div>继承性</div>
	<!-- 行高为14*1.5 -->
	<ul>
		<li>li 继承body的font-size</li>
	</ul>

	<!-- 优先级 -->
	<div class="div1" id="div2" style="color: orange;">
		优先级
		<p>继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。因此p标签字体颜色为green</p>
	</div>

	<!-- 权重叠加 -->
	<ul class="ul1">
		<li>权重叠加</li>
	</ul>

	<!-- 盒子模型 -->
	<!-- 边框 -->
	<div class="div3"></div>
	<div class="div4"></div>
	<div class="div5"></div>
	<!-- 边框复合写法 -->
	<div class="div6"></div><br>
	<!-- 边框拆分 -->
	<div class="div7"></div><br>
	<!-- 表格细线边框 -->
	<table cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<th></th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table><br>
	<!-- 内边距 -->
	<div class="div8">
		内边距
	</div><br>
	<div class="div9">
		<p>没撑开盒子</p>
	</div>
	<div class="div9">
		<h4>撑开盒子</h4>
	</div><br>
	<!-- 外边距 -->
	<div class="div9">
		<p>没撑开盒子</p>
	</div>
	<div class="div9">
		<h3></h3>
	</div>
	<!-- 块元素水平居中 -->
	<div class="div10">块元素水平居中</div>
	<!-- 嵌套块元素垂直外边距的塌陷 -->
	<div class="div11">
		<p>嵌套块元素垂直外边距塌陷</p>
	</div>
	<div class="div12">
		<p>为父元素定义上边框</p>
	</div>
	<div class="div13">
		<p>为父元素定义上内边距</p>
	</div>
	<div class="div14">
		<p>为父元素添加overflow:hidden</p>
	</div>

</body>
</html>