文档章节

盒子模型简述

henry_Lee
 henry_Lee
发布于 2016/09/27 15:54
字数 944
阅读 215
收藏 0

先说说我们在网页:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。

盒子模型

标准盒子模型:如图所示,盒子模型是由position(定位)、margin(外边距)、border(边框)、padding(内边距)、content(内容) -五部分组成,一般position不会算入其中,所以一般是由margin(外边距)、border(边框)、padding(内边距)、content(内容) 组成,浏览器初步渲染margin、padding会有默认值,需要自己初始化,position默认值是left:0,top:0;需要渲染position的时候才会生效。若使用box-sizing属性的话,border的值不生效,其值会包含在content值中。盒子模型的尺寸=边框+外边距+内边距+内容(+position)。

盒子3D模型:从上至下一共5层,分别是(border、content+padding、background-image、background-color、margin)

相关知识:《外边距(margin)合并条件及解决办法》

<外边距合并条件>
    1. 块级盒子    (display:block;)
    2. 只有上下边距会合并

<解决方法>
    1. 把盒子转为行内块 display:inline-block;
    2. 嵌套关系的外边据合并问题, 我们可以给大盒子加 边框 分隔开合并的边距。
    3. 嵌套关系的外边据合并问题, 给大盒子加  overflow:hidden; 
小总结:外边距其实很常见,对于并列盒子的无伤大雅,一定要注意的是嵌套盒子(父子关系的盒子)。

css中,存在三个定位机制:

    1.文档标准流: 

     特点:从上到下,从左到右,输出文档内容。由块级标签行级标签组成。

  • 块级标签:从左到右撑满页面,独占一行。触碰到页面边缘时会自动换行。常见块级元素(标签):div、ul、li、dl、dt、p.....
  • 行级标签:同一行显示,不会改变HTML文档结构。常见行级元素(标签):em、b、span、strong、img、input.....

    注:块级标签和行级标签都是盒子模型 

    2.浮动流(Floats):

    特点:能够实现横向多列布局。float属性,有三个属性值:

        left-左浮动

        right-右浮动

        none-不浮动

    特点:元素会左移或又移直至触碰到容器为止。设置了浮动的元素,仍然处于标准文档流中。

    清除浮动的常用方法

        clear属性-常用clear:both;

        clear:left; 或者clear:right;

        同时设置width:100%(或固定宽度)+overflow:hidden;

浮动的特性
    1. 脱标性(破坏性),脱离标准流,浮起来到文档流的上方。
    2. 包裹性,浮动的盒子如果没有设定宽高,他会包裹着里面的内容。
    3. 块状性,浮动的盒子可以设置宽高。显示模式相当于行内块。(inline-block)
    4. 去空格,浮动后盒子关系很好,会紧紧贴在一起,水平排列。

    3.定位流:

    特点:position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

        static-默认,它始终会处于页面流给予的位置,忽略任何 top、bottom、left 或 right 声明。

        relative(相对)-将其移至相对于其正常位置的地方,left:10px;会将元素移到原位置离左10px的位置。

        absolute(绝对)-定位于相对于包含它的元素的指定坐标,通过 top、bottom、left 或 right 属性决定位置。

        fixed-定位于相对于浏览器窗口的指定坐标,通过 top、bottom、left 或 right 属性决定位置。不论窗口滚动与否,元素都会留在那个位置。IE:IE8、IE11。

 

注:个人理解,若想达到较好的兼容,尽量多使用文档流加以适量hack,而且其渲染速度来说是最好的,浮动尽量少用,可用display:flex或display:table-cell代替。

© 著作权归作者所有

henry_Lee
粉丝 0
博文 6
码字总数 2987
作品 0
广州
前端工程师
私信 提问
今日份面试题整理2018-08-21

1.以下关于盒子模型描述正确的是:( ) A.标准盒子模型中:盒子的总宽度 = 左右margin + 左右border + 左右padding + width B.IE盒子模型中:盒子总宽度 = 左右margin + 左右border + wi...

littleyu
2018/08/21
0
0
标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模...

i33
2012/11/06
79
0
盒子模型的理解

概述 网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性。 这些属性我们可以把它转移到我们日常生活中的盒...

名字已被取
2016/03/14
58
0
CSS 盒子模型 Box Model

CSS 盒子模型概述 element : 元素。 padding : 内边距,也有资料将其翻译为填充。 border : 边框。 margin : 外边距,也有资料将其翻译为空白或空白边。 盒子模型有两种,分别是 IE 盒子模型...

ivon_lee
2014/04/19
327
1
前端进阶之什么是BFC?BFC的原理是什么?如何创建BFC?

作者:陈大鱼头 github: KRISACHAN 链接:github.com/YvetteLau/S… 背景:最近高级前端工程师 刘小夕 在 github 上开了个每个工作日布一个前端相关题的 repo,怀着学习的心态我也参与其中,...

陈大鱼头
05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
5
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
8
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部