CSS盒模型（border、padding、margin、content）

最新推荐文章于 2022-07-15 20:26:57 发布

逝者如斯夫。

最新推荐文章于 2022-07-15 20:26:57 发布

阅读量176

点赞数

分类专栏： HTML +CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_60323200/article/details/119191685

版权

HTML +CSS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

边框（border）

边框复合语法：border-width | border-style | border-color;（无先后顺序）
border-style:solid(实线) dashed(虚线) dotted(点线）;
border-top:2px solid red ; border-bottom: ; border-left: ; border-right: ;
border会影响盒子实际大小，实际大小=内容宽度 + border宽度 * 2

表格细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse: collapse;

collapse单词是合并的意思
border-collapse: collapse;表示相邻边框合并子在一起

用border做三角形：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .one {
        width: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 50px solid red;
        border-bottom: 50px solid pink;
      }
      .two {
        width: 0;
        border-left: 50px solid black;
        border-right: 50px solid blue;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="one"></div>
    <div class="two"></div>
  </body>
</html>

圆角边框

语法：

border-radius: length;
<!-- length是圆的半径，和矩形的两个边相切 -->

参数值可以为数值或是百分比的形式
如果是正方形，想要设置成一个圆，把数值改为高度的一半即可，或者写为50%
如果是矩形：圆角边框设置为高度的一半可以做圆角矩形
复合属性跟四个值，分别代表左上角、右上角、右下角、左下角

属性分开写

border-top-left-radius: ;
border-top-right-radius: ;
border-bottom-right-radius: ;
border-bottom-left-radius: ;

用圆角边框做奥运五环：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: blue 10px solid;
      }
      #two {
        border-color: black;
        margin-top: -220px;
        margin-left: 229px;
      }
      #three {
        border-color: red;
        margin-top: -220px;
        margin-left: 458px;
      }
      #four {
        border-color: yellow;
        margin-top: -110px;
        margin-left: 110px;
      }
      #five {
        border-color: green;
        margin-top: -220px;
        margin-left: 338px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="five"></div>
  </body>
</html>

内边距（padding）

一个值------padding: 20px;（上下左右内边距均为20px）
两个值------padding: 20px 30px; (上下20px, 左右30px)
三个值------padding: 7px 10px 50px; （上7px,左右10px,下50px）
四个值------padding:2px 3px 4px 5px;（上2px,右3px下4px,左5px）

正常盒模型设置padding和border会让元素变大
IE盒模型设置padding和border不会让元素变大，会压缩内容区域
子类盒子在没有指定宽度的情况下不会撑大父类盒子的宽

margin（外边距）

符合属性与padding一致；
相对于相邻的元素
元素叠压现象：上下两个元素同时设置margin-bottom和margin-top时会发生叠压，取最大值
元素塌陷：第一个子元素的margin-top会传给父元素。解决方案：①给父元素设置border ②给父元素设置内边距 ③给父元素设置overflow: hidden; （overflow: hidden;是超出部分隐藏。overflow-x: hidden;超出部分横向隐藏，纵向滚动条；overflow-y: hidden;超出部分纵向隐藏，横向滚动条。建议使用第③种方法）
给块级盒子设置水平居中：margin: 0 auto;（没有上下外边距，左右水平居中）
给行内元素或行内块元素设置水平居中：给其父元素添加 text-align:center即可。
行内元素尽量只设置左右内外边距

逝者如斯夫。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型（border、padding、margin、content）

边框（border）边框复合语法：border-width | border-style | border-color;（无先后顺序） border-style:solid(实线) dashed(虚线) dotted(点线）; border-top:2px solid red ; border-bottom: ; border-left: ; border-right: ; border会影响盒子实际大小，实际大小=内容宽度 + border宽度 * 2内边距（padding）...
复制链接

扫一扫

专栏目录