02CSS边框边距、浮动定位.docx

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:5px solid redeg：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=div1 div class=div2/div /div效果： 注意：使用padding（内填充）属性，外面的box1会被“撑起来”。padding属性简写方案：格式:padding: 10px (上下左右 各10px)padding: 2px 4px（上下，左右）padding: 2px 6px 10px（上，左右，下）padding: 1px 2px 3px 4px（上，右，下，左） CSS区块、浮动知识点：CSS中区块的使用CSS中浮动的使用CSS中定位的使用（了解）CSS中区块的使用区块元素：block-level elements (块级元素) ，block元素通常被显示为独立的一块，会单独占据一行；常见的块级元素有 div, form, table, p, h1~h6, dl和dd、dt搭配