CSS基础（二）

• 核心属性
• 盒子模型
• 定位
• 锚点
• 滤镜

---

核心属性

(1)文本样式

{font-size:12px/14px/16px;}//字号//属性值为数值型时，必须给属性值加单位，属性值为0时除外。//单位还可以是pt，9pt=12px。//单位还可以是em,1em=16px,0.75em=12px。{font-family:"字体1","字体2";}//文本字体//当字体是中文字体时需加引号。//当英文字体中有空格时需加引号如“Times New Roman”。{font-weight:bolder/bold/normal/100-900;}//加粗//其中100对应最轻的字体变形，而900对应最重的字体变形。//100-500常规字体。//600-900加粗字体。{font-style:normal常规字体/italic/oblique倾斜;}//倾斜//italic和oblique都表示倾斜，oblique的幅度要大一点。{line-height:normal/数值;}//行高//将行高设置成元素的高度可以实现字体垂直居中。//当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位。//当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位。{color:颜色值;}//颜色//当表示三原色的三组数字同时相同时，可以缩写为三位。//当用十六进制表示颜色值时，需要在颜色值前加“#”。{text-decoration:none/underline/overline/line-through/blink;}//文本修饰//none:没有修饰//underline:添加下划线//overline:添加上划线//line-through:添加删除线//blink：闪烁{text-transform:none/capitalize/uppercase/lowercase;}//none无转换//capitalize首字母大写//uppercase全都大写//lowercase全都小写{text-align:left/right/center/justify;}//水平对齐方式。{vertical-align:top/bottom/middle;}//垂直对齐方式。{text-indent:value;}//首行缩进//text-indent可以取负值。//text-indent属性只对第一行起作用。{letter-spacing:value;}//字间距//控制英文字母或汉字的字距。{word-spacing:value;}//词间距//控制英文单词词距。{layout-flow:horizontal/vertical-ideographic;}//文本流控制//horizontal:自左向右//vertical-ideographic:自上而下//font属性的简写：字号，加粗，行高，字体//顺序: font-style font-weight font-size/line-height font-family//简写时,font-size和line-height只能通过斜杠/组成一个值，不能分开写。//这种简写法只有在同时指定font-size和font-family属性时才一起作用。//如果没有设定font-weight,font-style,他们会使用缺省值。

(2)列表的样式

{list-style-type:disc/circle/square/none;}//列表符号样式//disc(实心圆)//circle（空心圆）//square(实心方块)//none(去掉列表符号)//不要样式时简写list-style:none;{list-style-image:url(所使用图片的路径及全称);}//使用图片作为列表符号{list-style-position:outside/inside;}//定义列表符号位置

(3)边框

{border-style:solid/dashed/dotted/double/none;}//solid:实线，dashed:虚线，dotted:点状线//double:双线，none:没有边框{border-width:value;}//边框的粗细{border-color:颜色值;}//边框的颜色//border-top：上边框//border-bottom:下边框//border-left:左边框//border-right:右边框//简写：粗细+线性+颜色

(4)背景

{background-color:颜色值;}//背景颜色{background-image:url(背景图片的路径及全称);}//背景图片//容器尺寸等于图片尺寸，背景图片正好显示在容器中。//容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素。//容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图。{background-repeat:no-repeat/repeat/repeat-x/repeat-y;}//背景图平铺//no-repeat:不平铺//repeat：平铺//repeat-x：横向平铺//repeat-y ：纵向平铺{background-position:left/center/right/数值 top/center/bottom/数值;}//背景图位置//第一个值表示水平位置，第二个值表示垂直位置。//当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置都在中间//当元素小图片大时，向右方向，向下方向是负值{background-attachment:scroll(滚动)/fixed(固定);}//背景图的固定//简写：背景颜色+背景图+平铺属性+位置

(5)浮动

{float:none/left/right;}//浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。//浮动框是脱离了普通的文档流

盒子模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都以拥有可像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。

(1)margin

边界：margin,在元素外边的空白区域，被称为边距。

margin-left:左边界
margin-right:右边界
margin-top:上边界
margin-bottom:下边界

属性值的4种方式：

四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向

可单独设置一方向边界，如：margin-top:10px;

*margin值的解析：左右边界累加，上下边界重合。

(2)padding

填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。

padding-left:左填充
padding-right:右填充
padding-top:上填充
padding-bottom:下填充

属性值的4种方式：

四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向

可单独设置一方向填充，如：上方向padding-top:10px;

padding属性需要添加在父元素上。

padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。

(3)border

边框：border,网页中很多修饰性线条都是由边框来实现的。
属性见核心属性(3)边框。

定位

1.语法：

{position：static /absolute/relative/fixed;}//static：默认值//absolute：绝对定位//relative ：相对定位//fixed：固定定位

2.属性

(1)static：默认值，无特殊定位，对象遵循HTML原则。

(2)absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据html(根元素)，而其层叠通过z-index属性定义。

(3)relative ：相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置(相对自己原来的位置偏移)。

(4)fixed：固定定位，对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范（IE6浏览器不支持此定位）根据浏览器的窗口来定义自己的位置。

3.绝对定位和相对定位的区别

(1)参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置。

(2)绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

4.定位元素层叠属性：

语法：z-index : auto | number，检索或设置对象的层叠顺序。

auto：默认值。遵从其父对象

number:无单位的整数值。可为负数

说明：

(1)较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。
(2)此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象。

锚点

定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

命名锚点链接的应用：

1)命名锚点的作用：在同一页面内的不同位置进行跳转。

2)给元素定义命名锚记名

语法：<标记 id=”命名锚记名”>