网站建设找盛誉网络,网站制作技术支持,唯品会专门做特卖的网站,搜狗收录提交申请概念 所有HTML元素可以看作盒子#xff0c;在CSS中#xff0c;box model这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子#xff0c;封装周围的HTML元素#xff0c;它包括#xff1a;外边距(margin)#xff0c;边框(border)#xff0c;内边距(pad… 概念 所有HTML元素可以看作盒子在CSS中box model这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子封装周围的HTML元素它包括外边距(margin)边框(border)内边距(padding)和实际内容(content)。 蓝色的是一个盒子这是一个元素这个元素包含内边距padding边框和外边距。
就像快递易碎品外面套一层泡沫然后再到外层包裹一个箱子层层包裹 。每个盒子就是为了让你在布局的时候变的更加好看。
就是让元素在页面上面摆放的时候更容易的调整位置和间距因为内容和内容之间是需要间距的。
一个元素由自身内边距和边框和外边距组成来摆放蓝色框在页面中的位置了。 如果把盒子模型看作是一个生活中的快递那么内容部分等同于你买的实物内边距等同于快递盒子中的泡沫边框等同于快递盒子外边距等同于两个快递盒子之间的距离。 Content(内容) 盒子的内容显示文本和图像
内容文字图片是实物然后内边距边框外边距。 style/*宽度和高度就是自身的大小也就是实际内容的大小*/div{width: 100px;height: 100px;background-color: red;}/style
/headbody
div
/div
这个是页面中100*100的方块这个就是内容的实际大小。 Padding(内边距) 清除内容周围的区域内边距是透明的
设置padding之后盒子变大了之前盒子多出来的部分就做内边距的空隙。如果盒子里面没有内容可以通过宽高来设定。 style/*宽度和高度就是自身的大小也就是实际内容的大小*/div{width: 100px;height: 100px;background-color: red;padding: 50px;}/style
/headbody
div
/div 如果盒子里面有内容就需要考虑摆放的样式了。 style/*宽度和高度就是自身的大小也就是实际内容的大小*/div{width: 100px;height: 100px;background-color: red;}/style
/headbody
divxxxxxxxxxxxx
/div style/*宽度和高度就是自身的大小也就是实际内容的大小*/div{width: 100px;height: 100px;background-color: red;padding: 50px}/style
/headbody
divxxxxxxxxxxxx
/div 盒子虽然变大了但是内容在往中间挤中间的内容还是在盒子的左上角剩下的是内边距帮你填充的。为了是好看不让内容贴着左上角去显示。内边距是撑大自身大小来给元素一些空隙这样可以更加好的展示。 内容在盒子100px*100px的左上角如果不希望有这样的空隙那么就不需要设置内边距。
内边距主要作用是把自身撑大但是本身的自身只有100px*100px。只是看起来像变大了。
padding一般分为两个值。上下是一个值左右是一个值。上下是50px左右是10px。按照双值来设定上下为50px第二个值为左右。 div{width: 100px;height: 100px;background-color: red;padding: 50px 10px;}/style
/headbody
divxxxxxxxxxxxx
/div Border(边框) 围绕在内边距和内容外的边框 div{width: 100px;height: 100px;background-color: red;padding: 50px 10px;border: 5px solid;}/style
/headbody
divxxxxxxxxxxxx
/div Margin(外边距) 清除边框外的区域 style/*宽度和高度就是自身的大小也就是实际内容的大小*/div{width: 100px;height: 100px;background-color: red;padding: 50px 10px;border: 5px solid;margin: 100px;}/style
/headbody
divxxxxxxxxxxxx
/div style/*宽度和高度就是自身的大小也就是实际内容的大小*/div{width: 100px;height: 100px;background-color: red;padding: 50px 10px;border: 5px solid;margin: 100px;}/style
/headbody
divxxxxxxxxxxxx
/div
哈哈
当前内容的上下左右都有50px 忘记画右边的。这个也是元素与元素这件的空隙也是让元素好看。 两个并没有挨宰一起中间也有空隙就是通过外边距处理的。margin也一样有两个值上下左右。也可以指定一个方向的值。
