CSS2
MGsniper
MGsniper aka Vincent Atlas
展开
-
CSS | 置换元素(可替换元素)
置换元素是一类CSS格式渲染时只知道其固有尺寸(intrinsic dimensions)的元素,通常,浏览器根据元素的标签和属性,来决定元素的具体显示内容。原创 2019-01-23 19:44:13 · 5155 阅读 · 0 评论 -
CSS | 相对定位下,盒偏移量的计算规则
文章目录left&righttop&bottom相对定位与绝对定位的元素,都是根据盒偏移量(left,right,top,bottom)进行偏移的。盒偏移量的计算规则如下:left&right'left’和’right’水平移动定位元素,不会改变其大小。'left’代表盒相对左方向的偏移量,'right’代表盒相对右方向的偏移量,满足等式 left = -rig...原创 2019-02-14 11:04:38 · 1984 阅读 · 0 评论 -
CSS | 包含块
“包含块”的定义盒的位置和大小有时是根据一个特定矩形计算的,叫做该元素的包含块(containing block)。元素包含块的定义如下:根元素所在的包含块是一个被称为初始包含块(initial containing block)的矩形。对于其它元素,如果该元素的position是’relative’或者’static’,包含块由其最近的块容器祖先盒的内容边界形成如果元素具有’...原创 2019-02-13 17:26:43 · 360 阅读 · 0 评论 -
CSS | line-height 与 vertical-align详解
本文将依据W3C官方文档,对IFC下的line-height与vertical-align属性进行详尽的解析。原创 2019-02-13 16:53:00 · 453 阅读 · 0 评论 -
CSS | margin与padding 百分比
在CSS 盒模型中,依据CSS2.2文档,margin与padding的百分比指定值时,一律参考包含盒的宽度。示例: .father{ height: 100px; width: 200px; border: solid; } .son{ margin...原创 2019-02-18 14:41:05 · 288 阅读 · 0 评论 -
CSS | 文本方向 direction
direction属性指定了块的基本书写方向,除此之外,它还指定了一些东西,例如表格列布局的方向、水平溢出的方向、'text-align: justify’时,块中最后一行的方向。示例如下:direction:ltr (即默认值 从左向右)使用两端对齐后,最后一行的方向仍为从左向右direction: rtl...原创 2019-02-12 15:23:43 · 433 阅读 · 0 评论 -
CSS | 行内格式化上下文(IFC)
文章目录行内格式化上下文 (Inline Formatting Contexts)水平放置垂直对齐行框行内格式化上下文 (Inline Formatting Contexts)水平放置在IFC中,盒是从包含块的内容区左上角开始一个挨一个水平放置的。这些盒之间的水平外边距,边框和内边距都有效,而垂直外边距不起作用。垂直对齐盒在行内可以不同的方式垂直对齐:以它们的底部或者顶部对齐,或者...原创 2019-02-12 11:02:32 · 1108 阅读 · 0 评论 -
CSS | 块格式化上下文(BFC)
块格式化上下文(Block Formatting Context)原创 2019-02-11 17:31:30 · 332 阅读 · 0 评论 -
CSS | 盒模型的高度计算规则
文章目录height 属性计算height与margin的规则行内非替换元素常规流中的行内替换元素,块级替换元素,替换的inline-block元素和浮动替换元素overflow为visible的常规流中的块级非替换元素绝对定位的非替换元素绝对定位的替换元素复杂情况height 属性在标准盒模型中,height指定了盒的内容高度(content height)属性取值可选...原创 2019-02-21 16:09:49 · 1614 阅读 · 0 评论 -
CSS | 定位方式(Position schemes)
文章目录前言定位方案流内&流外误导的“标准文档流”前言 本文是视觉格式化模型的第二章,重点介绍CSS2.1中的三大定位方式。定位方案CSS 2 中,可以采取三种定位方案对盒进行布局:常规流(normal flow) : 常规流包括对块级盒的块格式化,对行级盒的行格式化,对块级盒和行级盒的相对定位。浮动 : 一个盒浮动时,会先按照常规流来摆放,再从常规流中取出并尽可能地向左或向...原创 2019-01-29 15:08:32 · 321 阅读 · 0 评论 -
CSS | 盒类型 与 display 显示属性
文章目录前言盒类型1.块级元素与块盒1.1块级匿名盒2.行内元素与行盒2.1行内匿名盒display 属性前言本文重点讲述CSS 2.1规定的盒类型,以及相应的display属性。flex,grid等CSS3内容会另开新篇。盒类型1.块级元素与块盒1.1块级匿名盒2.行内元素与行盒2.1行内匿名盒display 属性inlineblockinline-blocknone...原创 2019-01-23 16:48:39 · 548 阅读 · 0 评论 -
CSS | 堆叠上下文与z-index
文章目录堆叠上下文与堆叠层级基本定义堆叠层级 z-index堆叠上下文生成上下文与层级的性质堆叠优先级规则堆叠上下文与堆叠层级基本定义堆叠上下文是HTML元素的三维概念,HTML元素在沿垂直于窗口的z轴延伸,HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。每个盒都属于一个堆叠上下文。在所属堆叠上下文中,每个定位元素都拥有堆叠层级。堆叠层级决定了元素在z轴上的位置,一般地,堆...原创 2019-02-15 10:59:54 · 374 阅读 · 2 评论 -
CSS | 视觉格式化模型(Visual formatting model)
文章目录视觉格式化模型的简介1.显示类型2.盒模型尺寸3.定位方式视觉格式化模型的简介 在可视化格式模型(Visual formatting model)即可视化媒体处理DOM树的方式。 DOM树由若干盒子组成,这些盒子的布局受如下几点因素控制显示类型(display:block,inline,inline-block,flex,etc.)盒模型尺寸(width,height,padd...原创 2019-01-23 14:34:50 · 581 阅读 · 0 评论 -
CSS | absolute定位下宽高的百分比设定
根据W3C CSS2对CSS1的修改,当子元素使用absolute定位时,宽高设定百分比的参考值不是父元素内容块的宽高,而是父元素padding box的宽高,即内边距+内容块宽高 W3C文档原文如下 **注意: 虽然此处的设定涉及到padding box,但目前padding box已基本废弃,目前为主流浏览器兼容的box-sizing只有content-box和border-box两种...原创 2019-01-21 11:26:00 · 3100 阅读 · 0 评论 -
CSS | absolute绝对定位的默认位置
问题情境 关于绝对定位元素的原点,我们常接受的一种明确又不精确的说法:绝对定位元素的原点是第一个非static定位祖先节点的左上角。 这个说法有关参考元素的描述是精确的——即绝对定位元素的参考元素是第一个非static定位祖先节点,如果这样的祖先元素不存在时,则相对于ICB(inital container block, 初始包含块),一般情况下,ICB就是html根节点。 但这个说法的后半...原创 2019-01-18 16:29:46 · 5796 阅读 · 0 评论 -
CSS | 盒模型的宽度计算规则
文章目录前言width 属性width与margin的计算规则计算值与应用值行内非替换元素行内替换元素常规流中的替换inline-block常规流中的块级非替换元素特殊情况常规流中的块级替换元素浮动的非替换元素常规流中的非替换inline-block浮动的替换元素前言以下内容默认以标准盒模型即content-box为标准。width 属性width 属性:在标准盒模型中,width指定了...原创 2019-02-19 17:20:20 · 5194 阅读 · 0 评论