CSS知识点整理(2):框模型,定位
1. 框模型:Box Model 规定了元素处理元素框处理元素内容、外边距、边框、内边距的方式。
2. 当边距给定的值 可以小于4个。CSS定义了一些规则、处理这中情况:
- 如果缺少左外边距的值,则使用右外边距的值。
- 如果缺少下外边距的值,则使用上外边距的值
- 如果缺少下外边距的值,则使用上外边距的值。
3. 外边距合并:当两个垂直方向(相对于水平方向)的外边距相遇时,它们将合成一个外边距。
合并后的数值:合并前的较大值
4. 合并发生在两个同级元素之间,子元素和父元素之间,也可能发生在自身。
详情参考: http://www.w3school.com.cn/css/css_margin_collapsing.asp
5. 定位的相关概念
·文档流
·流式布局
·列式布局
·正常流布局
·行框
·行内框、行内元素
·块框、块级元素
·无名框、无名块框
·包含框
注意“行框”与“行内框”
参考网址: http://www.w3school.com.cn/css/css_positioning.asp 其他百度
6. 相对定位,clip的属性值以及解释,并计算剪裁后图形的高度
7. 浮动的3个案例:水平菜单,表格,简单首页
http://www.w3school.com.cn/css/css_positioning_floating.asp
CSS知识点整理(2):框模型,定位的更多相关文章
- CSS学习笔记之框模型
1.概述 为了更好的处理 元素内容.内边距.边框 和 外边距 之间的关系,CSS 定义了框模型如下: 内边距.边框 和 外边距 的默认值都是零,可以通过设置元素的 padding.border 和 m ...
- CSS| 框模型-定位及相關屬性
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...
- CSS 知识点整理
本文是我整理的关于CSS的部分基础知识点,适合正在准备前端工作面试的人做简单回顾. 1. 盒子模型 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. Mar ...
- css知识点整理
CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一.css引入的方式 1.行内样式:行内式是在标记的style ...
- 17个CSS知识点整理
1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率:使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快:内容能被更多的用户所访问.内容能被更 ...
- CSS知识点整理(1):CSS语法,层叠次序,选择器,其他重要方面。
1. css的全称 2. CSS的层叠次序:优先级由低到高 ·浏览器设置 ·外部样式表 或者 内部样式表 —— 就近原则 ·内联样式 3. CSS的3种形式,以及每种形式的语法格式 ——注意样式表的为 ...
- css知识点
css知识点 一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...
- css中的定位和框模型问题
和定位有关的元素属性如下 position 元素的定位类型 绝对定位会相对于最近定位的祖先元素的位置来定位,而不会影响其他框的位置 固定定位 相对定位 z-index 元素的堆叠顺序 值越大 ...
- CSS 框模型( Box module )
框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...
随机推荐
- [转]SQL Server编程:SMO介绍
转自:周公 最近在项目中用到了有关SQL Server管理任务方面的编程实现,有了一些自己的心得体会,想在此跟大家分享一下,在工作中用到了SMO/SQL CLR/SSIS等方面的知识,在国内这方面的文 ...
- 第5章 Cisco测试命令和TCP/IP连接故障处理
第5章 Cisco测试命令和TCP/IP连接故障处理 一.故障处理命令 1.show命令: 1) 全局命令: show version :显示系统硬件和软件版本.DRAM.Flash show sta ...
- 生成sde
/// <summary> ///获取保存的SDE文件 /// </summary> /// <param name="sdePath">< ...
- VS2012调试执行,网页打不开
360修复漏洞篇 TODO 修复了漏洞.vs2012在firefox和ie中都打不开 解决思路:360漏洞修复→已安装漏洞→卸载刚刚安装的漏洞 就可以解决 忽略漏洞 正常打开.
- Android中apk动态载入技术研究(2)android插件化及实现
了解了android中类载入的前期知识点后,来看看android中DexClassLoader详细的实现 详细载入流程例如以下: 宿主程序会到文件系统比方SD卡中去载入APK[1],然 ...
- IOS怎么实现一个UITableView的下拉刷新
採用的EGORefreshTableHeaderView来实现: 在Controller上实现EGORefreshTableHeaderDelegate的delegate @property(nona ...
- php 把一个数组分成有n个元素的二维数组的算法
一.第一种解法 <?php //把一个数组分成几个数组 //$arr 是数组 //$num 是数组的个数 function partition($arr,$num){ //数组的个数 $list ...
- 每日一支TED——弗兰斯·兰庭:为动物发声的摄影作品——2015年6月3日
今天是听TED的第11天,从今天開始简单写一下听TED的感受! 刚把得! 弗兰斯·兰庭从一个部落得到一个思想说:全部的动物都是一样的.虽然他们的外形不一样.可是内在确实一样的,他们在外面伪装,可是他们 ...
- 【Spark】Stage生成和Stage源代码浅析
引入 上一篇文章<DAGScheduler源代码浅析>中,介绍了handleJobSubmitted函数,它作为生成finalStage的重要函数存在.这一篇文章中,我将就DAGSched ...
- Error:全局变量不明白(using namespace std 与全局变量的冲突)
在用递归写八皇后时,定义了一个全局变量count,结果出现故障例如以下:提示全局变量不明白. 最后发如今实现文件.cpp中.我使用了using namespace std; 解决方法: 1.使用co ...