章元素布局与文字排版

第三章元素布局与文字排版课程回顾上次课我们主要讲了：CSS的盒模型盒模型的不同类型盒模型的定位2本章节授课目标如何混合使用元素定位来完成网页布局BS系统界面的布局方法3元素定位绝对定位：相对定位：浮动定位：4对象从队列中脱离出来，根据top，right，bottom，left这些偏移量，针对最近一个具有定位设置的祖先元素进行定位根据top，right，bottom，left偏移，针对其父元素进行定位，原有队列位置会保留向左或者向右浮动，不包含在普通元素的队列之中，但是包含在浮动定位元素的队列中5界面分析在一个Web页面中，除了数据型列表之外，一定不要出现table6ul和li的使用ul：无序列表如何去掉ul前面的“黑点”：list-style属性list-style：和border一样，list-style属于复合属性，共包含

三种方式：list-style-type：列表样式类型list-style-image：列表样式图片list-style-position：列表样式位置7list-style-typelist-style-type可选值：通常情况下，我们在编写CSS样式之前，都会初始化一些元素的样式，ul的list-style就是其中之一将ul的list-style-type设定成数字（英文）状态，实现的效果与ol完全一样8ul{list-style:none}list-style-imagelist-style-image属性的值是一个url地址被设定的图片，将以图标形式出现在ul的style位置Css不会为我们去处理图片的尺寸，因此要想让图片符合我们

的需要，需要在图片这一端进行处理图片的呈现，是以元素背景的形式，会被浏览器缓存9list-style-image：url（’.../img/aa.jpg’）;list-style-positionlist-style-position包含两种属性值：outside：默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐ul是以缩进的形式呈现list-style的，也就是说ul具有默认的padding-left属性，当我们将padding-left设定为0时，默认的list-style会失效，但是如果将list-style-position设定为inside时，padding-left为0不会对ul的list-style造成影响list-style也可以同时设定几种属性值，顺序不分先后10list-style：url（’.../img/aa.jpg’）inside;文字的css处理font：文字的属性设定font也属于复合属性：font-family：字体名称，常见形式font-size：字号大小，常见形式font-weight：字体粗细，常见形式font-style：字体样式（斜体），常见形式font属性可以同时对多个属性赋值，顺序不分先后11font-family:'微软雅黑‘,Arialfont-size:12pxfont-weight:boldfont-style:italicfont-familyfont-family：字体名称，可同时设定多个字体名称，优先顺序从左到右通常情况下我们只需要选择两种字体名称为font-family赋值，一种用于英文字体，一种用于中文字体注：浏览器中的Web页面属于客户端，因此我们所设定的字体必须是客户端存在的非客户端字体的使用：12font-family:Arial，'微软雅黑‘@font-face{font-family:myFont;src:url('font/some_font_file.eot');}font-family:myFonturl地址必须指向OpenType字体文件(.eot或.ote)不建议使用font-sizefont-size：最常用的字号12px(=9pt)随着硬件发展，浏览器和分辨率增大，目前14px字体已经渐渐取代12px成为主流特别提示：在IE6下，元素的最小高度会被默认与字号相等如需将元素高度设为小于字号的高度，需将该元素字号设为013font-weight&font-stylefont-weight：用于中文字体中，只有两种设定normal和boldfont-style（不推荐）：包含三种设定normal、italic和obliqueitalic为斜体oblique为倾斜字体当italic所设定字体不包含斜体时，会调用oblique设定14字体颜色color：前景色，用于设定字体颜色

字体颜色值通常有两种设定方式：颜色名：如redgreenblue颜色值：如#F00#0F0#00F15小结有问题吗？16内容的对齐text-align：（文本）内容对齐方式

left：默认值，左对齐center：水平居中对齐right：右对齐justify：两端对齐垂直方向对齐：没有！单行内容的垂直居中：line-height（行高）参数值为数值或百分比line-height的默认值为字体高度，如果需要让文字在容器内垂直居中对齐，只需将的行高设定为容器高度（仅对文字等部分内容有效）百分比参数，通常用于设定成段内容的行间距17vertical-align==无效表单样式表单的CSS，通常我们会针对以下几个属性进行设定：1.边框：border2.背景色（背景图）：background3.字体颜色：colorbackground背景设定也属于复合属性，包含：background-colorbackground-imagebackground-repeatbackground-positionbackground-attachment提示：为了增加用户体验性，同一个表单我们会分别设定2~3种样式18background-color&background-imagebackground-color：背景色，与前景色（color）一样，可以设定颜色名或者颜色值background-image：背景图，一个url值，引用背景图所在路径几乎所有元素都可以设定背景元素的背景图会被浏览器缓存19background-image：url（’.../img/aa.jpg’）;background-repeat&background-positionbackground-repeat：背景平铺状态，包含四种设定repeat：默认，平铺no-repeat：不平铺repeat-x：延x轴（水平方向）平铺repeat-y：延y轴（垂直方向）平铺background-position：背景图起点位置，百分比、数值或位置名元素背景图默认从元素的左上角开始，包含x和y两个坐标background-position还可以拆分成background-positionX和background-positionY两个属性使用，但我们很少这样做元素的背景起点可以是负值位置名包含：x轴（leftcenterright），y轴（topmiddlebottom）20background-attachmentbackground-attachment：背景图是否固定scroll：默认，滚动fixed：不滚动background属性不具备直接继承性，但具备视觉继承性，通常情况下，我们需要在一开始，将body或者html的背景