02 CSS - 随笔分类 - springsnow

CSS（23）CSS样式表命名参考表

摘要：一、命名规则说明所有的命名最好都小写属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"每个标签都要有开始和结束，且要有正确的层次，排版有规律工整空元素要有结束的tag或于开始的tag后加上"/"表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等到的定义，应遵循从大到小的原则，体现文档的结构... 阅读全文

posted @ 2020-02-10 14:06 springsnow 阅读(1044) 评论(0) 推荐(0) 编辑

CSS（22）CSS的长度单位

摘要：CSS 有几个不同的单位用于表示长度。一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。长度由一个数字和单位组成如 10px, 2em, 等。数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。对于一些 CSS 属性，长度可以是负数。有两种类型的长度单位：绝对和相对。一、绝对长度绝对长度单位是... 阅读全文

posted @ 2020-02-10 13:29 springsnow 阅读(615) 评论(0) 推荐(0) 编辑

CSS（21）CSS Grid网格布局

摘要：对于Web开发者来说，网页布局一直是个比较重要的问题。但实际上，在网页开发很长的一段时间当中，我们甚至没有一个比较完整的布局模块。总的来说 Web 布局经历了以下四个阶段：1、table表格布局，通过 Dreamweaver 拖拽表格或者手写 table 标签布局2、float浮动及position定位布局，借助元素元素盒模型本身的特性以及 float position 等属性等进行布局3、fl... 阅读全文

posted @ 2020-02-10 12:54 springsnow 阅读(267) 评论(0) 推荐(0) 编辑

CSS（20）CSS3 弹性盒子(Flex Box)

摘要：弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。一、浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -... 阅读全文

posted @ 2020-02-10 11:15 springsnow 阅读(346) 评论(0) 推荐(0) 编辑

CSS（19）CSS3 多列

摘要：一、CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局，IE10及以上支持。如下实例: 1、所有 CSS3 的多列属性： column-count：指定元素应该被分割的列数。 column-fill：指定如何填充列 column-gap：指定列与列之间的间隙 column-rule：所有 column-rule-* 属性的简写 column-... 阅读全文

posted @ 2020-02-10 10:53 springsnow 阅读(185) 评论(0) 推荐(0) 编辑

CSS（18）CSS3 过渡与动画

