搜索到
146
篇与
的结果
-
26、盒子的垂直布局 <!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> /* 一、盒子的垂直布局的注意 1.若两个相邻垂直摆放的盒子，上面盒子的下外边距与下面盒子的上外边距会发生重叠，称为外边距合并 若合并后，外边距会选择重叠外边距的较大值 2.若两个盒子具有父子关系，则两个盒子的上外边距会发生重叠，若改变盒子的上外边距，父子盒子都会随之移动位置 三种解决办法： 1.可以为父元素添加边框 2.可以为父元素加内边距 3.为父元素添加overflow：hidden； 学习完清除浮动的最终解决方案： .father::before{ content:""; display:table; clear:both; } */ div{ width: 200px; height: 200px; } /* .box1{ background-color: #c7edcc; margin-bottom: 100px; } .box2{ background-color: #fde6e0; margin-top: 200px; } */ .father::before{ content: ""; display: table; clear: both; } .father{ background-color: #c7edcc; /*overflow: hidden;*/ } .son{ width: 100px; height: 100px; background-color: #fde6e0; margin-top: 100px; } </style> </head> <body> <!-- <div class="box1"></div> <div class="box2"></div> --> <div class="father"> <div class="son"></div> </div> </html> -
25、盒子模型的溢出 <!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> /* 一、盒子模型的溢出 父子两个盒子，子盒子的宽度或高度，大于父盒子，则子盒子多余的部分会在父盒子之外进行显示 多余的部分，称为溢出的部分 overflow属性，可以设置父元素如何处理溢出的内容 可选值 viside 不会处理溢出部分（默认值） hidden 溢出的内容隐藏 scroll 为父元素添加滚动条 auto 会根据需要自动的添加滚动条 */ .father{ width: 200px; height: 200px; background-color: #c7edcc; } .son{ width: 100px; height: 1000px; background-color: #fde6e0; } </style> </head> <body> <div class="father"> <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> /* 一、盒子模型的溢出 父子两个盒子，子盒子的宽度或高度，大于父盒子，则子盒子多余的部分会在父盒子之外进行显示 多余的部分，称为溢出的部分 overflow属性，可以设置父元素如何处理溢出的内容 可选值 viside 不会处理溢出部分（默认值） hidden 溢出的内容隐藏 scroll 为父元素添加滚动条 auto 会根据需要自动的添加滚动条 */ .father{ width: 200px; height: 200px; background-color: #c7edcc; } .son{ width: 100px; height: 1000px; background-color: #fde6e0; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
-
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>
