WEB前端开发工程师 学习第二天 盒模型
1.padding 内填充
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: pink; padding: 100px; } </style> <!-- padding 内填充 注意：设置padding后会撑大容器的大小 --> </head> <body> <div> 欢迎大家来到妙味课堂！！！ </div> </body> </html>
2.注意：设置padding后会撑大容器的大小
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: pink; padding-top: 100px; padding-right: 100px; padding-bottom: 100px; padding-left: 100px; } </style> <!-- padding 内填充 注意：设置padding后会撑大容器的大小 padding的四个方向 top right bottom left --> </head> <body> <div> 欢迎大家来到妙味课堂！！！ </div> </body> </html>
3.padding
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: pink; padding:100px 50px 20px 10px; } </style> <!-- padding 内填充 注意：设置padding后会撑大容器的大小 padding的四个方向 top right bottom left paading复合写法 : top right bottom left 只有一个属性值时: 4个方向都是同一个值 设置两个属性值时： 第一个属性值设置的是上下两个方向， 第二个属性值设置的是左右两个方向。 设置三个属性值时： 第一个属性值设置的是上边一个方向， 第二个属性值设置的是左右两个方向， 第三个属性值设置的是下边一个方向。 设置四个属性值时： 第一个属性值设置的是上边一个方向， 第二个属性值设置的是右一个方向， 第三个属性值设置的是下边一个方向， 第四个属性值设置的是左边一个方向。 --> </head> <body> <div> 欢迎大家来到妙味课堂！！！ </div> </body> </html>
4.marigin
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: pink; margin: 100px; } </style> <!-- margin 外边距 标签与标签之间的间隔（距离） --> </head> <body> <div>1</div> <div>2</div> </body> </html>
5.marigin
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: pink; margin-top: 100px; margin-right: 100px; margin-bottom: 100px; margin-left: 100px; } </style> <!-- margin 外边距 标签与标签之间的间隔（距离） --> </head> <body> <div>1</div> <div>2</div> </body> </html>
6.marigin
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: pink; margin: 100px 50px 20px 10px; } </style> <!-- margin 外边距 标签与标签之间的间隔（距离） margin复合写法 : top right bottom left 只有一个属性值时: 4个方向都是同一个值 设置两个属性值时： 第一个属性值设置的是上下两个方向， 第二个属性值设置的是左右两个方向。 设置三个属性值时： 第一个属性值设置的是上边一个方向， 第二个属性值设置的是左右两个方向， 第三个属性值设置的是下边一个方向。 设置四个属性值时： 第一个属性值设置的是上边一个方向， 第二个属性值设置的是右一个方向， 第三个属性值设置的是下边一个方向， 第四个属性值设置的是左边一个方向。 --> </head> <body> <div>1</div> <div>2</div> </body> </html>
7.marigin的问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ background-color: red; border: 1px solid black; } #div1{ height: 50px; background-color: pink; margin: 100px 100px 200px 100px; } #div2{ height: 50px; background-color: yellow; margin: 100px; } </style> <!-- margin的问题 1、margin-top传递 解决方法：仅用以学知识点可以使用border解决 2、margin上下叠压 解决技巧： 1、还是使用margin，可以将某一个元素方向设置成预想的值。margin叠压会取最大的margin值. 2、如果元素没有特殊特征，也可以用padding代替 --> </head> <body> <div id="box"> <div id="div1">div1</div> <div id="div2">div2</div> </div> </body> </html>
8.盒模型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; border: 10px solid black; margin: 20px; padding: 20px; } </style> <!-- 盒模型大小：border + padding + width/height 宽度：100+20+40 = 160 高度：100+20+40 = 160 盒模型的宽度： border-left-width + padding-left + width + padding-right + border-right-width 盒模型的高度： border-top-width + padding-top + height + padding-bottom + border-bottom-width --> </head> <body> <div></div> </body> </html>
