HTML5学习_day03(4)--html盒模型了解

来源：互联网发布：淘宝金牌店铺可信吗编辑：程序博客网时间：2024/05/17 23:03

盒模型：

每个html元素都可以看做成一个盒模型。

1.一个盒子的特点。（border，padding，内容区域）

2.盒子与盒子之前的关系（margin）

盒子的结构：

1.content（内容区域）：展示文字跟图片的

2.padding（内边距）：内容与边框线的距离

3.border（边框）：元素的边框

4.margin（外边距）：元素与元素之间的距离（兄弟元素，父子级关系元素）

content知识点：

1.width：内容的宽度

2.height 内容的高度

3.overflow 当内容超出规定的宽高后的处理

三个值：hidden(超出部分隐藏)

scroll(在水平跟垂直方向产生滚动条)

元素的宽高计算

元素的高度=border-top + padding-top + height + padding-bottom + border-bottom

元素的宽度=border-left + padding-left + width + padding-right + border-right

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>盒模型</title><style type="text/css">/*padding可以导致元素的宽高增加 margin就不会浏览器默认自带margin和padding值 用通配选择器设置为0*/*{margin: 0px ;padding: 0px ;}.div1{width: 100px;height: 50px;background: red;margin-bottom: 100px;border: 20px solid blue;}.div2{width: 100px;height: 50px;background: aqua;}</style></head><body><p class="p1"><span style="white-space:pre"></span><<span class="s1">div </span><span class="s2">class</span><span class="s3">=</span><span class="s4">"div1"</span>>我是div1</<span class="s1">div</span>></p><p class="p1"><span></span><span></span><<span class="s1">div </span><span class="s2">class</span><span class="s3">=</span><span class="s4">"div2"</span>>我是div2</<span class="s1">div</span>></p><p class="p2"><span></span><span></span><span></span>   </p><p class="p3"><span class="s1"><span></span></</span>body<span class="s1">></span></p><p class="p3"><span class="s1"></</span>html<span class="s1">></span></p>

0 0