布局：盒子模型

最新推荐文章于 2023-06-16 14:25:52 发布

媽呀

最新推荐文章于 2023-06-16 14:25:52 发布

阅读量139

点赞数 1

分类专栏：前端学习文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_44729735/article/details/115262765

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

盒子模型

盒子模型的组成

内容（文字图片等）
border：边框
padding：内边距（内容与边框的距离）
margin：外边距（盒子与盒子的距离）

border边框
1.1. 边框粗细border-width

   div {border-width: 20px;}/*宽度为20px*/

1.2. 边框格式border-style

.d1 {border-style: dotted;}/*点线*/
.d2 {border-style: solid;}/*实线*/
.d3 {border-style: dashed;}/*虚线*/

1.3. 边框颜色border-color

div {border-color: red;}

1.4. 边框综合设置

div {border: 2px solid red;}/*宽度20，直线，红色*/

1.5. 边框四边设置

码	上边框	下边框	左边框	右边框
样式	`border-top-style`	`border-bottom-style`	`border-left-style`	`border-right-style`
宽度	`border-top-width`	`border-bottom-width`	`border-left-width`	`border-right-width`
颜色	`border-top-color`	`border-bottom-color`	`border-left-color`	`border-right-color`
综合	`border-top`	`border-bottom`	`border-left`	`border-right`

1.6. 表格边框border-collapse

通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，
但是两个单元格之间的边框会出现重叠，从而使边框变粗

通过css属性：
table{ border-collapse:collapse; }
1.collapse 单词是合并的意思
2.border-collapse:collapse; 表示相邻边框合并在一起。

<style>
    table {
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    td {
        border: 1px solid red;
        text-align: center;
    }
   table, td {
        border-collapse: collapse;  /*合并相邻边框*/
    }
</style>

padding内边距
内边距就是控制边框与内容的距离
2.1. 具体设置

.d1 {padding-left: 20px;}
.d2 {padding-right: 20px;}
.d3 {padding-bottom: 20px;}
.d4 {padding-top: 20px}

TIP： 在使用内边距属性时盒子模型会相应的变大，比如设置width: 20px;后加上padding-left: 20px;盒子模型的宽度就会变为40px。
2.2. 简易设置

.d1 {padding: 10px;}/*上下左右的内边距都是10px*/
.d2 {padding: 10px 20px;}/*上下10px，左右20px*/
.d3 {padding: 10px 20px 30px;}/*上10px，左右20px，下30px*/
.d4 {padding: 10px 20px 30px 40px;}/*上10，右20，下30，左40（顺时针）*/

margin外边距
外边距就是控制边框与边框的距离
3.1. 具体设置

 .d1 {margin-left: 20px;}
 .d2 {margin-right: 20px;}
 .d3 {margin-bottom: 20px;}
 .d4 {margin-top: 20px}

TIP： 在使用外边距属性时父标签的盒子模型不会改变
3.2. 简易设置

 .d1 {margin: 10px;}/*上下左右的外边距都是10px*/
 .d2 {margin: 10px 20px;}/*上下10px，左右20px*/
 .d3 {margin: 10px 20px 30px;}/*上10px，左右20px，下30px*/
 .d4 {margin: 10px 20px 30px 40px;}/*上10，右20，下30，左40（顺时针）*/

具体应用

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>盒子模型练习</title>
     <style type=text/css>
         .d1{
             /*转换为行内块元素*/
             display: inline-block;
             /*宽度不设置就会变为内容宽度总和，相对于父标签框架的80%*/
             width: 80%;
             height: 32px;
             border-top-color: #ff6600;
             border-top-width: 3px;
             border-top-style: solid;
             border-bottom-color: #e3e3e3;
             border-bottom-width: 1px;
             border-bottom-style: solid;
             margin: 0 10%;
         }
         .d1 a {
             /*转换为行内块元素*/
             display: inline-block;
             text-decoration:none;
             padding: 0 20px;
             font-size: 12px;
             line-height: 32px;
         }
         .d1 a:link{
              color: black
          }
         .d1 a:visited{
             color: black;
         }
         .d1 a:hover{
             background-color: #E3E3E3;
             color: #ff6600;
         }
     </style>
 </head>
 <body>
 <div class="d1">
     <a href="2.html">设为首页</a>
     <a href="2.html">联系我们</a>
     <a href="2.html">微博</a>
     <a href="2.html">QQ</a>
 </div>
 </body>
 </html>

TIP：在这段代码中使用了margin: 0 n%来设置水平居中，在放大和缩小时宽度的百分比大小是不会变化

利用margin的auto值实现块级元素的居中
在设置width之后可以用margin: 0 auto;来使块级元素水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型练习</title>
    <style type=text/css>
        .d1{
            width: 800px;/*事先要固定width的大小*/
            height: 32px;
            border-top-color: #ff6600;
            border-top-width: 3px;
            border-top-style: solid;
            border-bottom-color: #e3e3e3;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            margin: 0 auto;
        }
        .d1 a {
            /*转换为行内块元素*/
            display: inline-block;
            text-decoration:none;
            padding: 0 20px;
            font-size: 12px;
            line-height: 32px;
        }
        .d1 a:link{
             color: black
         }
        .d1 a:visited{
            color: black;
        }
        .d1 a:hover{
            background-color: #E3E3E3;
            color: #ff6600;
        }
    </style>
</head>
<body>
<div class="d1">
    <a href="2.html">设为首页</a>
    <a href="2.html">联系我们</a>
    <a href="2.html">微博</a>
    <a href="2.html">QQ</a>
</div>
</body>
</html>