css那些事儿2 盒子模型
盒子模型是网页元素所占据页面窗口的矩形范围,是网页布局的核心基础之一,这里的盒子模型与我们平常收到的包裹类似。
一个包裹从内到外,分为真实物品部分,物品与外壳之间的填充区,外壳的厚度,当多个包裹放置在一起,包裹与包裹之间的距离等要素组成。那么放到网页布局来说,也就是盒子模型。盒子是一个矩形区域,他从内
到外分为宽高度,填充,边框,边距。外边距就是该元素占据的矩形空间。元素标签通常所设置的宽高值的是内容区域的大小,从内向外看一次为填充,边框,边距,而填充区域也为背景区域。
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 盒子模型的更多相关文章
- css的两种盒子模型
css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...
- CSS Box Model(盒子模型)
CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...
- [CSS属性设置,盒子模型,网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- CSS魔法堂:盒子模型简介
本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model) 一.W3C标准的盒子模型 二.IE盒子模型 三.两种模型的区别 W3C标准盒子模型: 外盒模型 元素空间宽度 ...
- 【转】CSS(10)盒子模型
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...
- css笔记17:盒子模型加强版的案例
1.先看看经典案例效果图,导出思路: 分析:思路 基本结构 <div> <ul> <li><img src=""/> </li ...
- css笔记16:盒子模型的入门案例
1.案例一: 效果图如下: (1)box1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- css笔记15:盒子模型
1.流 流:html元素在网页中显示的顺序 标准流:在html文件中,写在前面的元素在前面显示,写在后面的html元素在后面显示. 非标准流:在html之中,当某个元素脱离了标准流,那么它处于非标准流 ...
- css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
随机推荐
- 【Hadoop故障处理】全分布下,DataNode进程正常启动,但是网页上不显示,并且DataNode节点为空
[故障背景] DataNode进程正常启动,但是网页上不显示,并且DataNode节点为空. /etc/hosts 的ip和hostname配置正常,各个机器之间能够ping通. [日志错误信息] ...
- SST-超级简单任务调度器结构分析
SST(Super Simple Task) 是一个基于任务优先级.抢占式.事件驱动.RTC.单堆栈的超级简单任务调度器,它基于Rober Ward一篇论文的思想,Miro Samek用C重新编程实现 ...
- 【Keil】Keil5添加源程序和头文件
xxx.c就是源程序 xxx.h就是头文件 [源程序添加方法] 双击文件夹,例如图片上的Source,跳出弹窗,选择需要添加的源程序即可 [添加头文件的方法] 1.首先点击图片红框处,或是在文件夹te ...
- Python学习手册之捕获组和特殊匹配字符串
在上一篇文章中,我们介绍了 Python 的字符类和对元字符进行了深入讲解,现在我们介绍 Python 的捕获组和特殊匹配字符串.查看上一篇文章请点击:https://www.cnblogs.com/ ...
- java getter和setter的方法及内部类的调用
class Test{ public static void main(String[]args){ Person person=new Person(); person.age=22; person ...
- verilog中参数传递与参数定义中#的作用(二)
一.module内部有效的定义 用parameter来定义一个标志符代表一个常量,称作符号常量,他可以提高程序的可读性和可维护性.parameter是参数型数据的关键字,在每一个赋值语句的右边都必须是 ...
- 20145209刘一阳《网络对抗》Exp6信息搜集与漏洞扫描
20145209刘一阳<网络对抗>Exp6信息搜集与漏洞扫描 实践内容 信息搜集和漏洞扫描 信息搜集 whois查询 用whois查询博客园网站的域名注册信息可以得到注册人的名字.城市等信 ...
- 北京Uber优步司机奖励政策(高峰期5倍奖励)(12月7日)
用户组:人民优步及电动车(适用于12月7日) 滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http ...
- stm32 nucleo系列开发板的接口
1. 首先说的是 Arduino接口,所有的nucleo系列都支持这个接口,而且像F767这种尺寸长的板子也有的,不过是双排排针,其实就是外侧也是 Arduino接口 2. 板子接上电脑之后有个串口
- [转帖]localhost与127.0.0.1的区别
localhost与127.0.0.1的区别 https://www.cnblogs.com/hqbhonker/p/3449975.html 前段时间用PG的时候总有问题 当时没有考虑 localh ...