CSS2.1(布局)
浏览器内核
Firefox : gecko
IE: tirdent
Safari: webkit
Chrome: 一开始使用webkit 后来基于webkit开发了Blink
opera: 一开始使用presto 接着用webkit 现在使用Blink
包含块
1.“根元素的包含块”(也称初始包含块)由用户代理创建。在HTML中,根元素就是html元素,不过也有些浏览器使用body作为根元素。
在大多数浏览器中,初始包含块是一个视窗大小的矩形。
2.对于一个非根元素,,如果其position的值是relative或static,包含块则由最近的块级框的内容边界构成
3.对于一个非根元素,,如果其position的值是absolute,包含块设置为最近的position值不是static的祖先元素,如果这个祖先元素是块级元素,
包含块则设置为该元素的内边距边界。
前端坐标系
各种坐标系:
正值往里收
负值往外扩
默认值和百分比
width
默认值为auto
块级元素: 盒模型的宽度(m + b + p + w) = 包含块内容区的100%
内联元素,行内块: 靠内容撑开 绝对定位元素: 靠内容撑开
相对定位元素: 元素特性不变 盒模型的宽度(m + b + p + w) = 包含块内容区的100%
固定定位: 靠内容撑开 浮动元素:靠内容撑开 是否是继承属性 否
百分比参照于谁 包含块的width
height
默认值为auto
都是代表靠内容撑开
是否是继承属性 否
百分比参照于谁 包含块的height
padding
margin
默认值为0
是否是继承属性 否
百分比参照于谁 包含块的width
border
border-width (一般直接指定px值 不写百分比) left right top bottom
默认值:auto
是否是继承属性 否
百分比参照于谁 包含块的width
CSS2.1(布局)的更多相关文章
- 【css】css2实现两列三列布局的方法
前言 对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题.楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要 ...
- 一览css布局标准
回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CS ...
- 玩转CSS3(一)----CSS3实现页面布局
请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 摘要: CSS3相对CSS2增加了一些新的布局方式:多栏布局和盒子布局.在这篇文章中,将对CSS2的布局进行简单的回忆,并总结CSS3的 ...
- CSS布局标准
回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CS ...
- flexbox属性速览及常见布局实现
CSS3 弹性盒子(Flex Box)弹性盒子是即 CSS2 浮动布局后, CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同 ...
- 结合CSS3的布局新特征谈谈常见布局方法
写在前面最近看到<图解CSS3>的布局部分,结合自己以前阅读过的一些布局方面的知识,这里进行一次基于CSS2.3的各种布局的方法总结. 常见的页面布局 在拿到设计稿时,作为一个前端人员,我 ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
随机推荐
- JAVA SSL
http://docs.oracle.com/javase/1.5.0/docs/guide/security/jsse/JSSERefGuide.html#InstallationAndCustom ...
- "pom.xml" could not be activated because it does not exist.
"pom.xml" could not be activated because it does not exist. 在sts中使用maven build,输入package然后 ...
- js面向对象编程:怎样定义常量?
js中有一个keywordconst,但眼下的浏览器似乎还不支持,假设一定要定义一些常量,事实上能够使用闭包,匿名函数实现常量的定义. 比如: var Class = (function() { va ...
- Html学习(三) 分类学习
代码: <h1>这是一级分类吗</h1> <h2>这是二级分类吗</h2> <h3>这是三级分类吗 </h3> 效果: 介绍: ...
- Attribute(一)——提前定义特性
在项目中接触到了Attribute,那么什么是Attribute,有些什么作用呢?这里来了解一下. 一.什么是Attribute Attribute 类将提前定义的系统信息或用户定义的自己定义信息与目 ...
- poj_3468,线段树成段更新
参考自http://www.notonlysuccess.com/index.php/segment-tree-complete/ #include<iostream> #include& ...
- centos7 配置redis
文件上传 yum -y install lrzsz 安装redis部署前操作 同时下载redis-.tar.gz安装包 yum -y install gcc-c++ yum -y install tc ...
- 8.变量内存CPU原理
编译器先明确是什么类型,然后明确变量名,变量表管理所有的变量,不在变量表内部的变量不能引用.每个变量对应一整块内存 a+1所计算出来的值在寄存器中,只有变量可以被赋值,变量必须在内存里面 c语言内嵌汇 ...
- .NET与JAVA RSA密钥格式转换
一.该篇内容用于记录.net和Java之间,RSA公密钥的转换 using Org.BouncyCastle.Asn1.Pkcs; using Org.BouncyCastle.Asn1.X509; ...
- studyLink
http://order.csdn.net/myorder/detail?id=850343 csdn