果壳儿宇宙

前面我们学习到了 flexbox 布局。通过使用 flexbox 布局，我们可以更轻松实现以往很难实现的页面布局。本文主要讲解 flexbox 布局是如何去分配和计算布局剩余空间的。（本文阅读前要求你对 flexbox 已经有了初步的认知。） 为了更好地理解本文内容，我们需要先…

auto（默认值）和整数。 z-index 属性只对定位元素元素生效，也就是 position 属性不为 static 的元素。 除了默认值 auto， z-index 可以设置为任意整数，正数，0，负数都可以。 数值大的在上面(auto 数值上相当于0)。 = 数值相同的，在…

清除浮动主要是为了解决由于浮动元素脱离文流导致的元素重叠或者父元素高度坍塌的问题，而这两个问题分别对应了需要清除浮动的两种种情况：清除前面兄弟元素浮动和闭合子元素浮动（解决父元素高度坍塌）。 在 CSS2 以前，clear 的原理为自动增加元素的上外边距（margin-top）…

我们从效果图中可以看到列表 item 之间有一点小空隙，但是我们在代码中并没有设置 margin 水平间距。那么这个空隙是如何产生的呢？ 这是因为我们编写代码时输入空格、换行都会产生空白符。而浏览器是不会忽略空白符的，且对于多个连续的空白符浏览器会自动将其合并成一个，故产生了所…

当元素的 CSS 属性 display 的计算值为 block，list-item，table，flex 或 grid 时，它是块级元素。视觉上呈现为块，竖直排列。典型的如 <div> 元素，<p> 元素等都是块级元素。 每个块级元素至少生成一个块级盒，称为主要块级盒(prin…

伪类选择器:nth-chald(n)选择第一个tr元素里的所有内容选择2的所有内容选择2的所有内容属性选择器属性的一种特殊待遇搭配比较自由，既可以根据属性来选，也可以根据属性值来选，还可以根据部分属性

首先，我们可以使用一些关键词来表示颜色，如 red，green，gray 等（默认浏览器支持 147 种关键词颜色：CSS 颜色名），除此之外，还有两个关键词可用，分别是 transparent 和 currentColor。 transparent 从字面上就可以知道是透明；…

px 是 pixels（像素）的缩写，是一种绝对单位，用于屏幕显示器上，传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。任何现代显示屏，不管是手机，平板，笔记本还是电视都是由成千上万的像素组成的，所以我们可以使用这些像素来定义长度。 另外 CSS 将光栅图像(…

表单元素本身是指<form>，不过它也有一个更广泛的概念，指构成表单的所有元素。 接下来将会简单介绍几种form表单常用元素。在介绍表单常用元素之前，先说下一般它们都通用的几个属性： <input>元素跟<img>元素一样，不需要闭合标签。除了上面说到的通用属性外，其常见属性如…