CSS中的盒子模型

最新推荐文章于 2024-07-18 20:18:47 发布

Jacob权力以赴

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量780

点赞数 26

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

本文链接：https://blog.csdn.net/m0_57465286/article/details/135720379

版权

前端web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一.选择器

1.结构伪类选择器

根据元素的结构关系查找元素。

:nth-child(公式)

公式中的n取值从 0 开始。

2.伪元素选择器

创建虚拟元素（伪元素），用来摆放装饰性的内容。

div::before {
 content: "before 伪元素";
 }
 div::after {
 content: "after 伪元素";
 }

必须设置 content: ””属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相同

二.盒子模型

1.组成

内容区域 – width & height
内边距 – padding（出现在内容与盒子边缘之间）
边框线 – border
外边距 – margin（出现在盒子外面）

div {
 margin: 50px;
 border: 5px solid brown;
 padding: 20px;
 width: 200px;
 height: 200px;
 background-color: pink;
 }

2.边框线

四个方向

属性名：border（bd）

属性值：边框线粗细线条样式颜色（不区分顺序）

div {
  border: 5px solid brown;
  width: 200px;
  height: 200px;
  background-color: pink;
 }

单方向边框线

属性名：border-方位名词（bd+方位名词首字母，例如，bdl）

属性值：边框线粗细线条样式颜色（不区分顺序）

div {
  border-top: 2px solid red;
  border-right: 3px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 5px solid orange;
  width: 200px;
  height: 200px;
  background-color: pink;
 }

内边距

作用：设置内容与盒子边缘之间的距离。

属性名：padding / padding-方位名词【添加 padding 会撑大盒子】

 div {
  /* 四个方向 内边距相同 */
  padding: 30px;
  /* 单独设置一个方向内边距 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 80px;
  width: 200px;
  height: 200px;
  background-color: pink;
 }

padding 多值写法【从上开始顺时针赋值，当前方向没有数值则与对面取值相同】

尺寸计算

默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border / padding 会撑大盒子

解决：手动做减法，减掉 border / padding 的尺寸內减模式：box-sizing: border-box

外边距

作用：拉开两个盒子之间的距离

属性名：margin 提示：与 padding 属性值写法、含义相同

版心居中

左右 margin 值为 auto（盒子要有宽度）

div {
 margin: 0 auto;
 width: 1000px;
 height: 200px;
 background-color: pink;
 }

清除默认样式

/* 清除默认内外边距 */
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 /* 清除列表项目符号 */
 li {
 list-style: none;
 }

元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

外边距问题

合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中的较大值生效

外边距塌陷

场景：父子级的标签，子级的添加上外边距会产生塌陷问题

现象：导致父级一起向下移动

.son {
 margin-top: 50px;
 width: 100px;
 height: 100px;
 background-color: orange;
 }

解决方法：

取消子级margin，父级设置padding
父级设置 over ow: hidden
父级设置 border-top

行内元素 – 内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

span {
 /* margin 和 padding 属性，无法改变垂直位置 */
 margin: 50px;
 padding: 20px;
 /* 行高可以改变垂直位置 */
 line-height: 100px;
 }

3.圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字+px / 百分比

提示：属性值是圆角半径

多值写法

技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

正圆形状：给正方形盒子设置圆角属性值为宽高的一半 / 50%

 img {
 width: 200px;
 height: 200px;
 border-radius: 100px;
 border-radius: 50%;
 }

胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半

div {
 width: 200px;
 height: 80px;
 background-color: orange;
 border-radius: 40px;
 }

4.盒子阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量模糊半径扩散半径颜色内外阴影

注意：

X 轴偏移量和 Y 轴偏移量必须书写
默认是外阴影，内阴影需要添加 inset

 div {
 width: 200px;
 height: 80px;
 background-color: orange;
 box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
 }

三.案例—新闻列表

1.目标图

2.结果及源码

<!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>新闻列表</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .news {
      margin: 100px auto;
      width: 360px;
      height: 200px;
      /* background-color: pink; */
    }

    .news .hd {
      height: 34px;
      background-color: #eee;
      border: 1px solid #dbdee1;
      border-left: 0;
    }

    .news .hd a {
      /* -1 盒子向上移动 */
      margin-top: -1px;
      display: block;
      border-top: 3px solid #ff8400;
      border-right: 1px solid #dbdee1;
      width: 48px;
      height: 34px;
      background-color: #fff;

      text-align: center;
      line-height: 32px;
      font-size: 14px;
      color: #333;
    }

    .news .bd {
      padding: 5px;
    }

    .news .bd li {
      padding-left: 15px;
      background-image: url(./images/square.png);
      background-repeat: no-repeat;
      background-position: 0 center;
    }

    .news .bd li a {
      padding-left: 20px;
      background: url(./images/img.gif) no-repeat 0 center;

      font-size: 12px;
      color: #666;
      line-height: 24px;
    }

    .news .bd li a:hover {
      color: #ff8400;
    }
  </style>
</head>
<body>
  <!-- 新闻区域 包含 标题 + 内容 -->
  <div class="news">
    <div class="hd"><a href="#">新闻</a></div>
    <div class="bd">
      <ul>
        <li><a href="#">点赞“新农人” 温暖的伸手</a></li>
        <li><a href="#">在希望的田野上...</a></li>
        <li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>
        <li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
        <li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈</a></li>
        <li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>
      </ul>
    </div>
  </div>
</body>
</html>