05盒子模型

[目录]

一、盒子模型的概念

  1. 盒子模型用来“放”网页中的各种元素
  2. 网页设计中内容,如文字、图片等元素,都可以是盒子(DIV嵌套)
  3. 网页中盒子模型配置镜像图片

二、盒子属性

  1. 宽度属性
    宽度with/最大宽度max-width/最小宽度min-width:长度值/百分比/auto
  2. 高度属性
    高度height/最大高度max-height/最小高度min-height:长度值/百分比/auto
  3. 哪些HTML元素可以设置高和宽属性
    • 块级元素
    • 替换元素:浏览器根据其标签的元素与属性来判断显示的内容<img>、<input>、<textarea>等
  4. max-height(width)/min-height(width)有兼容性问题,IE不支持
  5. 边框属性:设置元素边框宽度
    border-width:thin|medium|thick|长度值
  6. 设置元素边框颜色
    border-color:颜色/transparent
  7. 设置元素边框样式
    border-color:颜色/transparent
  8. 设置元素边框样式
    border-style:值
描述
none定义无边框、默认值
hidden与none相同,除非在表格元素中解决边框冲突
dotted定义点状边框,在大多数浏览器中呈现为实线
dashed定义虚线,在大多数浏览器中呈现为实线
solid定义实线
double定义双线
groove定义3D凹槽边框
ridge定义3D垄状边框
inset定义3D inset 边框
outset定义3D outset 边框
inherit规定应该从父元素继承边框
  1. 边框缩写
    border:宽度 样式 颜色
  2. 内边距属性
    设置元素的内容与边框之间的距离(内边距或填充)分四个方向(上右下左)
    • padding-方向:长度值|百分比
    • 值不能为负
  3. 内边距属性缩写
padding:值1;//4个方向都为值1
padding:值1 值2;//上下=值1  左右=值2
padding:值1 值2 值3;//上=值1    左右=值2    下=值3
padding:值1 值2 值3 值4;//上=值1    右=值2  下=值3  左=值4
  1. 外边距属性
    设置元素的内容与边框之间的距离(外边距)分四个方向(上右下左)
    • margin-方向:长度值|百分比
    • 值可为负值
  2. 外边距属性缩写
margin:值1;//4个方向都为值1
margin:值1 值2;//上下=值1  左右=值2
margin:值1 值2 值3;//上=值1    左右=值2    下=值3
margin:值1 值2 值3 值4;//上=值1    右=值2  下=值3  左=值4
  1. 垂直方向,两个相邻元素都设置外边距,外边距会发生合并,合并后外边距高度=两个发生合并外边距的高度中最大值
  2. 盒子模型计算
    • 宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距
    • 高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距
  3. 如果没有Doctype文档类型声明各浏览器按照自己的方式解析,如果有按照标准盒子模型来解析
  4. display属性
描述
inline元素将显示为内联元素,元素前后没有换行符
block元素将显示为块级元素,元素前后会带有换行符
inline-block行内块元素,元素呈现为inline,具有block相应特性
none此元素不会被显示
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值