02CSS边框边距、浮动定位概述.docxVIP

CSS边框与边距知识点：CSS中边框的使用CSS中边距的使用CSS中边框的使用边框属性：元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。常见的边框属性及说明：属性名称属性值说明border-color十六进制可依次设置上右下左边框颜色 英文名称border-color:red(四边均为红色) 三原色border-color:red green(上下为红色，左右为绿色)border-color:red green blue(上为红色、左右为绿色、下为蓝色)border-color:red green blue yellow(上右下左分别为红绿蓝黄)border-style none不显示边线dotted点线dashed虚线solid实线double双线border-width边框宽度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;border-width:1 2 3 4;（上右下左）eg：css代码：div { width: 100px; height: 100px; background: darksalmon;border-color: red yellow blue black;（上右下左）border-style: solid;border-width: 1px 3px 5px 10px; （上右下左） }html代码：div/div效果：边框的简化设置：格式: 边框宽度 - 边框样式 - 边框颜色border: 5pxsolidredeg：css代码：div {width: 100px; height: 100px; background: darksalmon; border: 5px solid red;}html代码：div/div效果：CSS中边距的使用css盒子模型：所有HTML元素可以看作盒子。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。如下图所示：外边距margin属性：属性名称属性值说明margin-bottomauto自动调整边距长度/百分比设置下边距margin-leftauto自动调整边距长度/百分比设置左边距margin-rightauto自动调整边距长度/百分比设置右边距margin-topauto自动调整边距长度/百分比设置上端边距eg：css代码：div { width: 100px; height: 100px; background: darksalmon; border: 5px solid red;margin-top: 50px; margin-left: 20px;}html代码：div/div效果：margin属性简写方案：格式:margin: 20px 40px （上下，左右 ）margin: 20px 60px 100px（上，左右，下）margin: 10px 20px 30px 40px（上，右，下，左）内边距padding属性（内填充）：属性名称属性值说明padding-bottom长度/百分比元素下端内边距padding-left 长度/百分比元素左端内边距padding-right 长度/百分比元素右端内边距padding-top长度/百分比元素上端内边距eg：css代码：.div1 { width: 100px; height: 100px; background: blue;padding-left: 30px; padding-top: 20px; } .div2 { width: 50px; height: 50px; background: darksalmon; }html代码：div class=div1div class=div2/div/div效果：注意：使用padding（内填充）属性，外面的box1会被“撑起来”。padding属性简写方案：格式:padding: 10px (上下左右 各10px)padding: 2px 4px（上下，左右）p