图片并茂:css3 flexbox实践指南之flex-item

图片并茂:css3 flexbox实践指南之flex-item
  我们在上文中介绍了flexbox容器的属性,本文我们再介绍一下容器里的项目flex-item. flex-item,是指包在flex容器里的项目(class名可以自己起,不一定就要叫flexbox/flex-item): .flexbox { display:flex; } .flexbox .flex-item{ flex:1; } order order属性控制Flex容器的子项在Flex容器中的显示顺序。默认情况下,它们按照最初添加到Flex容器中的顺序排序。 .flex-item { -webkit-order: ; /*...

图片并茂:CSS3 Flexbox实践指南

图片并茂:CSS3 Flexbox实践指南
Flexbox Layout是CSS3中的新布局模块,它用于改进Flex容器中的项目对齐,方向和顺序,而不用定义容器里面的宽度。Flex容器的主要特点是能够修改其子节点的宽度或高度,从而很好地适配不同的屏幕尺寸。 Flexbox布局很容易使用,因为元素的定位简单,因此可以用更少的代码实现更复杂的布局,从而简化开发过程。Flexbox布局算法是基于方向的,与基于垂直和水平的块或内联布局不同。这个flexbox布局应该用于小型...

我们该使用!important这个CSS样式大杀器吗?

我们该使用!important这个CSS样式大杀器吗?
相信通过此前的文章我们了解了CSS的权重,更加了解到!important这样的大杀器带给我们的快感。特别是在我们修改样式的bug的时候,直接上来一个!important撂倒。但是,我们该使用!important这个CSS样式大杀器吗? 简单结论就是,在使用!important来改写样式时,一定要非常慎重!虽然改完之后会很直观地看到效果,看上去也没什么坏的影响,但实际上,有可能是给自己挖坑。因为一旦往后要再次修改样式,那就是...

什么是CSS权重?一文弄懂css的权重

什么是CSS权重?一文弄懂css的权重
CSS权重 我们先来看一个初学者常遇见的一个场景。 假设我们正在码前端代码,要做一个网站或者web应用的功能,但我们引用的组件库样式不适合我们,这时需要对组件样式进行一些重写。于是打开开发者工具,获取要修改的元素的类名,并编写一些新的CSS。看上去太简单啦,三下两下就搞完了。但是,刷新页面后,没有进行任何更改, 或者有些更化,但不是全部如我们预期的。也许颜色会改变,但给予元素的`margin-le...

哪些css属性是可以继承的?可继承属性列表

哪些css属性是可以继承的?可继承属性列表
什么是继承? inherit关键字指定属性应从其父元素继承其值。inherit关键字可用于任何CSS属性和任何HTML元素。如果未在元素上指定继承属性的值,则该元素将在其父元素上获取该属性的计算值。 比如:将<span>元素的文本颜色设置为蓝色,但class =“extra”类里面的span元素的颜色除外: span { color: blue; } .extra span { color: inherit;/*将继承自extra的颜色*/ } 哪些哪些css属性是可以继承的?以...

温故知新:CSS选择符有哪些?它们是如何使用和生效的?

温故知新:CSS选择符有哪些?它们是如何使用和生效的?
理解CSS的最大关键是理解选择器。选择器允许我们选择特定的HTML元素并将样式应用于它们。我们现在不考虑样式,我们先考虑如何选择html元素。 在下面的示例中,CSS将位于名为style.css的文件中,从名为index.html的HTML文档中引用该文件。它们是单独的文件,这是CSS的优点,使样式和结构分离。 这是HTML文件的样子: <!DOCTYPE html> <html lang="en"> <head> <title>我们在学习...

什么是样式初始化(CSS Reset)?为什么要进行样式初始化?

什么是样式初始化(CSS Reset)?为什么要进行样式初始化?
一个CSS Reset是一种短的,往往被压缩(精缩)的CSS规则集,以用来重置所有的HTML元素,使其以一致的基准来呈现,简单说就是,预先设定html元素的基准样式,比如,h1是多少字号,h2是多少字号。 每个浏览器都有自己的默认“用户代理”样式表,它用于使没设置样式的网站看起来更清晰。例如,大多数浏览器默认情况下将链接设置为蓝色,访问后链接为紫色,为表格提供一定量的边框和填充,将可变字体大小应用于H1...

什么是绝对定位、相对定位和固定定位?它们有什么区别?

什么是绝对定位、相对定位和固定定位?它们有什么区别?
首先要理解的一个重要概念是网页上的每个元素都是一个块。字面上是一个像素矩形。将元素设置为display: block;或者默认情况下该元素是显示时,这很容易理解:block; 这意味着您可以设置宽度和高度,该元素将遵循该宽度和高度。但是display: inline;,默认情况下,元素也是矩形,它们只是流向不同的页面,尽可能水平排列。 现在您将每个页面元素描绘成一个像素块,我们可以讨论如何使用定位来准确地将像素块...

图文解析:什么是CSS的盒子模型?(css box model)

图文解析:什么是CSS的盒子模型?(css box model)
虽然重复了千百遍,但是图表解释什么是CSS盒子模型的文章还是挺少的,这对初学者并不是很友好。 最简单的回答就是: (1)有两种, IE 盒子模型、W3C 盒子模型; (2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border); (3)区 别: IE的content部分把 border 和 padding计算了进去; 但实际上,这样的回答,未必能让面试官满意。本文就再重复一下。 网页设计中的每个元素都是一个...
Copyright © 前端面试题 保留所有权利.   Theme  Ality 桂ICP备17012235号-1

用户登录