Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型的基础和定位技术实战
Blogger Information
Blog 13
fans 2
comment 0
visits 10350
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
盒模型的基础和定位技术实战
北纬38
Original
603 people have browsed it

1.盒模型的结构

2.盒模型基础元素

padding：简写属性在一个声明当中所有内边距属性（auto/length/%）
Padding-top：上内边距
Padding-right：右内边距
Padding-bottom：下内边距
Padding-left：左内边距
padding里面同时写入两个值，前面的代表上下，后面的代表左右，写入四个值是上右下左
margin：外边距（auto居中/length像素值/%基于父元素宽度百分比）该属性可以有1-4个值。
border：边框。
Border-style：设置元素边框样式
Border-width：为元素所有边框设置宽度（thin细、medium默认、thick加粗、length）
Border-color：设置边框颜色
border：简写属性。用于把针对属性设置在一个声明中
**内边距代码*

  1.     <style type="text/css">
  2.     *{padding: 0px;}
  3.         span{border: 1px solid blue;
  4.         background-color: chartreuse;
  5.         padding: 10px;
  6.         padding-top: 20px;
  7.         padding-right: 60px;
  8.         padding-bottom: 5px;
  9.         padding-left: 100px;}
  10.     </style>
  11. </head>
  12. <body>
  13.     <br>
  14.     <span>php中文网</span>
  15. </body>

例图：

外边距代码：

  1.     <style type="text/css">
  2.     *{padding: 0px;margin: 0px;}
  3.     /* div边框、背景色、宽高度 */
  4.     div{border: 1px solid  blue;
  5.     width: 500px;height: 500px;
  6.     background-color: chartreuse;}
  7.     /* p标签边框、外边距 */
  8.     p{border: 2px solid red;
  9.     background-color: royalblue;
  10.     margin: 20px;
  11.     margin-top: 100px;
  12.     margin-right: 50px;
  13.     margin-bottom: 500px;
  14.     margin-left: 60px;}
  15.     </style>
  16. </head>
  17. <body>
  18.     <div>
  19.         <p>php中文网</p>
  20.     </div>
  21. </body>

例图：

3.box-sizing的使用

元素内容宽度可以用box-sizing进行调整,默认为内容宽度(content-box)
box-sizing: 适用于所有能设置 width 和 height 的所有元素
box-sizing: 通常只适用于块级, 也适合置换元素和行内块元素(因为都可以设置宽高)

  1.     <style>
  2.             div {
  3.       margin: 20px;
  4.       width: 150px;
  5.       height: 150px;
  6.       border: 1px solid black;
  7.     }
  8.     div:first-of-type {
  9.       background-color:springgreen;
  10.       background-clip: content-box;
  11.       box-sizing: border-box;
  12.       padding: 10px;
  13.     }
  14.     div:last-of-type {
  15.       background-color: pink;
  16.       background-clip: content-box;
  17.       box-sizing: content-box;
  18.       padding: 20px;
  19.     }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div></div>
  24.     <div></div>

例图：

4.定位元素的水平垂直对齐技术

  1.     <style type="text/css">
  2.     *{padding: 0px;margin: 0px;}
  3.     /* div边框、背景色、宽高度 */
  4.     div{border: 1px solid  blue;
  5.     width: 500px;height: 500px;
  6.     background-color: chartreuse;
  7.     /* 相对定位 */
  8.     position: relative;}
  9.     /* p标签边框、外边距 */
  10.     p{border: 2px solid red;
  11.     background-color: royalblue;
  12.     width: 100px;
  13.     height: 100px;
  14.     /* 绝对定位 */
  15.     position: absolute;
  16.     left: 0;
  17.     top: 0;
  18.     right: 0;
  19.     bottom: 0;
  20.     margin: auto;}
  21.     </style>
  22. </head>
  23. <body>
  24.     <div>
  25.         <p>php中文网</p>
  26.     </div>
  27. </body>

例图：

5.总结

  • 理解什么是外边距、内边距，默认改变顺序是上右下左。
  • box-sizing重新计算盒子大小的理解。
  • 定位的属性还是很重要的，理解什么是绝对定位和相对定位，有参照物才好修改值。
Correcting teacher：GuanhuiGuanhui

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