腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

偏前端工程师的驿站

专栏作者

274

文章

344109

阅读量

58

订阅数

CSS魔法堂：小结一下Box Model与Positioning Scheme

数据处理 css

前言对于Box Model和Positioning Scheme中3种定位模式的细节，已经通过以下几篇文章记录了我对其的理解和思考。《CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins》《CSS魔法堂：你一定误解过的Normal flow》《CSS魔法堂：Absolute Positioning就这个样》《CSS魔法堂：说说Float那个被埋没的志向》深入细节后会发现3中定位模式之间，Box Model和Positioning Schem

2018-01-18

5910

CSS魔法堂："那不是bug，是你不懂我!" by inline-block

数据处理 css

前言每当来个需要既要水平排版又要设置固定高宽时，我就会想起display:inline-block，还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发现盒子间无端端多了个不可选的空白符，于是想尽办法修复这个bug。直到一天拜读了@一丝姐、@HAX等高人的秘笈后才顿悟，原来我错了。那不是bug，是我不懂而已。先行者——IE5.5中的inline-block 当我们为支持IE5.5/6/7而添加这段hack时*display:inline;*zoom:1

2018-01-18

7310

CSS魔法堂：Box-Shadow没那么简单啦:)

数据处理 css

前言说起box-shadow那第一个想法当然就是用来实现阴影，其实它还能用于实现其他好玩的效果的，本篇就打算说说box-shadow的那些事。二话不说看效果 3D小球 <style type

2018-01-18

1.2K0

CSS魔法堂：重拾Border之——解构Border

前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时，实际值会按比例分配元素宽度时，不禁会问"我真的懂border吗？"。本系列将稍微深入探讨一下那个貌似没什么好玩的border！《CSS魔法堂：重拾Border之——解构Border》《CSS魔法堂：重拾Border之——图片作边框》

2018-01-18

1.1K0

CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

数据处理 css

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　盒子模型作为CSS基础中的基础，曾一度以为掌握了IE和W3C标准下的块级盒子模型即可，但近日在学习行级盒子模型时发现原来当初是

2018-01-18

1K0

CSS魔法堂：你一定误解过的Normal flow

前言刚接触CSS时经常听到看到一个词"文档流"，那到底什么是"文档流"呢？然后会看到"绝对定位和浮动定位能脱离文档流"，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolute positioning和Float的内容，却怎么也找不到Document flow(文档流)的资料。后来终于知道是某位大神将Normal flow翻译为文档流而已。。。。。。而我更偏好它的直译"常规流"，或直接引用英文名词就好了。 Normal flow到底啥意思啊？首先我们

2018-01-18

5980

CSS魔法堂：深入理解line-height和vertical-align

数据处理 css

前言一直听说line-height是指两行文本的基线间的距离，然后又说行高等于行距，最近还听说有个叫行间距的家伙，@张鑫旭还说line-height和vertical-align基情四射，贵圈真乱啊。。。。。。于是通过本篇来一探究竟:) line-height到底有多height？行距、行间距傻傻分不清首先看看“有道词典”的解析! Leading = Line Space + Font Size(即是行距 = 行间距 + 字体大小) Leading: 指相邻文本行间上一个文本行基线和下一文本行

2018-01-18

1.7K0

CSS布局：水平居中

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　一直对CSS布局一知半解，这段时间打算定下心来好好学习一下，于是先从最简单的水平居中布局开始入手。下面以分页组件为实例来记录各种实

2018-01-18

7.2K0

CSS魔法堂：Absolute Positioning就这个样

数据处理 css

前言当我们以position:absolute之名让元素脱离Normal flow的控制后，以为通过left和top属性值即可让元素得以无限的自由时，却发现还有各种神秘的力量左右着它的来去，于是我们意识到自己力量的微弱，开始迷茫不前。后来有幸拾到各路前辈高人的秘笈，终于打通任督二脉，记录在案以便日后查阅。以Normal flow为基础 Q:不是说好以左上角为原点(0,0)吗？怎么top:auto;right:auto;bottom:auto;left:auto;时的效果和Normal flow中的是

