个人博客
0%

【CSS】盒子模型

发表于 分类于

简单概述页面布局基础，盒子模型的认识，以及综合案例

1 网页布局的本质

  • 网页布局的过程：
    • （1）准备好相关的网页元素，网页元素都基本是盒子Box
    • （2）利用CSS设置好盒子样式，然后摆放到相应的位置
    • （3）往盒子里面装内容
  • 网页布局的本质：摆放盒子

2 盒子模型组成

  • 盒子模型：被html页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器
  • CSS盒子模型：封装着边框，外边距，内边距，和实际内容

3 边框

  • 可以通过border来设置边框的宽度，样式，颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*设置边框宽度*/
border-width: ..px;

/*设置边框样式*/
border-style:
  none 
  hidden
  dotted   /*点线*/
  dashed   /*虚线*/
  solid    /*实线*/
  doubled  /*双实线*/
  groove   /*3D凹槽*/
  ridge    /*菱形边框*/
  inset    /*3D凹边*/
  outset   /*3D凸边*/

/*设置边框颜色*/
border-color: red;

/*边框整合写法：顺序无要求*/
border: border-width | border-style | border-color;

/*可以按照边框的上下左右设置*/
border-top: border-width | border-style | border-color;
border-buttom: border-width | border-style | border-color;
border-left: border-width | border-style | border-color;
border-right: border-width | border-style | border-color;

/*合并相邻的边框*/
border-collapse: collapse
  • 边框会影响盒子的大小，添加边框后的，盒子实际的大小=边框宽度 + 盒子宽度

4 内边距

4.1 css使用

1
2
3
4
5
6
7
8
9
10
11
12
/*上下左右内边距*/
padding-top: ..px;
padding-buttom: ..px;
padding-left: ..px;
padding-right: ..px;

/*内边距复合写法*/
padding:
  ..px                /*1个值，就上下左右内边距都是这值*/
  ..px ..px           /*2个值*，第一个是上下边距值，第二个是左右边距值/
  ..px ..px ..px      /*3个值，第一个值是上边距，第二个是左右边距，第三个是下边距*/
  ..px ..px ..px ..px /*4个值，分别是上右下左边距值，即顺时针算*/
  • 内边距也会影响盒子的大小，盒子的实际大小 = 内边距大小 + 盒子宽度
  • 若盒子没有给定宽度大小，则内边距不会撑开盒子大小

5 外边距

5.1 css使用

1
2
3
4
5
6
7
8
9
10
11
12
/*上下左右外边距*/
margin-top: ..px
margin-buttom: ..px;
margin-left: ..px;
margin-right: ..px

/*外边距复合写法：和padding使用方法一样*/
margin:
  ..px
  ..px ..px
  ..px ..px ..px
  ..px ..px ..px ..px

5.2 外边距应用

  • （1）块级盒子水平居中

    • 1、盒子指定宽度；
    • 2、左右外边距设置为auto，即margin: 0 auto;

  • （2）行内元素、行内块元素水平居中

    • 在其父元素添加text-align: center即可

5.3 外边距合并

  • 对于两个嵌套关系（父子关系）的块元素，子元素的外边距不会影响自己，反而是影响父元素的外边距
  • 解决方法：
    • （1）为父元素定义上边框
    • （2）为父元素定义上内边距
    • （3）为父元素添加overflow: hidden

6 清除网页自带内外边距

  • 一些浏览器会自带内外边距，会影响我们的页面布局，所以在布局前，先清除内外边距

    1
    2
    3
    4
    5
    /* css的第一行代码 */
    * {
      margin: 0;
      padding: 0;
    }

  • 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距

7 综合案例

7.1 新浪导航栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新浪导航栏</title>
  <style>
    .nav {
      /*边框*/
      border-top: 3px solid #ff8500;
      border-bottom: 1px solid #edeef0;

      /*大小，背景*/
      height: 41px;
      background-color: #fcfcfc;

      /*调整文字位置*/
      line-height: 41px;
    }

    .nav a {
      /*转变成行内块元素，可以调整高度，也可以在同一行显示*/
      display: inline-block;
      height: 41px;

      /*文字调整*/
      font-size: 12px;
      color: #4c4c4c;
      text-decoration: none;

      /*内边距，利用内边距撑开盒子的宽度，而不是给固定的大小*/
      padding: 0 20px;
    }

    a:hover {
      background-color: #eee;
      color: #ff8500;
    }
  </style>
</head>
<body>
  <div class="nav">
    <a href="#">新浪导航</a>
    <a href="#">手机新浪网</a>
    <a href="#">移动客户端</a>
    <a href="#">微博</a>
  </div>
</body>
</html>

7.2 产品模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>产品模块</title>
  <style>
    /*消除网页自带的内外边距*/
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #f5f5f5;
    }

    .box {
      width: 298px;
      height: 415px;
      /*水平居中*/
      margin: 0 auto;
      background-color: white;
    }

    .box img {
      /*跳转图片大小与父元素一样宽*/
      width: 100%;
    }

    .review {
      font-size: 14px;
      height: 70px;
      margin-top: 28px;
      padding: 0 28px;
    }

    .appraise {
      font-size: 12px;
      color: #b0b0b0;
      margin-top: 20px;
      padding: 0 28px;
    }

    .info h4{
      display: inline-block;
      font-size: 14px;
      margin: 15px 28px 0;
      /*文字不加粗*/
      font-weight: 400;
    }

    .info span {
      font-size: 14px;
      color: #ff6700;
      border-left: 2px solid #ebe4e0;
      padding-left: 15px;
    }

  </style>
</head>
<body>
  <div class="box">
    <img src="img.jpg"/>
    <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
    <div class="appraise">
      来自于117384232的评价
    </div>
    <div class="info">
      <h4>Redmi AirDots真无线蓝...</h4>
      <span>99.9元</span>
    </div>
  </div>
</body>
</html>

7.3 快报模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>快报模块</title>
  <style>
    /*清除页面自带内外边距*/
    * {
      margin: 0;
      padding: 0;
    }

    /*最外层盒子布局（宽，高，边框，位置）*/
    .box {
      width: 248px;
      height: 163px;
      border: 1px solid #ccc;
      margin: 100px auto;
    }

    /*标题布局（文字大小，取消加粗，高，行高居中，下边框，内边距）*/
    .box h3 {
      font-size: 14px;
      font-weight: 400;
      height: 32px;
      line-height: 32px;
      border-bottom: 1px dotted #ccc;
      padding-left: 15px;
    }

    /*列表整体布局（上外边距）*/
    .box ul {
      margin-top: 7px;
    }

    /*无序列表布局（去除列表原点，高，行高居中，左内边距）*/
    .box ul li {
      list-style: none;
      height: 23px;
      line-height: 23px;
      padding-left: 20px;
    }

    /*列表链接布局（文字大小，颜色，无下划线）*/
    .box ul li a {
      font-size: 12px;
      color: #666666;
      text-decoration: none;
    }

    /*鼠标浏览链接（下划线）*/
    .box ul li a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div class="box">
    <h3>品优购快报</h3>
    <ul>
      <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
      <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
      <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
      <li><a href="#">【特惠】NS只需1999元购买！</a></li>
      <li><a href="#">【特惠】怪物猎人Rise只需300元！</a></li>
    </ul>
  </div>
</body>
</html>