摘要：一、CSS3 过渡:transitionCSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。IE10及以上浏览器支持。1、它是如何工作？CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。应用于宽度属性的过渡效果，时长为 2 秒：div{ transi... 阅读全文

posted @ 2020-02-10 09:24 springsnow 阅读(548) 评论(0) 推荐(0) 编辑

CSS（17）CSS 2D、3D 转换

摘要：一、CSS3 转换通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。浏览器支持Internet Explorer 10、以及 Opera 支持 transform 属性。注释：Internet Explorer 9 需要前缀 -ms-。Chrome 和 Safari 需要前缀 -webkit-。二、2D 转换在本章中，您将学到如下 2D 转换方法：translate()rot... 阅读全文

posted @ 2020-02-10 08:53 springsnow 阅读(551) 评论(0) 推荐(0) 编辑

CSS（16）CSS3 渐变（Gradients）

摘要：一、CSS3 渐变（gradients）渐变效果CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）- 由它们的中心定义线性渐变相关属性：background-image。 IE8 及更... 阅读全文

posted @ 2020-02-10 07:56 springsnow 阅读(464) 评论(0) 推荐(0) 编辑

CSS（15）CSS媒体查询Media Queries

摘要：一、媒体查询继承了 CSS2 多媒体类型的所有思想：取代了查找设备的类型，CSS3 根据设置自适应显示。媒体查询可用于检测很多事情，例如：viewport(视窗) 的宽度与高度设备的宽度与高度朝向 (智能手机横屏，竖屏) 。分辨率目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。二、媒体类型：mediatype 媒体类型(Media Types)允许你定义以何种媒介来... 阅读全文

posted @ 2020-02-10 07:33 springsnow 阅读(423) 评论(0) 推荐(0) 编辑

CSS（14）CSS 伪元素

摘要：CSS伪元素伪元素是用来添加一些选择器的特殊效果。伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。所有CSS元素 ... 阅读全文

posted @ 2020-02-10 06:25 springsnow 阅读(226) 评论(0) 推荐(0) 编辑

CSS（13）CSS 伪类(Pseudo-classes)

摘要：CSS伪类伪类是用来添加一些选择器的特殊效果。伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。所有CSS伪类 :ac... 阅读全文

posted @ 2020-02-10 05:25 springsnow 阅读(226) 评论(0) 推荐(0) 编辑

CSS（12）CSS 布局 - 水平 & 垂直对齐

摘要：一、元素居中对齐：margin: auto 要水平居中对齐一个元素div，可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配： div 元素是居中的 .center { margin: auto; width: 50%; border: 3px so... 阅读全文

posted @ 2020-02-05 18:56 springsnow 阅读(280) 评论(0) 推荐(0) 编辑

CSS（11）CSS浮动和清理

摘要：一、浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。1、请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：2、再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据... 阅读全文

posted @ 2020-02-05 18:20 springsnow 阅读(271) 评论(0) 推荐(0) 编辑

CSS（10） Position(定位)

摘要：一、position 属性指定了元素的定位类型。 position 属性的五个值： static relative fixed absolute sticky 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 1、static 定位 HTML 元素的默认值... 阅读全文

posted @ 2020-02-05 18:16 springsnow 阅读(298) 评论(0) 推荐(0) 编辑

CSS（09）CSS外边距margin合并

摘要：外边距margin合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。折叠的结果两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。产生折叠的原因而根据w3c规范，两个margin是邻接的必须满足以下条件 1、必须是处... 阅读全文

posted @ 2020-02-05 17:58 springsnow 阅读(333) 评论(0) 推荐(0) 编辑

CSS（08）边框与圆角

摘要：一、CSS 边框CSS边框属性允许你指定一个元素边框的样式和颜色。1、边框样式:border-style边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式none: 默认无边框dotted: 定义一个点线边框dashed: 定义一个虚线边框solid: 定义实线边框double: 定义两个边框。两个边框的宽度和 border-width 的值相同groove:... 阅读全文

posted @ 2020-02-05 16:35 springsnow 阅读(490) 评论(0) 推荐(0) 编辑

CSS（07）框模型

摘要：所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。一、CSS 框模型概述元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距... 阅读全文

posted @ 2020-02-05 15:24 springsnow 阅读(257) 评论(0) 推荐(0) 编辑

CSS（06）列表、表格和光标

摘要：一、列表在HTML中，有两种类型的列表：无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）有序列表 - 列表项的标记有数字或字母使用CSS，可以列出进一步的样式，并可用图像作列表项标记。1、不同的列表项标记list-style-type属性指定列表项标记的类型是：ul.a {list-style-type: circle;}ul.b {list-style-type: square;} o... 阅读全文

posted @ 2020-02-05 15:23 springsnow 阅读(258) 评论(0) 推荐(0) 编辑

CSS（05）字体

摘要：CSS字体属性定义字体，加粗，大小，文字样式。一、所有CSS字体属性 font：在一个声明中设置所有的字体属性 font-family：指定文本的字体系列 font-size：指定文本的字体大小 font-style：指定文本的字体样式 font-variant：以小型大写字体或者正常字体显示文本阅读全文

posted @ 2020-02-05 15:21 springsnow 阅读(225) 评论(0) 推荐(0) 编辑

CSS（04）文本

摘要：一、CSS文本属性 color：设置文本颜色 direction：设置文本方向。 letter-spacing：设置字符间距 line-height：设置行高 text-align：对齐元素中的文本 text-decoration：向文本添加修饰 text-indent：缩进元素中文本的首行 te 阅读全文

posted @ 2020-02-05 12:46 springsnow 阅读(209) 评论(0) 推荐(0) 编辑

工作在浏览器上人-YangBobin

随笔分类 - 02 CSS