博客列表 >这是学习的盒模型

这是学习的盒模型

学,无止尽
学,无止尽原创
2023年03月16日 19:59:20270浏览

盒模型

  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`:推荐值,宽高扩展到可视化边框

以上时和模型的常用写法

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议