css layout入门(转)
元素与盒
在HTML中常常使用的概念是元素,而在CSS中,布局的基本单位是盒,盒总是矩形的。
元素与盒并非一一对应的关系,一个元素可能生成多个盒,CSS规则中的伪元素也可能生成盒,display属性为none的元素则不生成盒。
除了元素之外,HTML中的文本节点也可能会生成盒。
盒模型
一个盒包括了内容(content)、边框(border)、内边距(padding)、外边距(margin)。下图展示了盒模型的直观意义:

盒的尺寸(width与height)定义受到box-sizing属性的影响。box-sizing可选择content-box(默认), padding-box和border-box三种模式。
正常流
正常流是页面,大部分盒排布于正常流中。正常流中的盒必定位于某一格式化上下文中,正常流中有两种格式化上下文:块级格式化上下文(block formatting context,简称BFC)和行内格式化上下文(inline formatting context,IFC)。
在块级格式化上下文中,盒呈纵向排布,在行内格式化上下文中,盒则呈横向排布。
正常流根容器中是块级格式化上下文,不同的盒可能会在内部产生行内格式化上下文或者块级格式化上下文。
块级与行内级
正常流中的盒分为块级与行内级两种,任何一个行内级盒都不能够直接被放入块级格式化上下文中。如果有一个HTML元素生成了一个行内盒,而其所在的上下文是块级的话,那么应当为它生成一个匿名块级盒,匿名块级盒会在内部生成行内格式化上下文。
元素的display属性会决定盒是行内级还是块级:
- block, table, flex, grid, list-item 为块级
- inline, inline-block, inline-table, inline-flex, inline-grid 为行内级
格式化上下文
display同时还可能决定元素内部如何显示,一些容器型元素生成的盒会产生BFC和IFC以外的格式化上下文。
有一类盒被称为块容器,它们能够包含块级盒。块容器要么创建块级格式化上下文,这样它内部仅仅包含块级盒,要么创建一个行内格式化上下文,这样它内部仅仅包含行内级元素。(也就是说,块容器中不可能既包含块级盒,又包含行内级盒,一旦他的子盒中有块级盒,所有行内级盒都会被自动创建匿名盒包裹)。
在非块级格式化上下文中的块容器总是会创建新的块级格式化上下文:如display为inline-blocks, table-cells, 和table-captions所生成的盒。而自身也在块级格式化上下文中的块容器,则只有overflow不为visible的情形下才会创建新的块级格式化上下文。
绝对定位和浮动的块容器则总是会创建新的块级格式化上下文。
display值为table或者inline-table的元素将会生成表格(table),表格内部会使用特殊的格式化方式来排布其内部元素。
display值为grid或者inline-grid的元素将会生成格元素(grid element),与table情形类似,它内部也是使用特殊的格式化方式来牌不其内部元素,
display值为flex或者inline-flex的元素将会生成自适应容器(flex container),自适应容器在其内部产生自适应格式化上下文(flex formatting context)。
转载地址:http://www.cnblogs.com/winter-cn/archive/2012/11/13/2768732.html
css layout入门(转)的更多相关文章
- CSS layout入门
元素与盒 在HTML中常常使用的概念是元素,而在CSS中,布局的基本单位是盒,盒总是矩形的. 元素与盒并非一一对应的关系,一个元素可能生成多个盒,CSS规则中的伪元素也可能生成盒,display属性为 ...
- CSS快速入门(四)
目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- Swift语言Auto Layout入门教程:上篇
原文:Beginning Auto Layout Tutorial in Swift: Part 1/2,译者:@TurtleFromMars 开始用自动布局约束的方式思考吧! 更新记录:该教程由Br ...
- CSS ? Layout Module : CSS 布局模型
1 1 1 https://www.w3.org/TR/css-grid-1/ CSS Grid Layout Module Level 1 W3C Working Draft, 19 May 201 ...
- CSS Layout All In One
CSS Layout All In One CSS2 position float % px , rem, em CSS3 flex grid multi column vw / vh 常见布局模式 ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...
随机推荐
- idea xml 绿背景色 去掉拼写检查
去掉背景色 去掉拼写检查
- PowerShell官方文档
PowerShell PowerShell 在 .NET Framework 基础之上构建,是一种基于任务的命令行 Shell 脚本语言:专门面向系统管理员和高级用户,可快速自动化多个操作系统(Lin ...
- Spring - IoC(10): 生命周期
Spring 容器可以管理 singleton 作用域 Bean 的生命周期,容器能够跟踪 Bean 实例的创建.销毁.管理 Bean 生命周期行为主要有两个时机: 注入 Bean 的依赖关系之后 即 ...
- IDEA无法编译java8的lambda表达式提示Error:(16, 48) java: -source 1.5 中不支持 lambda 表达式
在idea中新建了一个java8的项目,但是写lambda表达式提示语法错误,提示如下错误信息: Error:(16, 48) java: -source 1.5 中不支持 lambda 表达式 (请 ...
- GitLab 密码重设
内容全部来自: CSDN bisal GitLab 密码重设方法 假设注册邮箱为: abc@test.com 步骤 1) 登录 git 服务器 2) 执行: gitlab-rails console ...
- hdu 1518 Square(深搜+剪枝)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1518 题目大意:根据题目所给的几条边,来判断是否能构成正方形,一个很好的深搜应用,注意剪枝,以防超时! ...
- Django-views,用户认证,login_requierd()
分别是认证,登入,注销的功能 authenticated():验证是否登录 user = authenticate(username='someone',password='somepassword' ...
- linux知识复习1-dup dup2
#include <sys/stat.h> #include <string.h> #include <fcntl.h> #include <stdio.h& ...
- Linux下安装php环境并且配置Nginx支持php-fpm模块[www]
Linux下安装php环境并且配置Nginx支持php-fpm模块 http://www.cnblogs.com/freeweb/p/5425554.html 5分钟搭建 nginx +php --- ...
- MYSQL通过索引优化数据库的查询
#转载请联系 索引是什么? 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的位置信息. 更通俗的说,数据库索引好比是一本书前面的目录,能加快数据 ...