Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML基础-盒模型/auto属性值的用法
Blogger Information
Blog 57
fans 3
comment 0
visits 60370
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
HTML基础-盒模型/auto属性值的用法
岂几岂几
Original
1897 people have browsed it

框模型中的概念

框模型中的概念

  • 框模型: css中的所有元素都是使用一个矩形框来显示, 成为元素框

  • content: 内容区, 在框模型的中心, 呈现元素中的内容, 可能是文本, 或子元素等. 必须要有, 但不一定有内容. 用一幅画来类比, 就是画内容本身.

  • padding: 内边距, 围在内容区四周的第一层”矩形框”, 透明, 非必须, 可以设置宽度. 用一幅画来类比, 就是画面四周的留白.

  • border: 边框, 围在内容区四周的第二层”矩形框”, 非必须, 可以设置颜色, 边框样式和宽度. 用一幅画来类比, 就是画框部分.

  • margin: 外边距, 围在内容区四周的第三层”矩形框”, 透明, 非必须, 可以设置宽度. 假设有两幅画并列摆在一起, 外边距就是两幅画之间的间隔.

框模型中各个部分的值设置

  • box-sizing: 设置框模型的尺寸覆盖. 其值有:
    • border-box: 元素的宽度(width)属性值=内容区宽度+左右内边距+左右边框宽度; 元素的高度(height)属性值=内容区宽度+上下内边距+上下边框款速. 除开内容区宽高度, 其他都是固定值, 内容区宽高度由其他固定值计算得出.
    • content-box: 元素的宽度(width)属性值=内容区宽度; 元素的高度(height)属性值=内容区高度; 其他边框/边距均不在width和height范围中, 即, 元素的实际尺寸会大于其宽度/高度属性设置的大小.
  • border-left/border-right/border-top/border-bottom: 设置左/右/上/下边框的宽度, 样式和颜色. 如: border-left: 1px solid black;.
  • padding-left/padding-right/padding-top/padding-bottom: 设置左/右/上/下内边距的宽度. 如: padding-left: 10px;
  • margin-left/margin-right/margin-top/margin-bottom: 设置左/右/上/下外的宽度. 如: margin-left: 20px;
  • margin/padding/border: 同时设置四条外边距/内边距/边框的宽度, 样式和颜色(border).
    其中margin/padding取值:
    • 单值: 四条外边距/内边距设置为相同的数值; 如: margin: 10px;
    • 双值: 上下外边距/内边距设置为第一个值, 左右外边距/内边距设置为第二个值. 如: padding: 10px 20px;
    • 三值: 上外边距/内边距设置为第一个值, 左右外边距/内边距设置为第二个值; 下外边距/内边距设置为第三个值.
    • 四值: 第一到第四个值, 分别设置上, 右, 下, 左外边距/内边距.
      margin的取值:
    • 单值: 只设置边框宽度. margin: 1px;.
    • 双值: 设置宽度和样式. margin: 1px dashed;.
    • 三值: 设置宽度, 样式和颜色. margin: 1px solid pink;.

auto的用法

  • auto: 外边距可以设置宽度为auto.
    • 如果是块级元素, 水平方向的一条边距被设置为auto, 另一边是确定的值, 则先匹配确定值, auto匹配剩余的宽度. 即, 会实现左对齐/右对齐的效果.
    • 如果是块级元素, 水平方向的两条边距都被设置为auto, 则会达到水平居中的效果.
    • 块级元素的垂直方向, 行内元素的所有方向被设置为auto, 则auto都会被当做0值来设置.

实例演示auto的用法

  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.             border: 0;
  10.             padding: 0;
  11.             border: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         .item {
  15.             width: 40px;
  16.             height: 40px;
  17.             background-color: orange;
  18.             margin: 10px 0;
  19.         }
  20.         /* 使用auto实现右对齐效果 */
  21.         .first {
  22.             margin: 0 20px 0 auto;
  23.         }
  24.         /* 使用auto实现左对齐效果 */
  25.         .second {
  26.             margin: 10px auto 0 20px;
  27.         }
  29.         /* 使用auto实现水平居中的效果 */
  30.         .third {
  31.             margin: 0 auto;
  32.         }
  34.         /* 垂直方向使用auto, 相当于设置值为0 */
  35.         .fourth {
  36.             margin: auto 20px;
  37.         }
  39.         /* 演示垂直方向使用auto, 相当于设置值为0用, 会紧贴第四个小方块 */
  40.         .fifth{
  41.             width: 100%;
  42.             margin: 0;
  43.         }
  45.         /* 如果父元素没有设置高度, 即父元素的高度是被子元素撑开, 那么当其子元素浮动后, 
  46.           会引起父元素高度塌陷, 使用overfloat: `auto`可以解决这个问题 */
  47.         .parent {
  48.             margin-top: 30px;
  49.             padding: 20px;
  50.             background-color: plum;
  51.             overflow: auto;
  52.         }
  54.         .son {
  55.             width: 120px;
  56.             height: 80px;
  57.             background-color: wheat;
  58.             /* 浮动起来 */
  59.             float: left;
  60.         }
  61.     </style>
  62. </head>
  63. <body>
  64.     <div class="item first">1</div>
  65.     <div class="item second">2</div>
  66.     <div class="item third">3</div>
  67.     <div class="item fourth">4</div>
  68.     <div class="item fifth">5</div>
  70.     <div class="parent">
  71.         <div class="son">
  73.         </div>
  74.     </div>
  75. </body>
  76. </html>

运行效果图:

学习心得

  • 熟练掌握盒模型对理解HTML的布局方式有很大帮助.
  • 使用auto属性值, 在没有使用布局flex或grid的传统布局中, 可以实现块级元素的左对齐, 右对齐和居中对齐.
  • 如果父元素没有设置高度, 即父元素的高度是被子元素撑开, 那么当其子元素浮动后, 会引起父元素高度塌陷, 使用overfloat: auto可以解决这个问题.
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