简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 这是学习的盒模型
Blogger Information
Blog 7
fans 0
comment 1
visits 1802
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
这是学习的盒模型
学，无止尽
Original
262 people have browsed it

盒模型

  1. {
  2.             margin: 0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.         }
  6.         .box{
  7.             width: 150px;
  8.             height: 100px;

五大属性

  1. `width`：(宽)
  2. `height`：(高)
  3. `padding`:内边距
  4. `border`:外框
  5. `margin`:外边距

border可见属性

  1. 可设置：`width`,`style`,`color`

样式重置/初始化
`

  1.    * {
  2.         margin: 0;
  3.         padding: 0;
  4.         box-sizing: border-box;
  5.     }

`
padding,margin（不可见属性）

  1. 仅设置：`width`
  2. 大多数内置元素都有默认：`padding/margin`
  3. 建议全部重置为0，以方便自定义布局

width,heiht

  1. 默认不包含：`padding`,`border`

box-sizing

  1. `box-sizing`:设置和模型计算边界
  2. `content-box`:默认值，仅包括内容区
  3. `border-box`:推荐值，宽高扩展到可视化边框

以上时和模型的常用写法

Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！