Blogger Information
Blog 37
fans 2
comment 0
visits 26509
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1218作业 -1. 实例演示box-sizing属性; 2. 实例演示常用的元素居中方式
世纪天城
Original
554 people have browsed it

实例演示box-sizing属性

  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>实例演示box-sizing属性</title>
  8. <style>
  9. /* 盒子的padding和border的像素会叠加到盒子的宽度和高度上,现在盒子的高度和宽度均为250px */
  10. /* 因此我们在布局时需要精确计算好像素,不使其不注意时撑破父级元素。 */
  11. .div1{
  12. width: 200px;
  13. height: 200px;
  14. background-color: burlywood;
  15. padding: 20px;
  16. border: cadetblue 5px solid;
  17. }
  18. /* 我们可以使用box-sizing属性就可以很好地解决这个问题 在此时 box-sizing: border-box;会将padding和border计算在盒子里面
  19. 此时盒子的高度和宽度均为200px
  20. */
  21. .div2{
  22. width: 200px;
  23. height: 200px;
  24. background-color: burlywood;
  25. padding: 20px;
  26. border: cadetblue 5px solid;
  27. box-sizing: border-box;
  28. /* box-sizing: content-box; 为默认值,表示w3c盒子,它不包含padding和border,(把内边距和边框计算在内容区域外)盒子会被撑开。*/
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="div1">我是普通盒子</div>
  34. <hr>
  35. <div class="div2">box-sizing盒子</div>
  36. </body>
  37. </html>



实例演示常用的元素居中方式

  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>实例演示常用的元素居中方式</title>
  8. <style>
  9. body{
  10. font-size: 20px;
  11. }
  12. div{
  13. width: 30em;
  14. height: 10em;
  15. background-color: chocolate;
  16. }
  17. /* 块元素的水平居中 */
  18. /* text-align: center;水平居中 */
  19. /* text-align: left;左对齐 */
  20. /* text-align: right;右对齐 */
  21. /* line-height: (100px与高度一致实现垂直居中); */
  22. /* text-align: center;+line-height: 100px; 对行类元素无效*/
  23. .div1 p{
  24. text-align: center;
  25. /* text-align: left; */
  26. /* text-align: right; */
  27. line-height: 10em;
  28. box-sizing: content-box;
  29. }
  30. /* 利用margin:0 auto;水平居中 +line-height: 100px;垂直居中 但要给一个宽度 否则无效*/
  31. .div2 p{
  32. width: 20em;
  33. line-height: 10em;
  34. margin:0 auto;
  35. box-sizing: content-box;
  36. background-color: cornflowerblue;
  37. }
  38. /* padding: ;水平居中+垂直居中 */
  39. .div3 p{
  40. padding: 5em 6em;
  41. box-sizing: content-box;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div class="div1">
  47. <p>
  48. text-align: center; 100px水平居中;
  49. </p>
  50. </div>
  51. <hr>
  52. <div class="div2">
  53. <p>margin:0 auto;水平居中</p>
  54. </div>
  55. <hr>
  56. <div class="div3">
  57. <p>padding: ;水平居中+垂直居中</p>
  58. </div>
  59. </body>
  60. </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