CSS盒子模型【怪异盒模型、定位看这一篇就够了！！！】

本文主要是介绍CSS盒子模型【怪异盒模型、定位看这一篇就够了！！！】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

盒子模型

width和height属性

width属性

当“块级元素”没有设置width属性时，它将自动撑满(宽度撑满，即width:100%;)，但并不意味着width可以继承

height属性

盒子的height属性如果不设置，它将自动被“其内容”撑开
如果没有内容，height默认是0

width和height的特性

块级元素

当块级元素没有设置width属性时，盒子的宽度会自动地撑满他的父元素。但不是继承父元素的width，width无法继承
高度在没有设置时，其内容为“内容的高”，如果内容为空，则高度为0
支持宽高属性的设置

内联元素

内联元素的宽高是由其内容决定，如果内容为空，则宽高默认为0
内联元素设置宽高属性无效

边框属性

边框的三要素小属性

border-width：线宽
border-style：线型
border-color：线颜色

单独去掉某一方向的边框线：

border-top:none;        /* 去掉上方边框 */
border-bottom:none;    /* 去掉下方边框 */
border-left:none;        /* 去掉左侧边框 */
border-right:none;        /* 去掉右侧边框 */

四个方向的边框的三要素小属性

属性	描述
`border-top-width`	上边框宽度
`border-top-style`	上边框线型
`border-top-color`	上边框颜色
`border-right-width`	右边框宽度
`border-right-style`	右边框线型
`border-right-color`	右边框颜色
`border-bottom-width`	下边框宽度
`border-bottom-style`	下边框线型
`border-bottom-color`	下边框颜色
`border-left-width`	左边框宽度
`border-left-style`	左边框线型
`border-left-color`	左边框颜色

边框应用场景-制作三角形

<style>.box1 {width: 0;height: 0;/* transparent 是透明色 */border: 30px solid transparent;border-top-color: red;}.box2 {width: 0;height: 0;/* transparent 是透明色 */border: 30px solid transparent;border-right-color: red;}.box3 {width: 0;height: 0;/* transparent 是透明色 */border: 30px solid transparent;border-bottom-color: red;}.box4 {width: 0;height: 0;/* transparent 是透明色 */border: 30px solid transparent;border-left-color: red;}</style><body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body>

效果：

单独设置四个圆角

属性	描述
`border-top-left-radius`	左上角
`border-top-right-radius`	右上角
`border-bottom-left-radius`	左下角
`border-bottom-right-radius`	右下角

<style>.box {width: 100px;height: 100px;border: 1px solid;border-radius: 30px;/* 右下角 */border-bottom-right-radius: 0;}
</style>
<body><div class="box"></div>
</body>

效果：

盒子水平居中

将盒子的左右两边的margin都设置为auto，盒子将水平居中。

共有两种方法：

/* 方式一， margin: 上下0 ，左右自动 */
.box {margin: 0 auto;
}
/* 方式二，margin: 上10px 水平居中 下0px 第二种方法的应用场景在于，需要当前盒子距离顶部 10px, 水平居中对齐，距离底部0px 类似这样的需求时使用
*/
.box {margin: 10px auto 0;
}

盒子模型占位计算

content内容区，也就是盒子里面能留给子元素的宽度和高度大小，也就意味着盒子里面的内容的最大面积就是width和height形成的矩阵面积。

如果只有一个子元素，子元素的宽度超过父元素，就会溢出
如果有多个子元素，子元素(行内元素，行内块元素)的宽度加起来超过了父元素，那么超过的子元素就会换行显示。

<style>div {/* 盒模型内容区大小 */width: 200px;height: 200px;background-color: gold;/* 边框 */border: 20px solid skyblue;/* 内边距 */padding: 50px;/* 外边距 */margin: 30px;}
</style>
<body><div class="box">内容区，内容区内容区，内容区内容区，内容区内容区，内容区</div>
</body>

效果：

盒模型可视宽高

可视区宽 = 宽度 + 左右内边距(如果有) + 左右边框宽
可视区高 = 高度 + 上下内边距(如果有) + 上下边框宽

盒模型实际占位

实际占位宽 = 宽度 + 左右内边距 + 左右边框宽 + 左右外边距
实际站位高 = 高度 + 上下内边距 + 上下边框宽 + 上下外边距

