Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型类型讲解，常用元素定位对齐方式简介
Blogger Information
Blog 16
fans 0
comment 0
visits 15844
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
盒模型类型讲解，常用元素定位对齐方式简介
Allen在php中文网的学习笔记
Original
508 people have browsed it

1218作业

作业标题：1218作业
作业内容：1. 实例演示box-sizing属性; 2. 实例演示常用的元素居中方式
演示地址:https://php.gzj2001.com/1218/

作业代码

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>1218作业</title>
  9.     <style>
  10.         * {
  11.             font-size: 20px;
  12.         }
  14.         /* ---------1.box-sizing------------- */
  15.         .box {
  16.             width: 10em;
  17.             height: 10em;
  18.             background-color: yellow;
  19.             border: 5px red solid;
  20.             padding: 5px;
  21.             background-clip: content-box;
  22.             box-sizing: content-box;
  23.         }
  25.         .box2 {
  26.             width: 10em;
  27.             height: 10em;
  28.             background-color: green;
  29.             border: 5px red solid;
  30.             padding: 5px;
  31.             background-clip: content-box;
  32.             box-sizing: border-box;
  33.         }
  35.         /* -----------2.居中------------ */
  36.         /* 2.1水平居中 */
  37.         .center {
  38.             width: 20em;
  39.             border: 1px red solid;
  40.         }
  42.         .center p {
  43.             /* p标签水平居中 */
  44.             text-align: center;
  45.         }
  47.         .center div {
  48.             width: 5em;
  49.             height: 5em;
  50.             background-color: blue;
  51.             margin: 0 auto;
  52.         }
  54.         /* 2.2垂直居中 */
  55.         .line {
  56.             width: 15em;
  57.             height: 15em;
  58.             border: 1px red solid;
  59.             background-color: pink;
  60.         }
  62.         .line a {
  63.             /* line-height: 与容器高度相等即可垂直居中; */
  65.             line-height: 15em;
  66.         }
  68.         .line2 {
  69.             width: 15em;
  70.             /* 为了使块元素垂直居中，不设置高度 这里应该由padding寄出来 */
  71.             /* height: 15em; */
  72.             border: 1px red solid;
  73.             background-color: pink;
  74.             padding: 3em 0;
  75.         }
  77.         .line2>div {
  78.             width: 3em;
  79.             height: 3em;
  80.             background-color: orange;
  82.         }
  84.         /* 2.3水平垂直居中 */
  86.         /* 2.3.1行内元素 */
  87.         /* text-align+ line-height */
  88.         .end {
  89.             width: 10em;
  90.             height: 10em;
  91.             background-color: #999;
  92.             text-align: center;
  93.             line-height: 10em;
  94.         }
  95.     </style>
  96. </head>
  98. <body>
  99.     <div class="box">220*220px content-box 不包含 padding border大小</div>
  100.     <br>
  101.     <div class="box2">200*200px border-box 包含了padding border大小</div>
  103.     <br>
  104.     <div class="center">
  105.         <p>水平居中</p>
  106.         <div>水平居中</div>
  107.     </div>
  108.     <br>
  109.     <div class="line">
  110.         <a href="">垂直居中</a>
  111.     </div>
  112.     <br>
  113.     <div class="line2">
  114.         <div> 块垂直居中</div>
  115.     </div>
  117.     <br>
  118.     <div class="end">
  119.         <a href="">aaaaaaa</a>
  121.     </div>
  122. </body>
  124. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post