CSS学习笔记之框模型

【CSS学习笔记之框模型】的更多相关文章

CSS学习笔记之框模型

1.概述为了更好的处理元素内容.内边距.边框和外边距之间的关系,CSS 定义了框模型如下: 内边距.边框和外边距的默认值都是零,可以通过设置元素的 padding.border 和 margin 属性来覆盖这些默认的浏览器样式.另外,要注意的是 width 和 height 属性可以分别用于设置内容区域的宽度和高度 2.内边距 padding 属性定义元素的内边距,其接受长度值和百分数值,要注意的是百分数值是相对于其父元素的 width 属性计算的一般情况下,我们需要指定四个值…

CSS学习笔记07 盒子模型

1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. 用公式表示就是:盒子=边框+内边距+内容区域+外边距元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 注意:背景应用于由内容和内边距.边框组成的区域. 可以看到背景色穿…

CSS学习笔记——视觉格式化模型 visual formatting model

CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻译自W3C官方文档,其中加上了自己的一些理解.相关链接:https://www.w3.org/TR/CSS2/visuren.html#block-boxes. 1.可替换元素(Replaced element) 下面的一段话引自MDN: 典型的可替换元素有 <img>. <object&g…

CSS学习笔记：盒子模型

盒子模型(CSS basic box model):When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties(color, background, bord…

3.5html学习笔记之框模型，盒子模型

块元素:block 两个相邻的元素外边距,两者之间取最大. 浮动(定位机制针对框来说): 1.position:absolute,relative,fixed 1)relative:在原来的位置上进行移动 2)absolute:从里面往外走,第一个能定位的位置移动 2.float:right,left:在浏览器缩放时候,自动做调整…

CSS学习笔记09 简单理解BFC

引子在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style type="text/css"> .div1 {background-color: #FCE38A; width: 200px; height: 1…

CSS学习笔记10 相对定位，绝对定位与固定定位

文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position 属性,来重新决定元素在文档流中的位置. position 属性值 static:默认的文档流的布局的方式,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中.(忽略 top, bottom, left, right 或者 z-index 声明). relat…