CSS盒子模型研究报告.pptxVIP

让IT教学更简单，让IT学习更有效第四章 CSS盒子模型盒子模型相关属性块元素与行内元素的区别4.1 【案例7】知识引入认识盒子模型边框属性div标记321知识引入4.1 【案例7】知识点讲解1、认识盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。4.1 【案例7】知识点讲解2、div标记div是英文division的缩写，意为“分割、区域”。div标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。div与/div之间相当于一个容器，可以容纳段落、标题、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在div标记中，div中还可以嵌套多层div。div标记非常强大，通过与id、class等属性配合，然后使用CSS设置样式，来替代大多数的文本标记。 4.1 【案例7】知识点讲解3、边框属性设置内容样式属性常用属性值?上边框?border-top-style:样式;?border-top-width:宽度;?border-top-color:颜色;?border-top:宽度 样式 颜色;??下边框?border-bottom-style:样式;?border- bottom-width:宽度;?border- bottom-color:颜色;?border-bottom:宽度 样式 颜色;?左边框border-left-style:样式;?border-left-width:宽度;?border-left-color:颜色;?border-left:宽度 样式 颜色;?右边框border-right-style:样式;?border-right-width:宽度; ?border-right-color:颜色;?border-right:宽度 样式 颜色;?样式综合设置border-style:上边 [右边 下边 左边];none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线宽度综合设置border-width:上边 [右边 下边 左边];像素值颜色综合设置border-color:上边 [右边 下边 左边];颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)边框综合设置border:四边宽度 四边样式 四边颜色;?4.1 【案例7】知识点讲解3、边框属性（1）设置边框样式（border-style）边框样式用于定义页面中边框的风格，常用属性值如下：none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线dashed：边框为虚线dotted：边框为点线double：边框为双实线4.1 【案例7】知识点讲解3、边框属性（1）设置边框样式（border-style）在设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置四条边的样式，具体如下：border-top-style:上边框样式;border-right-style:右边框样式;border-bottom-style:下边框样式;border-left-style:左边框样式;border-style:上边框样式 右边框样式 下边框样式 左边框样式;border-style:上边框样式 左右边框样式 下边框样式;border-style:上下边框样式 左右边框样式;border-style:上下左右边框样式;4.1 【案例7】知识点讲解3、边框属性（1）设置边框样式（border-style）使用border-style属性综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。例如p只有上边为虚线dashed，其他三边为单实线solid，可以使用border-style综合属性分别设置各边样式：或综合设置四条边，然后采用上边覆盖：p{ borer-style:dashed solid solid solid;}p{ border-style:solid;} /*综合设置四边样式*/p{ border-top-style:dashed;} /*上边样式覆盖*/4.1 【案例7】知识点讲解3、边框属性（2）设置边框宽度（border-width）border-width属性用于设置边框的宽度，其常用取值单位为像素px。同边框样式一样，边框宽度也可以针对四条边分别设置，或综合设置四条边的宽度，具体如下：border-top-width：上边框宽度;border-right-width：右边框宽度;border-bot