search

博客列表 >PHP大牛成长之路：盒模型与定位

PHP大牛成长之路：盒模型与定位

周Sir-BLOG
周Sir-BLOG原创
2020年06月18日 21:30:20724浏览

1、盒模型

1.1、盒模型常用属性

盒模型常用属性主要有3个

  1. border (边框)
  2. padding （内边距）
  3. margin（外边距）

以上属性还支持单独设置上/下/左/右属性

  • border (边框)

    border 比较特殊, 除了可以设置宽度, 还可以设置样式和颜色,所以有更多的属性

  • border:(4边框)border: 1px solid #ccc

    • border-top:(上边框)border-top: 1px solid #ccc
    • border-left(左边框):border-left: 1px solid #ccc
    • border-bottom(下边框):border-bottom: 1px solid #ccc
    • border-right(右边框):border-right: 1px solid #ccc

  • 除上下左右外，还支持单独为每个边框线设定宽度/样式/颜色，非常灵活。比如：

    • border-top-width
    • border-top-style
    • border-top-color

其它边框同样可以单独设置

1.2、盒模型属性示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>盒模型属性示例</title>
  7.     <style>
  8.       input {
  9.         border: none;
  10.         border-bottom: 1px solid #ccc;
  11.       }
  12.       .box1 {
  13.         width: 50px;
  14.         height: 50px;
  15.         background: lightblue;
  16.       }
  17.       .box2 {
  18.         width: 50px;
  19.         height: 50px;
  20.         background: lightpink;
  21.         margin-top: 10px;
  22.       }
  23.       .box3 {
  24.         width: 200px;
  25.         height: 200px;
  26.         background: lightblue;
  27.         padding: 50px;
  28.         border: 1px solid #000;
  29.         background-clip: content-box;
  30.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <p>1、只要下边框的input输入框：</p>
  36.     <input type="text" name="user" placeholder="请输入用户名" />
  37.     <hr />
  38.     <p>2、box2使用margin-top分开两个盒子间距</p>
  39.     <div class="box1">box1</div>
  40.     <div class="box2">box2</div>
  41.     <hr />
  42.     <p>3、使用了50像素的内边距/内容区不变，整体尺寸变大。</p>
  43.     <p>白色区域为内边距，padding=border到content距离</p>
  44.     <div class="box3">
  45.       box3
  46.     </div>
  47.   </body>
  48. </html>

效果如下：

2、元素大小的计算

  • 元素的计算方式
    1.     .box {
    2.       width: 200px;
    3.       height: 200px;
    4.       padding: 3px;
    5.       margin: 10px;
    6.       border: 1px solid #000;
    7.       background: lightblue;
    8.     }

盒子宽/高都设置了200像素，实际为208像素，可以看出：
盒子的具体宽高=content+padding+border=200+6+2=208

结论：盒子大小受边框及内边距影响，布局时应该考虑。

  • 如果希望盒子大小不受边框及内边距影响，可以使用以下属性：

box-sizing: border-box;

使用后盒子大小不受边框及内边距影响，但内容区会缩小，如图所示：

3、定位

一旦一个元素被添加了position:属性 ,且值非static,那么它就是定位元素。

3.1 相对定位

  • position: relative; 相对定位：是相对自己做了偏移，这个元素仍然在文档流中的位置不释放

  • 例:使用相对定位做出九宫格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       * {
  9.         box-sizing: border-box; /*盒子重新计算大小，不受边距而变化*/
  10.       }
  11.       div {
  12.         width: 50px;
  13.         height: 50px;
  14.         text-align: center;
  15.         line-height: 50px;
  16.         border: 1px solid #ccc;
  17.         background-color: lightcoral;
  18.       }
  19.       .box2{
  20.         position: relative;
  21.         top:-50px;
  22.         left: 50px;
  23.       }
  24.       .box3{
  25.         position: relative;
  26.         top:-100px;
  27.         left: 100px;
  28.       }
  29.       .box4{
  30.         position: relative;
  31.         top:-100px;
  32.       }
  33.       .box5{
  34.         position: relative;
  35.         top:-150px;
  36.         left: 50px;
  37.       }
  38.       .box6{
  39.         position: relative;
  40.         top:-200px;
  41.         left: 100px;
  42.       }
  43.       .box7{
  44.         position: relative;
  45.         top:-200px;
  46.       }
  47.       .box8{
  48.         position: relative;
  49.         top:-250px;
  50.         left: 50px;
  51.       }
  52.       .box9{
  53.         position: relative;
  54.         top:-300px;
  55.         left: 100px;
  56.       }
  57.     </style>
  58.   </head>
  59.   <body>
  60. <div class="box1">1</div>
  61. <div class="box2">2</div>
  62. <div class="box3">3</div>
  63. <div class="box4">4</div>
  64. <div class="box5">5</div>
  65. <div class="box6">6</div>
  66. <div class="box7">7</div>
  67. <div class="box8">8</div>
  68. <div class="box9">9</div>
  69.   </body>
  70. </html>

3.2 绝对定位

  • position: absolute; 绝对定位:相对于它的定位父级进行定位的

  • 使用绝对定位将盒子水平排列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box; /*盒子重新计算大小，不受边距而变化*/
  12.       }
  13.       div {
  14.         width: 50px;
  15.         height: 50px;
  16.         text-align: center;
  17.         line-height: 50px;
  18.         background-color: lightcoral;
  19.       }
  20.       .box2 {
  21.         position: absolute;
  22.         top: 0;
  23.         left: 50px;
  24.       }
  26.       .box3 {
  27.         position: absolute;
  28.         top: 0;
  29.         left: 50px;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div class="box1">1</div>
  35.     <div class="box2">
  36.       2
  37.       <div class="box3">3</div>
  38.     </div>
  39.   </body>
  40. </html>

box2的定位父级是body,是根据body进行偏移；
box3的父级是box2,是根据box2进行偏移。

3.3 固定定位

  • position: fixed;忽略你的定位父级，总是相对于<body>定位

总结：

  • 学习了盒模型与定位，对布局有了更进一步的理解，但发现一个问题，绝对定位偏移量好像是从content+一边的border计算的？希望老师解答。
上一条：伪类选择器(不分组与分租)下一条：表格实现购物车、表单实现用户注册页面
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多