Web前端笔记——盒模型

最新推荐文章于 2022-12-15 19:45:00 发布

墨倾许

最新推荐文章于 2022-12-15 19:45:00 发布

阅读量634

点赞数

分类专栏： Web前端学习笔记文章标签：前端 css css3

本文链接：https://blog.csdn.net/qq_45498824/article/details/122839562

版权

Web前端学习笔记专栏收录该内容

16 篇文章 2 订阅

订阅专栏

章节06 盒模型

1、盒子模型

标准盒子：

内容（content）
内边距（padding）
边框（border）
外边框（margin）

W3C盒子模型：

实际宽=左右外边距+左右内边距+宽度+左右边距

2、border（边框）

三要素：

宽
样式
颜色

（按顺序）

border-style:
    	dotted;		/*点*/
    	solid ;		/* 实线 */
     	double ;	/* 双（起码要3px） */
      	none;

3、padding（内边距）

单边设置：

padding-top/padding-bottom/padding-left/padding-right:value;
    /* value不能为负数,单位px,%都可以 */

简写：

padding:1个值（四个方向）；
    上下	左右；
    上   左右	下；
    上  右  下  左；

4、margin（外边距）

单边设置：

margin-top/margin-bottom/margin-left/margin-right:value;
    /* value不能为负数,单位px,%都可以 */

简写：

margin:1个值（四个方向）；
    上下	左右；
    上   左右	下；
    上  右  下  左；

外边距合并

当两个垂直外边距相遇时，他们将形成一个外边距，也就是外边距合并；

合并后的外边距的高度=两个合并的外边距的高度中的较大的。

margin设置元素外边距的宽度：

块级元素的垂直相邻外边距会合并；
允许指定负的外边距值，但是使用时需小心。
浮动元素的内外边距也不会合并；
行内元素实际上不占上下外边距，行内元素的左右内边距不合并；

5、怪异盒子

例如：IE的盒子模型

不同之处：宽包含了border和padding；

margin、border、padding、content；

组成部分：content+padding+border+margin

实际宽度：width+margin（width包含padding+border）

box-sizing:

content-box; /* 标准盒子,元素实际大小=宽高+border+padding */

border-box; /* 怪异盒子,元素实际大小=你定义了多宽就是多宽*/

同样的定义，怪异盒子实际大小会小很多。

6、弹性盒模型练习

box.cssb

.box{

width: 100%;

height: 200px;

background-color: deepskyblue;

/* 父元素开启弹性盒模型子元素默认水平排列 */

display: flex;

/* 设置子元素在侧轴居中，水平居中 */

align-items: center;

}

.box>div{

flex-grow: :1;

}

style.css
html,body,div,h1,h2,h3,h4,h5,h6,dd,dt,dl,form,label,caption,tbody,tfoot,thead,tr,th,td,ul,li,p{
margin:0;
padding: 0;
}
a{
text-decoration: none;
}
body{
text-align: center;
}
img,input{
vertical-align: middle; /* 垂直居中 */
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度周边</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/box.css"/>
</head>
<body>
<div class="box">
<a href="#">
<img src="" alt="">
<p>美食</p>
</a>
</div>
<div class="box">
<a href="#">
<img src="" alt="">
<p>美食</p>
</a>
</div><div class="box">
<a href="#">
<img src="" alt="">
<p>美食</p>
</a>
</div><div class="box">
<a href="#">
<img src="" alt="">
<p>美食</p>
</a>
</div><div class="box">
<a href="#">
<img src="" alt="">
<p>美食</p>
</a>
</div>
</body>
</html>