[译]关于vertical-align:你需要知道的一切

2016-12-01
阅读 8 分钟
6.6k
通常我都有需要垂直对齐在一排上一个接着一个的元素。CSS提供了很多种可能性。有时,我听过float来解决问题,有时使用position:absolute,有时甚至会通过添加margin或者padding属性这种使代码变得比较脏的方式来达到目的。

CSS:编码规范

2016-05-03
阅读 8 分钟
4.2k
CSS书写格式 1.格式化代码 1.1文件 [建议]:CSS文件使用无BOM的UTF-8编码 1.2缩进 [强制]:使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。 {代码...} 1.3空格 [强制]:选择器 与 { 之间必须包含空格。 {代码...} [强制]:选择器 与 { 之间必须包含空格。 margin: 0; [强制]:列表性属性书在单行时,...

CSS:元素高度与宽度的讨论 系列文章(四)

2016-04-02
阅读 1 分钟
2.3k
前言 在之前的文章主要讨论了下面几种元素宽度与高度的计算: 块级非置换元素(例:div) Inline,非置换元素(例:span) Inline,置换元素(例:表单元素)这篇文章将继续讨论下列几种元素的宽度与高度的在不同情况下的高度与宽度的计算 Inline-block,非置换元素在文档流中(例:div设置为inline-block) Inline-block,置换元素在文档...

CSS:不同元素margin:auto的计算

2016-04-02
阅读 2 分钟
4.9k
关于什么元素的分类可以看我这篇文章CSS:关于元素高度与宽度的讨论 系列文章(二) 行内级元素 Inline,非置换元素:如果margin值为auto,则margin-left和margin-right的计算值也就为0 Inline,置换元素:同上 Inline-block,置换元素在文档流中:同上 Inline-block,非置换元素在文档流中:同上 块级元素 块级非置换元素,在文...

[译]:BFC与IFC

2016-02-21
阅读 8 分钟
17k
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.在普通流中的盒子会参与一种格式上下文,这个盒子可能是块盒也...

响应式布局----像素密度与viewport

2016-01-28
阅读 4 分钟
7.6k
首先举个例子,iphone6s的像素分辨率为1334x750,326ppi,4.7英寸。如图下面我们一个一个来解释。 像素密度 A.定义 326ppi代表的就是像素密度(pixels per inch),指的是每英寸的长度上排列的像素点数量。 a.屏幕分辨率 首先1334x750,代表的是屏幕分辨率,也就是说iPhone6s的屏幕是由纵向像素1334*横向像素750个像素点组成...

CSS:Margin与布局

2015-11-16
阅读 7 分钟
4.9k
在讲此之前,必须知道什么是containing-box以及一些宽高度的一些关系,关于containing-box的概念以及与宽高度的关系可看我的前一篇文章CSS:关于元素高度与宽度的讨论 系列文章(三)。

CSS:关于元素高度与宽度的讨论 系列文章(三)

2015-09-20
阅读 8 分钟
6.7k
在CSS:关于元素高度与宽度的讨论 系列文章(一)中讨论了display为display:block的置换元素的宽度与高度在不同情况下的表现,但是有些地方并不严谨,因此在这里做一个补充,在补充前先简单介绍一下css盒模型以及其在可视化格式模型布局中盒子被管理的几个要点。在CSS:关于元素高度与宽度的讨论 系列文章(二)中介绍了块...

CSS:选择器与优先级

2015-09-08
阅读 2 分钟
7k
样式优先级原则 总的原则1.CSS规定拥有更高确定度的选择器优先级更高2.如果样式中包含冲突的规则,且它们具有相同的确定度。那么,后出现的规则优先级高。 优先级:由高到低(从上到下) !important 内联(1,0,0,0) id: (0,1,0,0) 类:(0,0,1,0) 伪类/属性 元素:(0,0,0,1) 通配符 类选择器 class="web",多个元素可以拥有同...

CSS:关于元素高度与宽度的讨论 系列文章(二)

2015-08-21
阅读 2 分钟
5.4k
前言:在上一篇文章中讨论了关于块级非置换元素宽度与高度在不同情况下的表现,在这篇文章中将详细的阐述来自w3c定义的视觉化格式模型中对于各种元素的定义,以及行内级非置换元素与行内级置换元素宽度与高度的讨论

CSS:关于元素宽度与高度的讨论 系列文章(一)

2015-08-12
阅读 4 分钟
7.7k
约定:以下所讨论元素均为,display:block的非置换元素。关于什么是置换元素,什么是非置换元素元素,以及在w3c标准中定义的各种视觉化格式的框将在一篇博文中作出详细阐述。