登录  /  注册
博主信息
博文 33
粉丝 0
评论 0
访问量 47634
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS 盒子模型理解
Lon
原创
1403人浏览过

css 盒子模型理解

一、css盒子模型概念

css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

实例

  1. div {
  2. width: 300px;
  3. border: 5px solid green;
  4. padding: 15px;
  5. margin: 25px;
  6. }

图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最外层是外边距(margin),整个构成了框模型。通常我们设置的背景显示区域,就是内容、内边距、边框这一块范围。而外边距margin是透明的,不会遮挡周边的其他元素。
元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度;
元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度。

二、box-sizing属性介绍

1、属性定义及使用说明

box-sizing 属性定义计算一个元素的总宽度和总高度,主要设置是否需要加上内边距(padding)和边框等。
默认情况下,元素的宽度(width) 和高度(height)计算方式如下:

  1. width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
  2. height(高度) + padding(内边距) + border(边框) = 元素实际高度

2、语法 box-sizing : content-box|border-box|inherit;

(1) content-box ,默认值,可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。
即总宽度=margin+border+padding+width
(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
即总宽度=margin+width
(3) inherit , 规定应从父元素继承 box-sizing 属性的值

3.实例

  1. div {
  2. box-sizing: border-box;
  3. width: 300px;
  4. border: 25px solid green;
  5. padding: 25px;
  6. }

注意:

1 一个box宽度为100%,又想要两边有内间距,这时候用就比较好
2 全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减,它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学