搜索到
207
篇与
的结果
-
24、盒子的水平布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的水平布局</title> <style> /* 一、盒子水平宽度 当一个盒子出现在另一个盒子的内容区时，该盒子的水平宽度“必须”等于父元素内容区的宽度 盒子水平宽度： margin-left+border-left+padding-left+width+padding-right+border-right+margin-right 水平居中：（margin：0 auto；） */ .father{ width: 1200px; height: 200px; border: 5px solid red; } .son{ width: 200px; height: 200px; background-color: #c7edcc; margin: 0 auto; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html> -
23、浏览器的默认样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浏览器的默认样式</title> <style> /* 一、清除浏览器的默认样式 *{ padding: 0; margin: 0; } */ .box1{ width: 200px; height: 200px; background-color: #c7edcc; } </style> </head> <body> <div class="box1"></div> </body> </html>
-
22、盒子模型-外边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型-外边距</title> <style> /*一、盒子模型（box model）：可以把 HTML 中所有的元素都理解成盒子。用于装内容的容器 目的就是为了将 HTML 文档中的内容进行归纳整理。方便管理，从而达到布局的效果。 内容区 content 边框 border 内边距 padding 外边距 margin 二、外边距 margin 用于设置盒子与盒子之间的距离，设置外边距并不会影响盒子可见框的大小，但是会影响盒子（其他盒子）的位置 1.可以设置四个方向的外边距： margin-top margin-right margin-bottom margin-left 2.注意： 盒子的排列是由上到下、由左到右进行排列的。因此改变盒子的上外边距和左外边距会改变当前盒子的位置 改变盒子的下外边距和右外边距会改变其他盒子的位置 外边距可以设置负值，盒子会向反方向移动 3.外边距的简写属性 margin 属性可以直接设置四个放向的外边距（顺时针也padding是一样的） */ div{ width: 200px; height: 200px; } .box1{ background-color: #c7edcc; /*设置盒子的外边距*/ margin-top: 100px; margin-left: 100px; margin-bottom: 100px; } .box2{ background-color: #fde6e0; margin-left: -100px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
-
21、盒子模型-内边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型-内边距</title> <style> /* 一、盒子模型（box model）：可以把 HTML 中所有的元素都理解成盒子。用于装内容的容器 目的就是为了将 HTML 文档中的内容进行归纳整理。方便管理，从而达到布局的效果。 内容区 content 边框 border 内边距 padding 外边距 margin 二、内边距 padding 用于设置内容区与边框之间的距离 1.可以设置四个方向的内边距 padding-top padding-right padding-botton padding-left 2.注意： 设置内边距会影响盒子大小 背景会延伸到内边距 三、内边距的简写属性： padding 可以直接设置四个方向的内边距 (顺时针上右下左) */ .box1{ width: 300px; height: 300px; background-color: #c7edcc; border: 1px solid #000; /*设置四个方向内边距*/ /*padding-top: 50px; padding-right: 50px; padding-bottom: 50px; padding-left: 50px;*/ padding: 10px 20px 30px 40px; } .son{ width: 300px; height: 300px; background-color: #fde6e0; } </style> </head> <body> <div class="box1"> <div class="son"></div> </div> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型-内边距</title> <style> /* 一、盒子模型（box model）：可以把 HTML 中所有的元素都理解成盒子。用于装内容的容器 目的就是为了将 HTML 文档中的内容进行归纳整理。方便管理，从而达到布局的效果。 内容区 content 边框 border 内边距 padding 外边距 margin 二、内边距 padding 用于设置内容区与边框之间的距离 1.可以设置四个方向的内边距 padding-top padding-right padding-botton padding-left 2.注意： 设置内边距会影响盒子大小 背景会延伸到内边距 三、内边距的简写属性： padding 可以直接设置四个方向的内边距 (顺时针上右下左) */ .box1{ width: 300px; height: 300px; background-color: #c7edcc; border: 1px solid #000; /*设置四个方向内边距*/ /*padding-top: 50px; padding-right: 50px; padding-bottom: 50px; padding-left: 50px;*/ padding: 10px 20px 30px 40px; } .son{ width: 300px; height: 300px; background-color: #fde6e0; } </style> </head> <body> <div class="box1"> <div class="son"></div> </div> </body> </html>
-
20、盒子模型的边框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型的边框</title> <style> /* 一、盒子模型（box model）：可以把 HTML 中所有的元素都理解成盒子。用于装内容的容器 目的就是为了将 HTML 文档中的内容进行归纳整理。方便管理，从而达到布局的效果。 内容区 content 边框 border 内边距 padding 外边距 margin 二、盒子的边框 border 边框由三个部分组成，缺一不可！ 1.边框的宽度 border-width 可以分别设置四个边框的宽度 border-top-width border-right-width border-bottom-width border-left-width border-width：10px 20px 30px 40px(上右下左)顺时针 border-width：10px 20px 30px上 左 右 下 border-width：10px 20px上下左右 2.边框的样式 border-style 可选值： solid 实线 dotted 点状虚线 dashed 虚线 double 双线 可以分别设置四个边框的样式 border-top-style border-right-style border-bottom-style border-left-style 3.边框的颜色 boder-color 使用方式与border-width一模一样 三、边框的简写属性：border border 属性可以设置边框所有的相关样式 border:border-width border-style border-color(顺序无要求) top： right： bottom： left： */ .box1{ width: 200px; height: 200px; background-color: #c7edcc; /*边框的宽度*/ /*border-width: 10px;*/ /* border-top-width: 10px; border-right-width: 20px; border-bottom-width: 30px; border-left-width: 40px;*/ /*边框的样式*/ /*border-style:solid;*/ /* border-top-style: solid; border-right-style: dotted; border-bottom-style: dashed; border-left-style: double;*/ /*边框的颜色*/ /* border-color: red;*/ /*border-color: red yellow blue green;*/ /*边框的简写属性*/ border: 10px solid red; } </style> </head> <body> <div class="box1"></div> </body> </html>
