Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实例演示box-sizing属性; 常用的元素居中方式
Blogger Information
Blog 19
fans 0
comment 1
visits 14079
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
实例演示box-sizing属性; 常用的元素居中方式
心
Original
558 people have browsed it

盒子的大小

应用 属性 值
宽 width em
高 height em
背景色 background-color red

影响盒子的因素

1.padding(内边距) border(边框)

  1. padding 可视化 background-clip:conter-box;
    3.盒子尺寸的计算公式：width/height+padding2 + border2
  2. 使盒子大小不受width/height之外属性受影响（padding)
    5.既然padding和border是后加的，所以减去
  3. (笨办法)width: calc(20em-24px);height:calc(15em-24px)
    7.css 新属性 box-sizing:让用户自己决定计算盒子大小的方案 box-sizing:content-box;
    8.content-box:w3c标准盒子模型，width/height不含padding/border
    9.box-sizing:border-box; border-box:padding/border 计算在内,这种盒子是IE盒子
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>标准盒子模型</title>
  6.         <style>
  7.             .demo{
  8.                 font-size:10px;
  9.             }
  10.             .demo{
  11.                 /* 宽200px*高200px*/
  12.                 width:20em;
  13.                 height:20em;
  14.                 background-color:red;
  15.             }
  16.             /*让padding 可视化*/
  17.             .demo{
  18.                 /*padding是20px*/
  19.                 padding:2em;
  20.                 border:solid 2em;
  21.                 background-clip:content-box;
  22.             }
  23.             /*使用w3c制定的标准  得到标准的盒子模型*/
  24.             .demo{
  25.                 box-sizing:content-box;
  26.             }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <div class="demo"></div>
  31.     </body>
  32. </html>

mragin 对盒子位置的影响

  1. margin 在水平方向是 累加的
  2. margin 在垂直方向 大值会覆盖小的
  3. magin 对盒子大小没有影响，只对位置有影响
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>标准盒子模型</title>
  6.         <style>
  7.             .demo{
  8.                 font-size:10px;
  9.             }
  10.             .demo{
  11.                 /* 宽200px*高200px*/
  12.                 width:20em;
  13.                 height:20em;
  14.                 background-color:red;
  15.             }
  16.             /*垂直方向外边距是3em  3>2 会覆盖*/
  17.             .demo:first-of-style{
  18.                 margin:2em;
  19.             }
  20.             .demo:first-of-style+*{
  21.                 margin:3em;
  22.                 /*水平是5em*/
  23.                 float:right;
  24.             }
  25.         </style>
  26.     </head>
  27.     <body>
  28.         <div class="demo"></div>
  29.         <div class="demo"></div>
  31.     </body>
  32. </html>

全局盒子大小的设置

*{margin:0;padding:0;box-sizing:border-box;} 清空所有元素的magin,padding,使用IE盒子的模型；

元素高度：内容超出

1.文档流：是元素默认布局方式
2.一般不使用 height ，这样会使文本溢出

  1. 控制文档溢出(默认值)， overflow:visible;隐藏值（hidden）
  2. 使用滚动条被隐藏的内容overflow:scroll;overflow-y:scroll;overflow-x:scroll;
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>标准盒子模型</title>
  6.         <style>
  7.             /*文档流*/
  8.             .demo{
  9.                 width:20em;
  10.                 height:20em;
  11.                 border:1px solid #000;
  12.                 /*控制文档溢出 默认值 是显示*/
  13.                 overflow:visible;
  14.                 /*是文本隐藏 hidden*/
  15.                 overflow:hidden;
  16.                 /*使用auto 是滚动自动化*/
  17.                 overfolow:auto;
  18.             }
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <div class="demo"></div>
  23.         <div class="box"></div>
  24.     </body>
  25. </html>

容器最小和最大

  1. 最小高度（height:auto）由内容自己撑开
  2. 最大高度是设置 height:500px;
  3. min-height 限制最小高度 没有设置最大高度，内容超过最小高度会自动伸展。内容不足使用最小高度，使页面不会塌掉。

4.max-height 设置了最大高度，文本溢出时要使用 overflow:auto

水平居中

1.文本水平居中：text-align:center;
2.块元素水平居中 margin-left:auto;margin-right:auto;一般使用 margin:auto;

垂直居中

1.文本垂直居中 line-height:
2.块元素垂直居中 padding:

水平+垂直解决方案

  1. 文本水平居中: text-align:center;line-height:

  2. 块元素的 padding 和margin

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