css布局详解(一)——盒模型
一、网页布局的几种情况
今天让我们总结一下在css布局的各种情况做一个总结,为我们以后布局网页时做一个参考。
先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的:
如图所示,css布局可以分为以下几大块:
- 盒子内部的布局
- 文本的布局
- 盒模型本身的布局
- 盒子之间的布局visual formatting
- 脱离正常流normal flow的盒子的布局
- absolute布局上下文下的布局
- float布局上下文下的布局
- 正常流normal flow下的盒子的布局
- BFC布局上下文下的布局
- IFC布局上下文下的布局
- FFC布局上下文下的布局
- table布局上下文下的布局
css grid布局上下文下的布局
二、盒模型(Box moudle)
- 脱离正常流normal flow的盒子的布局
1、基本框
css假定每个元素都会生成一个或多个矩形框,这称为元素框。各元素框中心都有一个内容区(content area)。这个内容区周围有可选的内边距(padding)、边框(border)、外边距(margin)。这就是css中的盒模型。
2、包含块
每个元素都相对于其包含块摆放,可以这么说,包含块就是一个元素的“布局上下文”。
包含块由最近的块级祖先元素、表单元格或行内块祖先元素的内容边界(content edge)构成。考虑下面的代码:
<body><div class="father"><p class="son">This is paragraph</p></div></body>
在这个例子中p的包含块是div元素,因为div是p元素最近的块级祖先元素,类似的,div的包含块是body。所以,p的布局依赖div的布局,而div的布局依赖body的布局。
三、块级元素与行级元素的对比
块级元素的解析
块级元素特点
默认情况下,块级元素会在其框前和框后产生“换行”,并尽可能的充满整个容器。
元素的水平格式化
水平格式化的7大属性是:margin-left,border-left,padding-left,width,padding-right,border-right,margin-right。
这7个属性值加起来往往是包含块width值。
负外边距
在盒模型中,内边距、边框、和内容宽度(及高度)不能为负值,只有外边距可以为负值。利用定位以及负margin可以设置盒子在页面中的居中。
<div class="box" style="width: 100px; height: 100px; position: absolute; left: 50%; top: 50%;
margin-left: -50px; margin-top:-50px;background:red;" ></div>
元素的垂直格式化
类似于水平格式化,垂直格式化的7个相关属性:margin-top
,border-top
,padding-top
,height
,padding-bottom
,border-bottom
,margin-bottom
,这7个属性的总和必须等于父级元素的height属性。
其中margin-top
,margin-bottom
和height
可以设置成auto
;
一个正常流中的块元素的margin-top和margin-bottom设置为auto后,会被设置为0,即不能将元素垂直居中,实际上元素没有外边距。定位元素如果设置成auto有不同的处理结果。
如果正常流元素的height设置为auto,则其高度将会被设置为其内容元素的高度总和
垂直外边距合并
垂直外边距合并:当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
css代码:
div{
width: 200px; height: 200px; background: red; }
.box1{
margin-bottom: 100px;
}
.box2{
margin-top:50px;
}
html代码
设置值为auto
其中margin-left,width,margin-right可以设置为auto。当设置margin-left与margin-right的值为auto而width的值为特定值时,会使盒子水平居中。
当设置三个值都为auto时,浏览器会将margin-left与margin-right设置为0,而将width会尽可能的宽。而当设置三个值为固定值时,按css术语来讲,这些格式化属性过分受限,此时总会把margin-right强制为auto;
行级元素的解析
行内元素不会另起一行只占据它对应的标签的边框所包含内容的空间,只能包含数据和其他行内元素。行级元素不能设置宽高,不能设置上下margin
、和padding
行内元素会生成一个内容区,类似于块级元素的content部分,内容区的大小与字体的大小相等。内容区加上文字的上下边距就等于行内框的高度,可以通过设置line-height的高度控制行内框的高度。行框是包含该行中行内框最高点和最低点的最小框。如下图
替换元素
在行级元素中替换元素是一个例外,他既可以设置宽高,也可以设置margin
和padding
,它类似于inline-block
。
行级元素与块级元素的嵌套关系
- 行级元素嵌套行级元素
- 块级元素嵌套块级元素,块级元素内嵌套行级元素。
- 少数块级级元素不能嵌套块级元素例如:p不能嵌套div标签,标题标签中最好不要嵌套div。
转载于:https://www.cnblogs.com/liugblog/p/4965330.html
css布局详解(一)——盒模型相关推荐
- html中style布局放哪,CSS样式表与格式布局详解
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例: 内联样式表 内嵌样式表:必须写在head标签里 例: p { 样式;} he ...
- 【C++】C++对象模型:对象内存布局详解(C#实例)
C++对象模型:对象内存布局详解 0.前言 C++对象的内存布局.虚表指针.虚基类指针解的探讨,参考. 1.何为C++对象模型? 引用<深度探索C++对象模型>这本书中的话: 有两个概念可 ...
- Linux进程地址空间与进程内存布局详解,内核空间与用户空间
Linux进程地址空间与进程内存布局详解 程序段(Text):程序代码在内存中的映射,存放函数体的二进制代码. 初始化过的数据(Data):在程序运行初已经对变量进行初始化的数据. 未初始化过的数据( ...
- CSS基本操作详解及截图演示
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
- (淘宝无限适配)移动手机端rem布局详解(转载非原创)
https://www.cnblogs.com/well-nice/p/5509589.html (淘宝无限适配)手机端rem布局详解(转载非原创) 从网易与淘宝的font-size思考前端设计稿与工 ...
- css名词解析,小说CSS样式详解
CSS格式详解 字体格式(font) 字体 表格题目位置 once:只朗读一次(默许值): always:多次朗读: inherit:启当: 文字年夜小 font-size: xx-small | x ...
- grid layout网格布局详解
grid layout网格布局详解 什么是grid layout grid的特点 grid css属性的基础知识 创建一个grid布局 创建一个网格 隐性网格与显性网格 尺寸单位fr repeat函数 ...
- Css display 详解
Css display 详解 display :none display :block display :inline display :inline-block display :inherit d ...
- html5 div布局table,H5的div布局与table布局详解
这次给大家带来H5的div布局与table布局详解,H5div布局与table布局的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例为大家解析了html5 p布局与table布局,供大家参考 ...
最新文章
- java实现单词替换_java – 正则表达式将空格和单词替换为单词的toFirstUpper
- pytorch_lightning Default process group is not initialized
- PropertySet 学习一
- RTSP、RTMP和HTTP协议的区别
- ASP.NET页面间数据传递的几种方法
- mysql中使用sqldriverconnect()报错的解决
- JavaMail(2)——给多人发送、抄送
- window连接不上linux ftp_不懂操作?手把手教你如何在linux下搭建FTP
- 天正的计算机快捷命令大全,cad天正建筑快捷键命令大全(整理).doc
- Python接口自动化测试_悠悠
- 体验极好的临时邮箱,10分钟邮箱,极美观,速度特别快
- Python笔记之Django网页模板的继承block(挖坑填坑、HTML转义)
- Web登录如何确保安全
- 回车、换行、空格的ASCII码值(不同OS平台下文件换行定义)
- 借助CatGPT让turtlesim小乌龟画曲线
- 集成学习算法的思想、通过集成学习提高整体泛化能力的前提条件、如何得到独立的分类器Bagging、Boosting、Stacking算法
- python识别人名-正则匹配百家姓
- 高级计算机网络(习题二加解析)
- 乐视商城官方微博壕送5000张电影票:生态可以这样纵横
- 【晴神宝典刷题路】codeup+pat 题解索引(更新ing