【CSS概念 - 可视化格式模型（一） 盒模型与外边距叠加】的更多相关文章

CSS概念 - 可视化格式模型（一） 盒模型与外边距叠加

可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型 可视化格式模型要掌握的3个最重要的CSS概念是 浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形成CSS的基本布局. 主要学习内容: 盒模型的复杂性和特点 如何以及为什么使用外边距 绝对定位和相对定位之间的差异 浮动和清理是如何工作的 1.盒模型概念 盒模型是CSS的基石之一, 它指定元素如何显示以及(在某种程度上)如何相互交互. 页面上的每个元素被看做一个矩形框, 这个框由元素的内容. 内边距. 边框…

CSS概念 - 可视化格式模型（二） 定位概述（普通流、绝对定位）

2.定位概念 上一节熟悉了盒模型, 现在来看一下可视化格式模型和定位模型. 理解这两个模型的细微差异是非常重要的, 因为它们一起控制着如何在页面上布置每个元素 2.1 可视化格式模型 CSS有三种基本的定位机制:普通流. 浮动.绝对定位. 除非专门指定, 否则所有框都在普通流中定位. 在普通流中元素框的位置由元素在HTML中的位置决定. p.h1或div等元素常被称为块级元素, 这意味着这些元素显示为一块内容, 即“块框”. 与之相反, a和span等元素被称为行内元素, 因为他们的内容显示在行…

CSS外边距叠加问题

CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它们两个之间较大的值.②.两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值.③.两个边距一正一负时,折叠结果是两者相加的和.解决方案:外层元素padding代替内层元素透明边框 border:1px solid transparent;内层元素绝对定位 postion:absolute:外层元…

CSS基础（四）：盒模型

CSS盒模型 HTML文档中可以将每个元素都看作是长方形的盒子.而CSS盒模型规定了元素框处理元素内容content.内边距padding.边框border和外边距margin的方式.下图是W3C对于盒模型的描述图. 使用Firebug,可以轻松地查看到盒子的布局大小. 盒子本身的大小是这样计算的: width: width + padding-left + padding-right + border-left + border-right height: height + padding-t…

css盒模型。边框和内外边距

css盒模型: 外边距 边框 内填充 内容 盒模型分为两种: 标准盒模型: 怪异盒模型(IE盒模型): 边框:border border: 10px solid blue;表示设置10像素蓝色实线条的边框 是以下三个样式的复合语法 border-width: 10px; 设置边框的宽度 border-color: blue; 设置边框的颜色 border-style: solid; 设置边框的样式 solid:实线 dashed: 虚线 装订线 dotted: 点线 double: 双线 如何单…

CSS学习笔记--Div+Css布局（div+span以及盒模型）

1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元素又名行内元素(inline element),和其对应的是块元素(block element),都是html规范中的概念.内联元素的显示,为了帮助理解,可以形象的称为"文本模式",即一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行.而当加入了css控制以后,块元素和内联元素的这…

《CSS世界》笔记二：盒模型四大家族

上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin/border/padding/content而已,再多无非在不同box-sizing下的表现不同而已:但是书中记录的替换元素与非替换元素.content的一些用法.margin合并等等,让我对"盒模型四大家族"有了全新的认识 一.替换元素与非替换元素 根据"外在盒子"…

css盒子模型、边框border、外边距margin、填充padding、轮廓outline

盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清除边框外的区域,外边距是透明的. Border(边框):围绕在内边距和外边距的边框. Padding(内边距):清除内容周围的区域,内边距是透明的. Content(内容):盒子的内容,显示文本和图像. 例如下面一个例子 <!DOCTYPE html> <html> ······ &l…

python 46 盒模型 与盒模型布局

一:盒模型 1.  盒模型的概念 广义盒模型:文档中所有功能性及内容性标签,及文档中显示性标签 侠义盒模型:文档中以块级形式存在的标签(块级标签拥有盒模型100%特性且最常用) 盒模型组成:margin + border + padding + content v_hint(提示):content = width x height 2.  盒模型成员介绍 content  \  border  \  padding  \  margin 1. content 通过设置width与height来规…

认识W3C标准盒子模型，理解外边距叠加

概述: 注:加粗斜体字是非常重要的概念,决定着你是不是能看懂那句话,所以不懂的请一定要搜索一下. 页面上的每个元素,都在一个矩形框里.   每个矩形框都是一个盒模型.   每个盒模型都由内容区域(content).边框(border ).内填充(padding)和外边距(margin)组成. 这四个属性都可以独立存在.也就是说,一个盒子可以只有content,也可以只有border,也可以只有padding,也可以只有margin.   (图片来自网络) 关于margin: 可以有负值 Nega…