duke_ding2的博客

所谓CSS选择器（selector），说白了就是CSS样式会匹配哪些HTML元素，当遇到冲突时又将如何选择。CSS选择器可分为如下两类：其中最常用的的是类选择器。 效果如下：本例中，指定了 标签，其它标签（比如 标签）不受影响。 效果如下：本例中，通过元素的 属性来匹配样式。注意：类选择器的样式名字以 开头。一个元素可以设置多个类名，例如： 效果如下：可见， 既设置了宽高颜色，也设置了字体。注意：多个类名之间用空格分隔。 效果如下：本例中，通过元素的 属性来匹配样式。注意：ID选择器的样式名字以

CSS常见有三种布局方式：本文主要介绍浮动。先来简单看一下标准流。标准流是基本的布局方式，说白了就是标签按照其默认方式排列。要想打破默认的布局方式，一种办法是 ，但是用浮动更加灵活方便。浮动关键字： 效果如下： 是块级元素，默认会独占一行，现在加了浮动，三个 就处于同一行了（并排靠左）。注意，这三个盒子之间没有空隙，如果不用浮动而用 ，则也能使得这三个盒子处于同一行，但是盒子之间会有空隙。注意，如果把浏览器宽度缩小，以至于三个盒子在一行排不开，则会自动转行。 效果如下： 效果如下：可见，box1因为

页面上很多元素都可以看作是一个盒子，比如 、 、 等。CSS的盒子模型（BoxModel），就是指盒子的外观，包括盒子的高度、宽度、边框、内边距、外边距等外观信息。HTML元素可分为：在css中可以转换显示模式：HTML元素在实际显示时，都可以看作是一个盒子。先看一个设置了宽高的盒子： 页面效果如下：浏览器的 ，如下： 可见，左边是HTML代码，中间是选中的HTML元素的CSS，右边 显式了它的盒子模型信息。本例中， 设置了宽高和背景色。它的border、padding、margin都是0。再看一