盒子模型以及css元素的分类

红的花绿的叶

已于 2024-07-16 10:11:03 修改

阅读量64

点赞数

分类专栏：前端基础文章标签： css html 前端

于 2022-12-20 16:03:59 首次发布

本文链接：https://blog.csdn.net/qq_64227183/article/details/128385879

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的盒子模型，包括content、padding、border和margin四个部分，并通过代码示例展示了它们的使用方法。此外，还讲解了CSS元素的分类，如块状元素和内联元素的特性，以及如何将元素隐藏。最后，提供了隐藏元素的三种实现方式。

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

盒子模型

content 内容

padding 内边距

border 边框

margin 外边框

例如：

padding:100px; 表示上下左右4个方向都增加了100px

padding:100px 200px; 表示的是上下2个方向增加100px，左右2个方向增加200px

padding:100px 200px 300px; 表示的是上增加100px，左右2个方向增加200px，下增加300px

padding:100px 200px 300px 400px 表示上增加100px，左增加200px，右增加300px，下增加400px

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	  body,div{
	  	margin:0;
	  	padding:0;
	  	text-decoration:none;
		list-style: none;
	  }

      #one{
      	width:100px;
      	height:100px;
      	background-color: red;
      	border:10px solid black;
      	padding:100px;
      	margin:100px auto;
      }

      #main{
      	width:800px;
      	height:1000px;
      	border:1px solid black;
      	background-color: yellow;

      }

	</style>
</head>
<body>
<div id="main">
	<div id="one">
		盒子1
	</div>
	<div id="one">
		盒子2
	</div>
</div>
</body>
</html>

注意：

margin 的方向上用法和 padding 的用法是一样的

功能：

设置边框粗细语法：border-top-width:12px;

设置边框样式语法：border-top-style:solid【实线】、dashed【虚线】

设置边框颜色语法：border-top-color:blue;

设置某一边框属性的简捷方式语法：border-边框位置:线宽线型颜色;

设置某一元素四条边框属性的简捷方式(仅限于四条边框的属性完全相同)

语法：border:线宽线型颜色;

css元素的分类

块状元素

display:block;

块状元素具备高度（height）和宽度（width）的属性

不允许其他的块状元素和它同一行显示

例如：

div p

内联元素

display:inline

内联元素不具备高度（height）和宽度（width）两个属性

允许其他的内联元素和它同一行显示

例如：

a span

注意：

内联元素和块状元素是可以相互转换的

隐藏元素

display:none;

三种方式：

display:none;

将元素的宽度（width）和高度（height）都设置为0

overflow:hidden

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

       #one{
       	width: 200px;
       	height:200px;
       	background-color: red;
       	font-size: 36px;
      
       }

       #two{
       	width: 200px;
       	height:200px;
       	background-color: green;
       	font-size: 36px;
    
       }

       a{
       	width:200px;
       	height:200px;
       	background-color: gold;
       	display: block;
       	border:1px solid black;
       }

       #aone: hover{

       }

       #one:hover{
       	display: none;
       }
       #two:hover{
       	width:0;
       	height: 0;
       }

	</style>
</head>
<body>
	<div id="one">
		1
	</div>
	<div id="two">
		2
	</div>
	<a id ="aone" href="#b1">11111</a>
	<a id ="tone" href="#b2">22222</a>
</body>
</body>
</html>