<style>.box {/* 内容区宽 */width: 100px;/* 内容区高 */height: 150px;/* 边框线 */border: 2px dashed #333;/* 内边距 */padding: 10px;}.box1 {/* 内容区宽 */width: 70px;/* 内容区高 */height: 120px;/* 边框线 */border: 5px solid skyblue;/* 内边距 */padding: 10px;/* 背景色 */background-color: gold;}
</style>
<body><div class="box"><div class="box1"></div></div>
</body>

值得注意的是：

如果盒子模型设置了背景色，那么内边距的空间部分也会有背景色

box-sizing怪异盒模型

将盒子模型添加“box-sizing:border-box”属性，盒子的width、height数字就表示盒子实际占有的宽度(不含margin)
即padding、border变为“内缩”的，不再“外扩”
box-sizing属性“大量应用于移动网页制作中”，因为它结合百分比布局、弹性布局非常好用，在PC页面开发中使用较少

<style>.box {width: 200px;height: 200px;border: 10px solid skyblue;padding: 10px;margin: 100px auto;/* 添加 box-sizing 之前，box是外扩的，总宽度=240px添加 box-sizing 之后，变成内缩，总宽度=200px */box-sizing: border-box;}
</style><body><div class="box"></div>
</body>

添加box-sizing之前	添加box-sizing之后

为什么div和button按钮的大小有差别

观察如下代码：

<style>.box1 {width: 100px;height: 30px;background-color: skyblue;padding: 10px;border: 5px solid gold;}button {width: 100px;height: 30px;background-color: skyblue;padding: 10px;border: 5px solid gold;}
</style><body><div class="box1"></div><button></button>
</body>

可以看到，<div>和<button>的宽度高度相等，最终效果如下：

可以看到<div>和<button>实际的宽度高度并不一致

原因：

button按钮默认是“怪异盒模型”
即：自带“box-sizing:border;”属性
button是“内缩”的，而div是“外扩”的

如果想要<button>按钮也变为外扩，可以添加如下属性：

box-sizing: content-box;

效果如下：

盒模型分为两种类型

标准盒模型

box-sizing:border-box; 外扩

怪异盒模型

box-sizing:content-box; 内缩

针对性案例

商品卡片布局

<style>body,p {margin: 0;}a {text-decoration: none;}.goods {border: 1px solid #666;width: 150px;padding: 10px;margin: 20px auto 0;}.goods .title {color: #666;font-size: 12px;line-height: 20px;height: 40px;}.goods .price {margin-top: 6px;color: #e1251b;font-weight: 700;}.goods .price i {font-size: 12px;font-style: normal;}.goods .price span {font-size: 12px;font-weight: 400;}img {/* 去掉图片与下面标题的空隙-下节课程中会讲到 */display: block;width: 150px;height: 150px;}</style><body><div class="goods"><a href=""><img src="/static/shop.png" alt="" /><p class="title">iSeeJplus山茶花智能眼部按摩器护眼仪</p><p class="price"><i>￥</i>679.<span>00</span></p></a></div></body>

效果：

利用CSS绘制小三角形

<style>.box {width: 0px;height: 0px;border-style: solid;border-width: 30px;/* transparent -> 透明色 */border-color: transparent;border-bottom-color: black;}
</style>
<body><div class="box"></div>
</body>

效果：

利用CSS开发热搜词条

<style>.news {width: 300px;height: auto;margin: 50px auto 0px;border: 1px solid;padding: 10px;border-radius: 10px;}h3 {margin: 0px;margin-bottom: 10px;font-size: 20px;}ul {list-style: none;padding: 0px;}li {border-bottom: 1px;height: 35px;line-height: 35px;font-size: 16px;}li a {text-decoration: none;color: black;}li a span {margin-right: 5px;color: rgb(149, 153, 167);}
</style>
<body><div class="news"><h3>百度新闻热榜</h3><ul><li><a href=""><span style="color: rgb(254, 57, 81);">1</span>全国人代会第二次全体会议</a></li><li><a href=""><span style="color: rgb(255, 103, 2);">2</span>美官员承认美国在乌生物实验室有料</a></li><li><a href=""><span style="color: rgb(250, 169, 14);">3</span>一组关键词读懂两高</a></li><li><a href=""><span>4</span>陈梦回应佩戴定制首饰参赛</a></li><li><a href=""><span>5</span>小孩飞机上被陌生人关厕所</a></li><li><a href=""><span>6</span>各地采取多种措施报民生保安全</a></li><li><a href=""><span>7</span>13岁男孩血尿医生取出20多颗磁力珠</a></li><li><a href=""><span>8</span>俄方回应立陶宛总理涉俄歧视性言论</a></li></ul></div>
</body>

效果：