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

2024-08-27 02:20

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

目录

盒子模型

width和height属性

width属性

 height属性

 width和height的特性

边框属性

边框的三要素小属性

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

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

单独设置四个圆角

盒子水平居中

盒子模型占位计算

盒模型可视宽高

盒模型实际占位

box-sizing怪异盒模型

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

盒模型分为两种类型

针对性案例

商品卡片布局

利用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>

效果:

这篇关于CSS盒子模型【怪异盒模型、定位看这一篇就够了!!!】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1110356

相关文章

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)

《C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)》本文主要介绍了C#集成DeepSeek模型实现AI私有化的方法,包括搭建基础环境,如安装Ollama和下载DeepS... 目录前言搭建基础环境1、安装 Ollama2、下载 DeepSeek R1 模型客户端 ChatBo

SpringBoot快速接入OpenAI大模型的方法(JDK8)

《SpringBoot快速接入OpenAI大模型的方法(JDK8)》本文介绍了如何使用AI4J快速接入OpenAI大模型,并展示了如何实现流式与非流式的输出,以及对函数调用的使用,AI4J支持JDK8... 目录使用AI4J快速接入OpenAI大模型介绍AI4J-github快速使用创建SpringBoot

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl