CSS笔记(三)

最新推荐文章于 2022-01-19 17:42:11 发布

lalalalacheno

最新推荐文章于 2022-01-19 17:42:11 发布

阅读量252

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/baidu_29474379/article/details/86611163

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的行高概念，包括行高的默认值、计算方式以及与文字大小的关系。此外，还探讨了盒子模型，如边框样式、边框合并，以及如何设置内边距和外边距。最后提到了CSS中的焦点获取方法以及外边距合并现象的解决策略。

摘要由CSDN通过智能技术生成

行高

◆浏览器默认文字大小

浏览器默认文字大小：16px

行高：是基线与基线之间的距离

行高=文字高度+上下边距

一行文字行高和父元素高度一致的时候，垂直居中显示。

行高单位

行高单位	文字大小	值
20px	20px	20px
2em	20px	40px
150%	20px	30px
2	20px	40px

总结:单位除了像素以为，行高都是与文字大小乘积。

行高单位	父元素文字大小	子元素文字大小	行高
40px	20px	30px	40px
2em	20px	30px	40px
150%	20px	30px	30px
2	20px	30px	60px

总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。

盒子模型

边框 border

Border-top-style: solid 实线

dotted 点线

dashed 虚线

Border-top-color 边框颜色

Border-top-width 边框粗细

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 300px;
			background: #999;
			border-top-style:solid; /*线型*/
			border-top-color: red;  /*颜色*/
			border-top-width:5px; 
			border-bottom-style: dotted;
			border-bottom-color: green;
			border-bottom-width: 10px;
		}
	</style>

</head>
<body>
	<div class="box">啦啦啦啦1</div>

</body>
</html>

◆边框属性的连写

特点：没有顺序要求，线型为必写项。

			/*边框属性连写*/
			border-top: red solid 5px;

◆四个边框值相同的写法

			/*四个边框相同的写法*/
			border: red solid 5px;

特点：没有顺序要求，线型为必写项。

边框合并 border-collapse:collapse

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		table{
			width: 300px;
			height: 200px;
			border: 1px solid red;
			border-collapse: collapse;

		}
		td{
			border: 1px solid red;
		}
	</style>

</head>
<body>
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>

</body>
</html>

获取焦点

label for id 获取光标焦点

内边距

Padding-left | right | top | bottom

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background: red;
			padding-left:20px; 
			padding-right: 30px;
			padding-top: 40px;
			padding-bottom: 50px;

		}
	</style>

</head>
<body>
	<div class="box">啦啦啦1</div>
</body>
</html>

◆padding连写

Padding: 20px; 上右下左内边距都是20px

Padding: 20px 30px; 上下20px 左右30px

Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40

Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background: red;
/*			padding-left:20px; 
			padding-right: 30px;
			padding-top: 40px;
			padding-bottom: 50px;*/

			padding: 20px 30px 40px 50px;


		}
	</style>

</head>
<body>
	<div class="box">啦啦啦1</div>
</body>
</html>

内边距撑大盒子的问题

影响盒子宽度的因素

内边距影响盒子的宽度

边框影响盒子的宽度

盒子的宽度=定义的宽度+边框宽度+左右内边距

◆继承的盒子一般不会被撑大

包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.father{
			width: 200px;
			height: 200px;
			background: red;
		}
		.son{
			height: 100px;
			background: green;
			padding-left: 30px;
		}
	</style>

</head>
<body>
	<div class="father"><div class="son"></div></div>
</body>
</html>

外边距

margin-left | right | top | bottom

		.box{
			width: 300px;
			height: 200px;
			background: #eee;
			margin-left: 20px;
			margin-right: 30px;
			margin-top: 40px;
			margin-bottom: 50px;
		}