文档章节

从块级元素和行内元素的分析到bfc的布局理解

菜菜行进中
 菜菜行进中
发布于 01/25 18:24
字数 815
阅读 16
收藏 0

块级元素:块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通俗的讲: 一个div,它的height:20px; width:20px;,div的大小就是这个高乘以宽的区域。

行内元素: 一个行内元素只占据它对应标签的边框所包含的空间。eg: <span>1</span>:行内元素占据的是1这个内容区的空间。

块级元素与行内元素的区别

块级元素,可以设置宽高(width, height),可以设置全部方向的margin,padding值(四个方向都可以),会新起一行(即两个块级元素在一起会,变成两行,与块级元素的宽度无关,即使父级div的宽度为100px,子级两个div的宽度只有10px,两个子级div也会上下排列,除非设置了float.)。

第二个div另起了一行。

块级元素具体有:

div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre

HTML5:header、section、article、footer等等

行内元素:行内元素不能设置width,height,还有不能试试margin的top和bottom但是可以设置margin的left和right,可以设置padding的四个方向。行内元素都是在同一行的。但是有一些特殊的行内元素如input,img等他们是替换元素:<img>、<input>、<textarea>、<select>、<object>,他们可以设置宽高。

 

下面的元素都是行内元素:

BFC:块级格式化:是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域.(通俗讲是实验两栏布局,一栏固定,一栏自适应)还有三栏布局也是同样的原理,下面代码实现的是两栏布局。

注意:

块格式化上下文包含创建它的元素内部的所有内容.

块格式化上下文对浮动定位(参见 float)与清除浮动(参见 clear)都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠(Margin collapsing)也只会发生在属于同一BFC的块级元素之间。

实现代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="main"></div>
</div>
<!-- <div class="dd">1</div>
<div class="dd">1</div>
<input class="dd" value="1"/>
<input class="dd"/> 
<span class="dd">1</span>
<img class="dd"/>  -->
</body>
<style type="text/css">
.container{
    width: 100%;
    height:300px;
    padding-left:200px;
}
    .left{
        left:0;
        width:200px;
        background: red;
        height: 100px;
        margin-left:-200px;
        float: left;
    }
    .main {
        width:100%;
        padding-left: 200px;
        height:100px;
        background: blue;
        float: left;
    }
    /*.dd{
        border:1px solid #18E;
        margin: 10px;
        height: 200px;
        width:300px;
        padding:20px;
    }*/
</style>
</html>

© 著作权归作者所有

菜菜行进中
粉丝 0
博文 19
码字总数 21165
作品 0
深圳
私信 提问
【前端帮帮忙】第8期 关于BFC,你需要了解的

BFC是耳熟能详的一个东西了,经常听到,其实在项目中也经常用到,比如最常用的清除浮动,自适应两栏布局等等。只是都没有去深究其原理和相关的知识点,今天就一起来好好学习一下吧。 要明白是...

大志_前端
06/02
0
0
理解CSS中的BFC(块级可视化上下文)(浅显易懂)

常见布局 在讲 BFC 之前,我们先来了解一下常见的布局方案,有三种常见布局方案: 普通布局 在普通布局中,元素按照其在 HTML 中的先后位置从左往右,从上往下布局。 在这个过程中,行内元素水...

夜夕i
10/13
0
0
剖析一些经典的CSS布局问题,为前端开发+面试保驾护航

一、让一个元素水平垂直居中,到底有多少种方案? 水平居中 对于: text-align: center; 对于确定宽度的块级元素: width和margin实现。margin: 0 auto; 绝对定位和margin-left: -width/2, 前...

神三元
10/13
0
0
【译】理解 CSS 布局和 BFC

译者:前端小智 原文:www.smashingmagazine.com/2017/12/und… CSS布局中有一些概念,一旦你理解了它们,就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说...

前端小智
04/10
0
0
从CSS盒子模型说起

前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理;穷理之要...

Damonare
2017/07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

相册管理

相册管理 相册管理 一、相册管理:指对所有上传的图片的归类管理。 1、创建相册:可以新建多个相册。 2、上传图片:可以上传图片到相册里。 3、搜索:输入相册名称对相册的搜索。 二、点击相...

Geek-Chic
39分钟前
5
0
pymongo和mongoengine安装和使用教程 包含常用命令行和代码示例

本文首发于个人博客https://kezunlin.me/post/e88f04e5/,欢迎阅读最新内容! pymongo and mongoengine tutorial on ubuntu 16.04 Guide version mongo 2.6.10 mongo gui: robo3t-1.3.1 pymo......

kezunlin
今天
9
0
潜水一周,我精心整理了两个超级有用的职场生存之道

最近一周过的很充实,所以都没爬上来和大家 好好聊聊,原本计划的很多事情也没有下文,因为略忙,有点不可开交。需求和线上的问题常常困扰了我,或许这就是还需要提升的关键吧。 但是,好在还...

Dimple91
今天
6
0
大规模机器集群-故障自动处理(二)

本篇开始介绍具体的实现过程,为表述方便,先定义一些名词, _AutoRepairSystem: _故障自动维修系统, 缩写为ARS 原子操作:任务的最小操作,机器任务通常是指重启、重装 运维人员:运维工程师...

曲行人
今天
6
0
使用Supervisor管理任务

安装:yum install supervisor 修改配置文件:vi /etc/supervisord.conf [unix_http_server]file=/var/run/supervisor.sock ; UNIX socket 文件,supervisorctl 会使用;chmod=0700 ......

FalconChen
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部