Flexbox布局模块中，不管是单行还是多行，要让它们在容器中水平垂直居中都是件易事，而且方法也有多种。最常见的是在Flex容器上设置对齐方式，在Flex项目上设置margin:auto。 先来看在F...
网页布局：Flexbox中实现水平垂直居中
阅读全文
Flex布局：规定子控件的排列与自身显示规则
Flex布局所使用的到的属性，简单分为以下两类： 1.规定子控件的排列规则 2.决定组件自身的显示规则 LinearLayout中，我们使用orientation来规定内部子组件的排列方向，如Text...
CSS clip-path属性实现不规则图形的显示
clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。 例子 div { width: 200px; height: 200px; background: ...
CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？
CSS选择符有哪些？哪些属性可以继承？ 常见的选择符有一下： id选择器（#content），类选择器（.content）, 标签选择器（div, p, span等）, 相邻选择器（h1+p）, 子选...
标准CSS盒子模型和低版本IE盒子模型区别有哪些？解决IE6存在bug的方法
标准（W3C）盒子模型：width = 内容宽度（content） + border + padding + margin 低版本IE盒子模型： width = 内容宽度（content + bord...
flex弹性：结合媒体查询布局代码
不但使用了弹性布局，而且利用了媒体查询功能。 代码实例如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...
flex弹性：圣杯布局
页面布局中比较常见的一个模式，圣杯布局。 代码实例如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24...
flex弹性三列布局：左右两列宽度固定，中间宽度自适应
代码实例，它实现了三列布局，左右两列宽度固定，中间宽度自适应。 代码实例: [HTML] 纯文本查看 复制代码运行代码 01 02 03 04 05 06 07 08 09 10 11 12 13 1...
flex弹性布局：一栏宽度固定，一栏宽度自适应效果
一栏宽度固定，一栏宽度自适应效果。 面就介绍一下如何使用flex弹性布局方式实现类似功能。 代码实例如下: [HTML] 纯文本查看 复制代码运行代码 01 02 03 04 05 06 07 08 ...
flex弹性布局：水平、垂直居中代码实例
使用flex弹性布局可以比较轻松的实现居中效果，无论是垂直方位还是水平方位。 代码实例如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18...
CSS居中常用方式有哪些？及优缺点
居中是页面开发中经常遇到的问题。 使用合适的、简单的、兼容性好的居中方式是我们页面仔在整个工作生涯中都要面对的问题。 text-align:center 来看这个例子，一张图片和文字进行居中。如下图所...
CSS Grid比Bootstrap更适合布局，为什么？
CSS Grid是一种全新的创建布局方式，这是有史以来第一次合适的布局系统，并且他是浏览器原生的，他给我们带来了很多好处。 当你和当今最流行的Bootstrap框架相比，grid的好处变的尤为清晰，您...
CSS 伪元素罕见用例：:after VS :before
伪元素已经使用了很长时间。然而，我觉得有些用例并不是所有开发人员都完全了解的。我写下这篇文章是为了阐明它们，以便它们能被更多地使用。 父子元素悬停特效 由于伪元素属于其父元素，因此存在一些不寻常的用例...
CSS布局定位BFC、Flex box、盒模型、display 属性的奥秘
CSS作为基础中的基础，除了让页面因为样式而变得丰富美观外，更是决定了页面元素的排列布局，然而很多时候，当我们对CSS一知半解，我们总会在开发中遇到元素不能按照我们所想的那样呈现出来的问题，所以本文就...
CSS background Image 好用7个技巧与代码示例
背景图像可能是我们所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图像不可能有任何不寻常的地方，但经过研究，答案并非如此。所以本文收集了七个我认为最有用的技巧，并创建...
CSS Overflow 概念和用例：如何调试水平滚动问题
CSS中，当一个元素的内容太大而无法容纳时，我们可以对其进行控制。该元素的属性是overflow，它是overflow-x和overflow-y属性的简写形式。 在本文中，将会介绍这些属性，然后我们将...
CSS布局指南：全屏布局
全屏布局，就是实现经典的头部，内容区，底部三大区域占满全屏的布局，这种布局很常见。 实现效果如下： 分析： 这里采用的方案是，头部底部使用fixed定位，中间使用之前讲到的两列布局技术。 注意： 头部...
CSS布局指南：N列布局
2.1 两列布局 这里的两列布局指的是，其中一列是定宽元素，另一列元素宽度自适应。比如，我们实现做列定宽，右列自适应的布局。 效果图如下： 方案一. 左边元素浮动，定宽，右边元素设置margin-le...
CSS布局指南：居中相关的布局
1.1 水平居中布局 效果图如下： 方案一. inline-block + text-align 分析：display设置为inline-block的元素，具有文本元素的性质，其父元素可以通过设置文本...
CSS-选择器（权重，伪类、伪元素区别）
1. 11种选择器 元素选择器（类型选择器） div/p/span... 复制代码 选择器分组 逗号分隔 h2,p 复制代码 通配符选择器 *与任何元素匹配 复制代码 类选择器 //区分大小写 .me...
CSS选择器，你真的都了解吗？
ID选择器 以#加id名来表示, id是唯一的，同一个页面里不允许多个ID相同的元素。一般只用来强调某个页面或者某个模块，多个功能相同的模块建议使用类选择器。 <div id="box">...
CSS Flexbox 布局深度解析
自从 flex-box 出现以后，一切似乎就豁然开朗了，水平垂直各种花式对齐，空间分配由你做主。当然，要用好它，用对它也不是一件容易的事，今天就给你说说 flex-box 布局，看完之后你也能熟练的运...
什么是css选择器优先级（Specificity）？计算规则是？
浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。 这句话也是很抽象，暂且先不管它了。但是我们可以先看一个例子： HTML:...
css选择器nth-child和nth-of-type的实例与区别在哪？
开发中我们不能总是操作一个dom样式就给一个class显然这是不合理的，我们尽量用其它选择器去代替class选择器。 举个例子： <ul> <li>我是第1个li标签</...
16