CSS盒子模型的基本语法

最新推荐文章于 2023-03-30 10:23:06 发布

端脑

最新推荐文章于 2023-03-30 10:23:06 发布

阅读量211

点赞数

分类专栏：前端文章标签： CSS盒子模型的基本语法

本文链接：https://blog.csdn.net/qq_43776742/article/details/97918215

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

基本语法

border
padding
margin
其它

border

border-style（边框样式）常见样式有 : dashed（虚线）| dotted（点线）| solid（实线）| double（双线）。
border-color（边框颜色）
border-width（边框宽度）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	   width: 200px; /*内容的宽*/
	   	   height: 200px;/*内容的高*/
	   	   border-width: 8px; /*边框粗细*/
	   	   border-color: red; /*边框颜色*/
	   	   /* border-style: solid; *//*边框样式实线 用的最多*/
	   	   /* border-style: dashed;  虚线*/
	   	   /* border-style: dotted; 点线*/
	   	   border-style: double; /* 双线*/
	   	   border: 10px solid pink;
	   }
	</style>
</head>
<body>
	<div>我是一个盒子</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    input {
	    	border: 0; /*没有边框*/
	    }

	    .uname {
	    	border-width: 1px;
	    	border-style: solid;
	    	border-color: green;
	    }

	    .nc {
	    	border-top-width: 1px;
	    	border-top-style: solid;
	    	border-top-color: pink;
	    	border-bottom-width: 1px;
	    	border-bottom-style: solid;
	    	border-bottom-color: brown;
	    }

	    .email {
	    	border-left: 1px solid red;
	    	border-right: 1px solid #ccc;
	    }

	    .tel {
	    	/*border样式快捷写法==》 border: 2px solid skyblue; */
	    	border-left: 2px solid skyblue;
	    	border-top: 2px solid skyblue;
	    	border-right: 2px solid skyblue;
	    	border-bottom: 2px solid skyblue;
	    }
	</style>
</head>
<body>
	<label for="">用户名:<input type="text" class="uname"></label><br /><br />
	<label for="">昵称:<input type="text" class="nc"></label><br /><br />
	<label for="">邮箱:<input type="email" class="email"></label><br /><br />
	<label for="">手机:<input type="tel" class="tel"></label>
</body>
</html>

padding(填充)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style type="text/css">
       div {
       	  width: 200px;
       	  height: 200px;
       	  border: 1px solid #0f0;
       	 /*  padding: 10px; */ /*四个方向内边距都是10px*/
       	  /* padding: 10px 30px; */ /*上下10px  左右30px*/
       	  /* padding: 10px 20px 30px; */ /*上10 左右20 下30*/
       	  /* padding: 10px 20px 30px 40px; */ /*上10 右20 下30 左40*/
       	  /* padding-left: 10px;
       	  padding-right: 10px;
       	  padding-top: 20px;
       	  padding-bottom: 30px; */
       	  padding: 20px 10px 30px 10px;
       }
    </style>
</head>
<body>
	<div>内边距代表内容到边框的距离</div>
</body>
</html>

margin(边界)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	   width: 200px;
	   	   height: 200px;
	   	   background-color: pink;
	   	   padding: 4px;
	   	  /*  margin: 20px; */
	   	   /* margin-top: 10px;
	   	   margin-right: 20px;
	   	   margin-bottom: 30px;
	   	   margin-left: 40px; */
	   	   margin: 20px auto; /*左右auto 这样可以让块级带有宽度的盒子水平居中对齐*/
	   }
	   span {
	   	  margin: 0 auto; /*无效 因为span是行内元素*/
	   }

	   header {
	   	   margin: 0 auto; /*无效 因为没设置宽度*/
	   	   width: 400px;
	   }
	</style>
</head>
<body>
	<div></div>
	<header>头部</header>
	<span>span</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            width: 160px;
            height: 160px;
            background-color: red;
            overflow: hidden;
            /* padding-top: 60px; */
            /* border: 1px solid transparent; */
        }
        /*
          父子margin塌陷
            当父亲没有设置padding、border、内容时，
            子元素垂直方向的margin会叠加给父亲

            一旦发生塌陷，叠加规则，父亲最终垂直方向的margin
            以父子中较大的为准 而不是相加

            解决办法 1 把儿子的margin转化为父亲的padding 注意盒子总高度变化
                    2 给父亲增加一个属性 overflow: hidden
                    BFC
          并列元素塌陷  
            垂直方向上相遇的margin会发生塌陷，以较大的值为准 
            解决办法 只设置一个方向即可      
        */
        
        .inner {
            margin-top: 60px;
            width: 80px;
            height: 80px;
            background-color: rgb(90, 90, 40);
        }
        
        .box1,
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .box1 {
            margin-bottom: 60px;
        }
        /* .box2 {
            margin-top: 30px;
        } */
    </style>
</head>

<body>
    <div class="box">
        <div class="inner"></div>
    </div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

其它

细线表格(合并相邻边框 border-collapse)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    table {
	    	width: 700px;
	    	height: 300px;
	    	border: 1px solid #ccc;
	    	border-collapse: collapse;/*合并相邻边框*/
	    }

	    td {
	    	border: 1px solid #ccc;
	    }
	</style>
</head>
<body>
	<table cellspacing="0">
		<tr>
			<td>1111</td>
			<td>2222</td>
			<td>3333</td>
		</tr>
		<tr>
			<td>1111</td>
			<td>2222</td>
			<td>3333</td>
		</tr>
		<tr>
			<td>1111</td>
			<td>2222</td>
			<td>3333</td>
		</tr>
	</table>
</body>
</html>

圆角边框（border-radius）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	   width: 180px;
	   	   height: 180px;
	   	   border: 1px solid red;
	   }

	   div:first-child {
	   	   border-radius: 10px; /*表示4个角是相同的10p弧度*/
	   }

	   div:nth-child(2) {
	   	   /* border-radius: 90px;  */
	   	   border-radius: 50%;
	   }

	   div:nth-child(3) {
	   	    border-radius: 10px 30px; /* 左上角 右下角 是10px 右上角 左下角是30px*/
	   }

	   div:nth-child(4) {
	   	    border-radius: 10px 30px 60px; /* 左上角 10px  右上角 左下角是30px 右下角是60px*/
	   }

	   div:nth-child(5) {
	   	    border-radius: 10px 20px 30px 40px; /* 左上角 10px  右上角 20px 右下角是30px 左下角是40px*/
	   }

	   div:nth-child(6) {
	   		border-radius: 90px;
            height: 100px;
	   }

	   div:last-child {
	   	   border-radius: 100px 0;
	   }
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

新浪导航栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   /* 重置元素的默认样式*/
	   * {
	   	   margin: 0;
	   	   padding: 0;
	   }
	   nav {
           height: 41px;
           background-color: #fcfcfc;
           border-bottom: 1px solid #edeef0;
           border-top: 3px solid #ff8500;
	   }

	   nav a {
	   	   font-size: 14px;
	   	   color: #4c4c4c;
	   	   text-decoration: none;
	   	   padding: 0 15px;
	   	   display: inline-block;/*超链接是行内元素 所以需要转行内块*/
	   	   height: 41px;
	   	   line-height: 41px; 
	   }

	   nav a:hover {
	   	    background-color: #eee;
	   }
	</style>
</head>
<body>
	<nav>
		<a href="#">设为首页</a>
		<a href="#">手机新浪网</a>
		<a href="#">移动客户端</a>
	</nav>
</body>
</html>

返回盒子模型目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型的基本语法

border<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 200px; /*内容的...
复制链接

扫一扫