用盒子模型的html代码,HTMLCSS基础课程笔记————盒子模型篇.pdfVIP

⽤盒⼦模型的html代码,HTMLCSS基础课程笔记————盒⼦ 模型篇 ——————————————————————————盒⼦模型——————————————————————————————— 盒⼦模型=⽹页布局的基⽯( ⽂本，图像，⾳频，视频等)， 还能控制盒⼦与内容还要盒⼦与盒⼦之间的距离 盒⼦模型由4个部分组成： 边框(border) 外边距(margin) 内边距(padding) 边框，外边距，内边距是盒⼦模型的特性也就是盒⼦模型的属性 盒⼦中的内容(content) 盒⼦有4个⽅向： 上(top) 右(right) 下(bottom) 左(left) 设置的时候是顺时针⽅向设置的 设置4个属性值的时候是上，右，下，左 设置3个属性值的时候是上，左右，下 设置2个属性值的时候是上下，左右 设置1个属性值的时候是四个⽅向的属性值是相同的 属性值的设置有2种⽅式： 1：是分量设置(就是分别设置元素各各⽅向的属性值) 2：是简写设置(同时设置元素的各各⽅向的 属性值) ——————————————————————————————盒模型--边框(⼀) 盒⼦模型的边框就是围绕着内容及补⽩的线，这条线你可以设置它的粗细、样式和颜⾊(边框三个属性)。 如下⾯代码为 div 来设置边框粗细为 2px、样式为实⼼的、颜⾊为红⾊的边框： div{ border:2px solid red; } 上⾯是 border 代码的缩写形式，可以分开写： div{ border-width:2px; border-style:solid; border-color:red; } 1、border-style(边框样式)常见样式有： dashed(虚线)| dotted(点线)| solid(实线)。 2、border-color(边框颜⾊)中的颜⾊可设置为⼗六进制颜⾊，如: border-color:#888;//前⾯的井号不要忘掉。 3、border-width(边框宽度)中的宽度也可以设置为： thin | medium | thick(但不是很常⽤)，最常还是⽤象素(px) ——————————————————————————————盒模型--边框(⼆) 现在有⼀个问题，如果有想为 p 标签单独设置下边框，⽽其它三边都不设置边框样式怎么办呢？ css 样式中允许只为⼀个⽅向的边框设置样式： div{border-bottom:1px solid red;} 同样可以使⽤下⾯代码实现其它三边(上、右、左)边框的设置： border-top:1px solid red; border-right:1px solid red; border-left:1px solid red; ——————————————————————————————盒模型--宽度和⾼度 盒模型宽度和⾼度和我们平常所说的物体的宽度和⾼度理解是不⼀样的， css内定义的宽(width)和⾼(height)，指的是填充以⾥的内容范围。 因此⼀个元素实际宽度 (盒⼦的宽度)=左边界(左边外边距)+左边框+左填充(左边内边距)+内容宽度+右填充(右边内边距)+右边框+右边界(右边外边框)。 盒⼦总宽度=左边界(margin-left)+左边框(border-left)+左填充(padding-left)+内容宽度(width)+右填充(padding-right)+右边框 (border-right)+右边界(margin-right)。 元素的⾼度也是同理。 css代码： div{ width:200px; padding:20px; border:1px solid red; margin:10px; } html代码： ⽂本内容 —————————————————————————————————盒模型--填充(内边距) 元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码： div{padding:20px 10px 15px 30px;} 顺序⼀定不要搞混。可以分开写上⾯代码： div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px; } 如果上、右、下、左的填充都为10px;可以这么写 div{padding:10px;} 如果上下填充⼀样为10px，左右⼀样为20px，