文章: 阅读:

CSS 响应式设计

viewport 是用户网页的可视区域。翻译为中文可以叫做 "视区"。手机浏览器是把页面放在一个虚拟的 "窗口"（viewport）中，通常这个虚拟的 "窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。很多网页都是基于网格设计的，这说明网页是按列来布局的。使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。
CSSCSS

阅读全文 >>

CSS Media 媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如，font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。
CSSCSS

阅读全文 >>

CSS Pseudo Element 伪元素

CSS 伪元素是用来添加一些选择器的特殊效果。伪元素可以与 CSS 类配合使用。可以结合多个伪元素来使用。first-letter 伪元素用于向文本的首字母设置特殊样式。first-letter 伪元素只能用于块级元素。first-line 伪元素用于向文本的首行设置特殊样式。first-line 伪元素只能用于块级元素。before 伪元素可以在元素的内容前面插入新内容。after 伪元素可以在元素的内容之后插入新内容。
CSSCSS

阅读全文 >>

CSS Pseudo Class 伪类

CSS 伪类是用来添加一些选择器的特殊效果。在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示。在 CSS 定义中，a hover 必须被置于 a link 和 a visited 之后，才是有效的。a active 必须被置于 a hover 之后，才是有效的。伪类的名称不区分大小写。可以使用 first-child 伪类来选择父元素的第一个子元素。
CSSCSS

阅读全文 >>

CSS Flex 弹性盒子

弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
CSSCSS

阅读全文 >>

CSS Float 浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。float 属性指定一个盒子（元素）是否应该浮动。把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。clear 属性指定段落的左侧或右侧不允许浮动的元素。元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
CSSCSS

阅读全文 >>

CSS Align 对齐

要水平居中对齐一个元素, 可以使用 margin auto。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配。如果没有设置 width 属性（或者设置 100%），居中对齐将不起作用。如果仅仅是为了文本在元素内居中对齐，可以使用 text-align center。要让图片居中对齐, 可以使用 margin auto，并将它放到 块 元素中。
CSSCSS

阅读全文 >>

CSS Overflow 溢出

CSS overflow 属性用于控制内容溢出元素框时显示的方式。CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。overflow 属性指定如果内容溢出一个元素的框，会发生什么。overflow-x 属性指定如果它溢出了元素的内容区是否剪辑左/右边缘内容。overflow-y 属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。
CSSCSS

阅读全文 >>

CSS Position 定位

position 属性指定了元素的定位类型。元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定 position 属性。他们也有不同的工作方式，这取决于定位方法。position 指定元素的定位类型。top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
CSSCSS

阅读全文 >>

CSS Dimension 尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。height 属性设置元素的高度。height、min-height、max-height 属性不包括填充，边框，或页边距。line-height 负值是不允许的。width 属性设置元素的宽度。width、min-width、max-width 属性不包括填充，边框和页边距。
CSSCSS

阅读全文 >>

CSS Margin 外边距

CSS margin（外边距）属性定义元素周围的空间。margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。margin 简写属性。在一个声明中设置所有外边距属性。margin-top 设置元素的上外边距。margin-right 设置元素的右外边距。margin-bottom 设置元素的下外边距。margin-left 设置元素的左外边距。
CSSCSS

阅读全文 >>

CSS Outline 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。outline 在一个声明中设置所有的轮廓属性。outline-color 设置轮廓的颜色。outline-style 设置轮廓的样式。outline-width 设置轮廓的宽度。
CSSCSS

阅读全文 >>

CSS Border 边框

CSS 边框属性允许你指定一个元素边框的样式和颜色。border 简写属性，用于把针对四个边的属性设置在一个声明。border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
CSSCSS

阅读全文 >>

CSS Padding 填充（内边距）

CSS padding（填充）定义元素边框与元素内容之间的空间，即上下左右的内边距。当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。padding 简写属性。设置在一个声明中的所有填充属性。padding-top 设置元素的顶部填充。padding-right 设置元素的右部填充。padding-bottom 设置元素的底部填充。padding-left 设置元素的左部填充。
CSSCSS

阅读全文 >>

CSS Box Model 盒子模型

所有 HTML 元素可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
CSSCSS

阅读全文 >>