盒子模型是网页元素所占据页面窗口的矩形范围,是网页布局的核心基础之一,这里的盒子模型与我们平常收到的包裹类似。

一个包裹从内到外,分为真实物品部分,物品与外壳之间的填充区,外壳的厚度,当多个包裹放置在一起,包裹与包裹之间的距离等要素组成。那么放到网页布局来说,也就是盒子模型。盒子是一个矩形区域,他从内

到外分为宽高度,填充,边框,边距。外边距就是该元素占据的矩形空间。元素标签通常所设置的宽高值的是内容区域的大小,从内向外看一次为填充,边框,边距,而填充区域也为背景区域。

1 两个相邻块元素,在垂直方向边距不会存在叠加效应,这个时候选取上下元素2者中边距最大者作为真实边距

1.1 两普通文档刘中的上下垂直方向

1.2 两普通文档流中包含关系,容器与容器的子元素 取较大者

1.3 没有高度的块元素

2 两相邻内联元素(inline-block),即一行内在水平方向上存在边距叠加效应。

3 绝对布局中必须指定元素宽高,因此绝对布局无法做到宽高自适应。

4 使用div+css与table布局的比较

1) 维护方面:css样式使用外联文件方式分离,易于维护,同时利于网络请求,还有css的选择符使得css代码复用

2)结构方面:table结果复杂,不利于重构

5 绝对定位和相对定位

绝对定位:是当前元素处于有指定定位的祖先元素为参考,进行绝对位置设置,也就是说将当前元素指定为绝对定位后,他将向上级节点寻找是否存在有指定定位设置的元素作为祖先参考,直到找到html根节点

绝对定位脱离文档流,因此后面的元素会占据该元素之前的位置,而元素本身将叠加在现有元素上面,因此z-index也就专门为这些脱离文档流的元素所设计

相对定位:相对定位并不脱离文档流,相应的常常用来设定元素的定位,或者设置左上右下的位置进行偏移,但是但是,即便是该元素在显示效果上偏移了,但是实际本身原有位置任然属于该元素本身,也就是说

后续元素不会占据该元素原有位置。

css那些事儿2 盒子模型的更多相关文章

  1. css的两种盒子模型

    css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...

  2. CSS Box Model(盒子模型)

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  3. [CSS属性设置,盒子模型,网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  4. CSS魔法堂:盒子模型简介

    本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model) 一.W3C标准的盒子模型   二.IE盒子模型 三.两种模型的区别 W3C标准盒子模型: 外盒模型 元素空间宽度 ...

  5. 【转】CSS(10)盒子模型

    CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...

  6. css笔记17:盒子模型加强版的案例

    1.先看看经典案例效果图,导出思路: 分析:思路 基本结构 <div> <ul> <li><img src=""/> </li ...

  7. css笔记16:盒子模型的入门案例

    1.案例一: 效果图如下: (1)box1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  8. css笔记15:盒子模型

    1.流 流:html元素在网页中显示的顺序 标准流:在html文件中,写在前面的元素在前面显示,写在后面的html元素在后面显示. 非标准流:在html之中,当某个元素脱离了标准流,那么它处于非标准流 ...

  9. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

随机推荐

  1. Redis集群进阶之路

    Redis集群规范 本文档基于Redis 3.X或更高版本,讲解Redis集群算法以及设计原理.此官方文档长期更新且随着Redis新版本特性的变化变动,详细请留意官网. 官网地址:https://re ...

  2. php 算法(冒泡排序)

    //冒泡排序(从小到大)       (从大到小改变for循环中的大于号为小于号即可)    public function index(){          $arr = array(1,8,3, ...

  3. 『Python基础-11』集合 (set)

    # 『Python基础-11』集合 (set) 目录: 集合的基本知识 集合的创建 访问集合里的值 向集合set增加元素 移除集合中的元素 集合set的运算 1. 集合的基本知识 集合(set)是一个 ...

  4. 动态的GRE OVER IPSEC的实验模拟与分析

    此篇博客正在介绍的是下图中的Dynamic P2P GRE OVER IPSEC VPN: 为什么出现这种动态的GRE OVER IPSEC VPN技术呢? 首先在前面几篇博客中已经介绍过了,动态是为 ...

  5. 关于MySQL的锁机制详解

    锁概述 MySQL的锁机制,就是数据库为了保证数据的一致性而设计的面对并发场景的一种规则. 最显著的特点是不同的存储引擎支持不同的锁机制,InnoDB支持行锁和表锁,MyISAM支持表锁. 表锁就是把 ...

  6. 10-第三方ClientCredential模式调用

    1-新建.net core控制台应用程序 E:\coding\netcore\IdentityServerSample>dotnet new console --name ThridPartDe ...

  7. Caliburn.Micro 杰的入门教程3,事件和参数

    Caliburn.Micro 杰的入门教程1(翻译)Caliburn.Micro 杰的入门教程2 ,了解Data Binding 和 Events(翻译)Caliburn.Micro 杰的入门教程3, ...

  8. Hadoop3.0新特性

    1. Hadoop3.0简介 Hadoop 2.0是基于JDK 1.7开发的,而JDK 1.7在2015年4月已停止更新,这直接迫使Hadoop社区基于JDK1.8重新发布一个新的Hadoop版本,而 ...

  9. facebook原生广告添加adchoice图标

    1.在需要显示adchoice的地方添加一个textview: <LinearLayout android:id="@+id/ad_ic_action" android:la ...

  10. 「题目代码」P1044~P1048(Java)

    P1044 谭浩强C语言(第三版)习题5.8 import java.util.*; import java.io.*; import java.math.BigInteger; public cla ...