CSS盒子模型之详解
前言:
盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局。
一、css盒子模型概念
CSS盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:
图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最外层是外边距(margin),整个构成了框模型。通常我们设置的背景显示区域,就是内容、内边距、边框这一块范围。而外边距margin是透明的,不会遮挡周边的其他元素。
那么,
元素框的总宽度 = 元素(element)的width padding的左边距和右边距的值 margin的左边距和右边距的值 border的左右宽度
元素框的总高度 = 元素(element)的height padding的上下边距的值 margin的上下边距的值 + border的上下宽度。
二、css 外边距合并(叠加)
两个上下方向相邻的元素框垂直相遇时,外边距会合并,合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值,如图:
比较容易理解,所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义,如下图:
需要注意的是:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
css reset 中也会经常用到
* {
margin : 0;
padding : 0;
}
三、box-sizing属性介绍
box-sizing属性是用户界面属性里的一种,之所以介绍它,是因为这个属性跟盒子模型有关,而且在css reset中有可能会用到它。
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
很多CSS框架,都会对盒子模型的计算方法进行简化。
(3) inherit , 规定应从父元素继承 box-sizing 属性的值,上海尚学堂web前端原作,请多支持!
关于border-box的使用:
1 一个box宽度为100%,又想要两边有内间距,这时候用就比较好
2 全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减,它还有一个关键作用——让有边框的盒子正常使用百分比宽度。
CSS盒子模型之详解相关推荐
- 盒子模型属性详解及案例
盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器. 每个矩形都由元素的内容(content).内边距(padding).边框(border)和外边距(ma ...
- CSS盒模型(详解)
目录 前言 一.什么是CSS盒模型 二.标准模型+IE模型的区别 1.CSS如何设置两种盒模型 2.JS如何设置/获取盒模型对应宽高: 前言 什么是css,css有几种,让我带你来了解一下 一.什么是 ...
- 标准盒子模型和怪异盒子模型(详解)
一.盒子模型定义 盒子模型是css技术所使用的一种思维模型.盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子.每个矩形盒子都由内容.内边距.边框和外边距4个部分组成.除去内容部分,其 ...
- css盒子样式有哪些,css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
- CSS盒子模型详解(清除无序列表的项目符号)
CSS盒子模型详解(清除无序列表的项目符号) 网页的布局过程 准备好相关的网页元素(盒子) 利用CSS设置好盒子的样式以及在网页中的摆放位置 往盒子里面装东西 盒子模型(box model) 网页中, ...
- (图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解 声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
- CSS浏览器兼容性问题详解总结
CSS浏览器兼容性问题详解总结 2009-11-12 11:39 对css缩写的支持问题: 不论是ie 还是ff对css的缩写都有一小点问题 比如 border: 0xp solid #fff;两个浏 ...
- css中float详解,CSS浮动属性Float详解?史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
- html 盒子模型添加图片,[HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
最新文章
- 实战SSM_O2O商铺_17【商铺编辑】Dao层开发
- 阿里云 Serverless 再升级,从体验上拉开差距
- 计算机系统唯一能识别的不需要翻译,计算机习题答案及解析ban.doc
- 进制转换问题---例如把26进制转为10进制
- Turbo C 2.0、Borland C++库函数及用例
- C++语言基础 —— STL —— 容器与迭代器
- C语言经典递归算法之和式分解
- 人工智能及其体系结构_一些复制体系结构错误及其解决方案
- MySQL 练习 创建表格并修改
- 修复ubuntu中其他盘不能挂载
- 【爬坑记录】记录搭建fabric 遇到的问题-network e2ecli_default not found
- VHDL中的行为描述、数据流(RTL)描述和结构描述
- C语言中task的用法,C++11中std::packaged_task的使用详解
- Android高手笔记 - IO优化
- IDEA启动卡在preparing workspace
- FTPS FTPES
- 微软苏州校招1月3日在线编程题1——constellations
- Oracle笔记(操作Scott中的数据)
- 收藏 取消收藏html,一键解除网页限制,浏览器收藏夹书签小工具
- java.lang.Integer connot be cast to class java.lang.String
热门文章
- 聊天ListView使用ViewHolder
- 【代码笔记】Web-ionic-select
- 今天在看慕课网的java学习路径
- [转载] 应急管理体系及其业务流程研究
- Memcached入门指南
- 神州泰岳2050万元收买并增资奇点国际
- MySQL最早版本源码_MySQL旧版本升级为新版本
- android usb弹窗权限r,Android USB权限对话框永远不会出现
- 济宁医学院计算机专业好就业吗,山东这3所医学院实力强,就业率高,中等生可捡漏...
- ntp如何确认与服务器偏差_CentOS 8 启用 NTP 服务