2018-01-18

6090

CSS魔法堂：你真的懂text-align吗？

数据处理 css

前言也许提及text-align你会想起水平居中，但除了这个你对它还有多少了解呢？本篇打算和大家一起来跟text-align来一次负距离的交往，你准备好了吗？ text-align属性详解 The 'text-align' CSS property describes how inline content like text and inline-level element etc. is aligned in its parent block element.Does not control the

2018-01-18

9210

CSS魔法堂：你真的理解z-index吗？

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　假如只是开发简单的弹窗效果，懂得通过z-index来调整元素间的层叠关系就够了。但要将多个弹窗间层叠关系给处理好，那么充分理解z-index背后的原理及兼容性问题就是必要的知识储备了。本文作为对W3C Recommendation-Layered presentation学习后整理的笔记，以便日后查阅。由于将英文名词翻译为中文名词容易产生歧义（如Normal flow被翻译为文档流），因此本文将直接采用原英文名词，而涉及到的英文

2018-01-18

1K0

CSS魔法堂：再次认识font

android linux css

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　文字承载着站点内涵，而良好的字体、排版则为用户提供舒适的阅读体验。本文打算对字体稍微深入一下子网页字体的内容，若有纰漏请大家指正，谢谢！目录一坨: 二, 字体分类 1. 衬线体(Serif) 2. 无衬线体/非衬线体(Sans-Serif) 3. 等宽体(Monospace) 4. 手写体/书法体(Calligraphy) 5. 符号体(Symbol) 三, 再识font-family 1. 认识font-fam

2018-01-18

2.2K0

CSS魔法堂：Reset CSS

下列样式规则可用于最小化各浏览器标签样式的不一致性。注意：实际使用时应该对其进行适当的调整，以适应项目要求。 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,

2018-01-18

8580

前端构建：Less入了个门

javascript css 打包

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了Autoprefixer等CSS后处理器，可参考@一丝的PPT）众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅。最好的入门教程——官网地

2018-01-18

1.6K0

CSS3魔法堂：背景渐变（Gradient）

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　很久之前就了解过CSS3的线性渐变（Linear-Gradient），这段时间决定进一步认知这一特性，以下笔记以便日后查阅。二、

2018-01-18

1.9K0

CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充，而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性，因此当前仅Webkit内核的浏览器支持CSS3 Filter，而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了，而IE5.5~9则使用IE滤镜、JS+DIV或VML处理！本篇为先占个坑，以后慢慢填^_^！！！ CSS3 Filter

2018-01-18

1.8K0

CSS魔法堂：盒子模型简介

本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model) 一、W3C标准的盒子模型　　　　　　　　　　　　　　　　　　　　　　　　　　　　二、IE盒子模型　　　　　　

2018-01-18

4860

CSS3魔法堂：禁止用户改变textarea大小

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　在FF、Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小，这不仅与IE下textarea的行为特点有异，而且textarea的大小变化会撑大其父节点从而破坏整体布局。二、原因　　　　　　　　　　　　　　　　　　　　　　　　　　通过调用 window.getComputedStyle(textarea元素, null).resize 返回both，我们可以知道原来是resize样式属性搞的鬼。三、CSS3属

2018-01-18

7610

当css属性width设为100%时

平常在写页面html代码时，经常会使用到width:100%来使控件宽度为父控件的内容宽度。但如果父控件为body，而且没有明确设置body的宽度，那么就会出现以下的情况了。代码： 1 <body> 2 <div style="background:#888;width:100%;height:200px"> 3 <div style="width:1000px;height:100px;margin:0 auto;border:solid 1px red"></div> 4 </di

2018-01-18

1.3K0

没有更多了

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态