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):框模型,定位的更多相关文章

  1. CSS学习笔记之框模型

    1.概述 为了更好的处理 元素内容.内边距.边框 和 外边距 之间的关系,CSS 定义了框模型如下: 内边距.边框 和 外边距 的默认值都是零,可以通过设置元素的 padding.border 和 m ...

  2. CSS| 框模型-定位及相關屬性

    CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...

  3. CSS 知识点整理

    本文是我整理的关于CSS的部分基础知识点,适合正在准备前端工作面试的人做简单回顾. 1. 盒子模型 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. Mar ...

  4. css知识点整理

    CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一.css引入的方式 1.行内样式:行内式是在标记的style ...

  5. 17个CSS知识点整理

    1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率:使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快:内容能被更多的用户所访问.内容能被更 ...

  6. CSS知识点整理(1):CSS语法,层叠次序,选择器,其他重要方面。

    1. css的全称 2. CSS的层叠次序:优先级由低到高 ·浏览器设置 ·外部样式表 或者 内部样式表 —— 就近原则 ·内联样式 3. CSS的3种形式,以及每种形式的语法格式 ——注意样式表的为 ...

  7. css知识点

    css知识点 一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...

  8. css中的定位和框模型问题

    和定位有关的元素属性如下 position  元素的定位类型   绝对定位会相对于最近定位的祖先元素的位置来定位,而不会影响其他框的位置 固定定位 相对定位 z-index   元素的堆叠顺序 值越大 ...

  9. CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

随机推荐

  1. 【Codeforces 404C】Restore Graph

    [链接] 我是链接,点我呀:) [题意] 每个节点的度数不超过k 让你重构一个图 使得这个图满足 从某个点开始到其他点的最短路满足输入的要求 [题解] 把点按照dep的值分类 显然只能由dep到dep ...

  2. 我安装android studio的过程与经历

    虽然android studio已经出来两年多了,但是我一直都没真正用过.之前用Eclipse还算用得挺好.我并不是一个专职的android开发者,我是个游戏开发者,打包的时候要用到android.不 ...

  3. HUST 1214 Cubic-free numbers II

    Cubic-free numbers II Time Limit: 10000ms Memory Limit: 131072KB This problem will be judged on HUST ...

  4. Leetcode 126.单词接龙II

    单词接龙II 给定两个单词(beginWord 和 endWord)和一个字典 wordList,找出所有从 beginWord 到 endWord 的最短转换序列.转换需遵循如下规则: 每次转换只能 ...

  5. python实现汉诺塔算法

    汉诺塔 算法分析 1.步骤1:如果是一个盘子,直接将a柱子上的盘子从a移动到c 否则 2.步骤2:先将A柱子上的n-1个盘子借助C移动到B(图1) 已知函数形参为hanoi(n,a,b,c),这里调用 ...

  6. Node & Express: some tips

    1. 设置Express端口号: 在app.js中添加 app.set('port', process.env.PORT || 3000); 之后命令行中打入 PORT=1234 node app.j ...

  7. MVC中路由的一些内容详解

    使用路由的好处:1.能够根据系统需求,灵活的划分请求规则(不同模块请求的URL是不一样的)2.屏蔽物理路径,提高系统的安全性,以上情况是无法根据URL分析视图文件在站点目录中的位置3.有利于搜索引擎优 ...

  8. LeetCode 350. Intersection of Two Arrays II (两个数组的相交之二)

    Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...

  9. Xcode 设置图片全屏显示

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  10. telnet端口问题

    今天测试发现telnet 一个端口不通,开始还以为是服务开放这个端口有问题,后来才发现这个端口是udp的.而telnet下层走的tcp协议,自然无法测试那些tcp的端口. 而之前下意识里还总以为都可以 ...