盒子概念

xiaoxiao2021-02-28  129

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 500px; height: 100px; border: 1px solid red; overflow: scroll; padding: ; } </style> </head> <body> <!-- 盒子模型:每个html元素都可以当做一个盒模型 1/一个盒子本身的特点(boder padding 内容区域) 2/盒子与盒子之间的关系(margin) 盒子的结构: 1/content(内容区域):展示文字或图片的地方 2/padding(内边距): 内容与边框的距离 3/border(边框):元素的边框 4/margin(外边框): 元素与元素之间的距离 content特点: 1/width: 内容名的宽度 2/height: 内容的高度 3/overflower: 当内容超出规定的高度后的处理方式 三个值: overflow: hidden  超出部分阴影 overflow: srccoll 在水平或垂直产生滚动条 元素的盖度计算: 高度=border-top+padding-top+height+padding-bottom+border-bottom 元素的宽度=border-left+padding-left+width+padding-right+border-right --> <div>超出部分隐藏在水平或垂直产生滚动条</div> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-19575.html

最新回复(0)