基本css知识点2

最新推荐文章于 2024-04-02 14:24:22 发布

wujiancai1163

最新推荐文章于 2024-04-02 14:24:22 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/wujiancai1163/article/details/103265226

版权

一、盒子模型

（一）外边距（margin）

1、设置标签与标签之间的间距

2、margin: 0 auto 是左右自动居中

3、设置标签的位置（水平/垂直）

4、可能会遇到的问题：外边距重叠（合并），外边距塌陷，解决方法（嵌套一层标签）：

（1）设置overflow:hidden;

（2）设置边框（border）

（3）设置浮动（float）

（4）设置定位（position）

外边距塌陷代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06.css.外边距塌陷的解决方法.html</title>
	<style>
		.big{
			width:500px;
			height: 300px;
			background-color: red;
			/*解决外边距塌陷的问题*/
			/* overflow: hidden; */
			/*border:1px solid blue;*/
			/*float: left;*/
			/*position: absolute;*/
		}
		.big .small{
			width: 100px;
			height: 100px;
			background-color: yellow;
			margin-top: 100px;
		}
	</style>
</head>
<body>
	<div class="big">
		<div class="small"></div>
	</div>
</body>
</html>

外边距塌陷的运行结果：

解决外边距的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06.css.外边距塌陷的解决方法.html</title>
	<style>
		.big{
			width:500px;
			height: 300px;
			background-color: red;
			/*解决外边距塌陷的问题*/
			overflow: hidden; 
			/*border:1px solid blue;*/
			/*float: left;*/
			/*position: absolute;*/
		}
		.big .small{
			width: 100px;
			height: 100px;
			background-color: yellow;
			margin-top: 100px;
		}
	</style>
</head>
<body>
	<div class="big">
		<div class="small"></div>
	</div>
</body>
</html>

解决外边距塌陷问题的运行结果：

（二）边框（border）

1、一个盒子有四条边

2、属性：border-style(边框样式例如：直线、点线、虚线)/border-width（边框宽度）/border-color（边框颜色）

3、边框的作用：修饰盒子边框，制作小图标：例如三角形；

设置三角形代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>04.css.边框.html</title>
	<style>
	/*选中类名叫做box的div标签*/
		/* 三角形 */
		/*transparent  透明*/
		span.icon{
			display: inline-block;
			width:0;
			height:0;
			border-right: 50px solid transparent;
			border-top: 50px solid blue;
			border-bottom: 50px solid transparent;
			border-left: 50px solid transparent;
		}
		
	</style>
</head>
<body>
	<!-- 2.0border -->
	<span class="icon"></span>

</body>
</html>

运行结果：

（三）内边距（padding）

1、设置内容与边框的间距

2、padding-top(上)/padding-bottom（下）/padding-right（右）/padding-left（左）

3、作用：可以居中指定的内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>02.css.内边距.html</title>
	<style>
		html,body{
			padding:0;
			margin:0;
		}
		div.box1{
			background-color: red;
			padding-top:50px;
		}
		div.search{
			width:400px;
			height: 60px;
			background-color: #ccc;
			/*内边距会撑开盒子大小*/
			padding:20px 50px;
		}
		div.search div.box{
			height: 60px;
			background-color: white;
		}
		div.nav{
			/*盒子大小的计算方式  width+padding+border*/
			/*width: 100%;*/
			height: 80px;
			background-color: orange;
			padding-left:500px;
			padding-top:10px;
			padding-bottom: 10px;
			padding-right:10px;
			/*box-sizing: border-box;*/
		}
		.nav  .content{
			height: 80px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="box1"> 网站首页 </div>

	<!-- padding -->
	<div class="search">
		<div class="box"></div>
	</div>
	<div class="nav">
		<div class="content"></div>
	</div>
</body>
</html>

运行结果：

（四）盒子设置内容大小：宽（width）高（height）

二、盒子计算方式

盒子计算方式：边框+外边距+内容大小

三、字体属性

（一）font-size 字体大小

（二）font-style 字体样式

（三）font-weight 字体粗细

（四）font-family 字体名称

（五）color 字体颜色。

wujiancai1163

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基本css知识点2

一、盒子模型（一）外边距（margin）1、设置标签与标签之间的间距2、margin: 0 auto 是左右自动居中3、设置标签的位置（水平/垂直）4、可能会遇到的问题：外边距重叠（合并），外边距塌陷，解决方法（嵌套一层标签）：（1）设置overflow:hidden;（2）设置边框（border）（3）设置浮动（float）（4）设置定位（position...
复制链接

扫一扫