background-clip:从box-sizing:border-box属性入手,来了解盒模型

2023-11-05 10:38

本文主要是介绍background-clip:从box-sizing:border-box属性入手,来了解盒模型,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

每个项目产品都会让你加埋点,你是愿意花几天一个个加,还是愿意几分钟一个小时加完去喝茶聊天?来试试这520web工具, 高效加埋点,目前我们公司100号前端都在用,因为很好用,所以很自然普及开来了,推荐给大家吧

http://www.520webtool.com/

自己开发所以免费,埋点越多越能节约时间,点两下埋点就加上了,还不会犯错,里面有使用视频,反正免费 😄

从最开始学习CSS的时候,就了解了盒模型的概念,今天,我们从其中的box-sizing:border-box;的属性入手,来重新认识一下盒模型在实际项目中的运用。

    背景:先声明一下运用的场景,假如项目布局使用的是自适应的布局方式,div给出的宽度是百分比的形式,即框占窗口宽度的50%,但边界和内边距是用像素来表示的怎么办?为了避免这种问题,可以使用属性box-sizing来调整框模型。使用border-box,来将框模型更改成这个新的模型。

    注意:回顾一下,框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和,这就是造成上述背景下,样式不好调整的原因。

            box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型,可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。

一、回顾基础

        (1)框属性的基本规范:

            文档的每个元素被构造成文档布局内的一个矩形框,框每层的大小都可以使用一些特定的CSS属性调整。相关属性如下:

即width=content

            ①width和height设置内容框(content box)的宽度和高度。内容框是框内容显示的区域--包括框内的文本内容,以及表示镶嵌子元素的其他框;

            ②padding表示一个CSS框内边距--这一层位于内容框的外边缘与边界的内边缘之间;

            ③border即CSS框的边界是一个分割层,位于内边距的外边缘以及外边距的内边缘之间;

            ④margin即外边距代表CSS框周围的外部区域。

            (2)运用box-sizing:border-box属性下,框模型的变化

            

即width=content+padding+border(此时,当div的宽度为50%时,而border和padding为px时,那么content会随着实际的宽度进行自动缩放;)

         (3)来看看实际的例子:   

            ①设计稿如下所示:

            ②实际代码:

            本例子中,采用的是flex布局的方式,为了自适应,宽度width采用的是百分比%的形式,border,padding,margin采用的是px尺寸,所有外层的盒子运用了box-sizing:border-box;属性来改变盒子的结构,从而实现需求。

<body>
    <div class="clear_float">
         <div class="goods_cell">
          <div>
               <img class="img_goods" src="../images/img_goods.png" alt="">
          </div>
          <div class="text_goods">
               双宫茧桑蚕丝被
          </div>
          <div class="goods_price">
               <div class="price_span">活动秒杀价:</div>
               <div class="price_num">¥  499.00</div>
          </div>
          <div class="goods_seckill">
               <div class="seckill_left">仅剩<span>23:59:00</span></div>
               <div class="seckill_right">秒杀</div>
          </div>
          </div>
          <div class="goods_cell">
              <div>
              <img class="img_goods" src="../images/img_goods.png" alt="">
              </div>
              <div class="text_goods">
          双宫茧桑蚕丝被
              </div>
              <div class="goods_price">
               <div class="price_span">活动秒杀价:</div>
               <div class="price_num">¥  499.00</div>
              </div>
              <div class="goods_seckill">
               <div class="seckill_left">仅剩<span>23:59:00</span></div>
               <div class="seckill_right">秒杀</div>
              </div>
          </div>
          <div class="goods_cell">
           <div>
            <img class="img_goods" src="../images/img_goods.png" alt="">
           </div>
           <div class="text_goods">
            双宫茧桑蚕丝被
           </div>
           <div class="goods_price">
            <div class="price_span">活动秒杀价:</div>
            <div class="price_num">¥  499.00</div>
           </div>
           <div class="goods_seckill">
            <div class="seckill_left">仅剩<span>23:59:00</span></div>
            <div class="seckill_right">秒杀</div>
           </div>
           </div>
           <div class="goods_cell">
            <div>
            <img class="img_goods" src="../images/img_goods.png" alt="">
            </div>
            <div class="text_goods">
            双宫茧桑蚕丝被
            </div>
            <div class="goods_price">
             <div class="price_span">活动秒杀价:</div>
             <div class="price_num">¥  499.00</div>
            </div>
            <div class="goods_seckill">
             <div class="seckill_left">仅剩<span>23:59:00</span></div>
             <div class="seckill_right">秒杀</div>
            </div>
        </div>
    </div>
</body>
<style>
.clear_float{
    margin-bottom:20px;
}
.goods_cell{
    width: 47%;
    box-sizing: border-box;
    padding: 10px;
    float: left;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.20);
    border-radius: 10px;
    font-size:13px;
    color: #333333;
    margin-left:15px;
    margin-bottom:20px;
}
.clear_float>.goods_cell:nth-of-type(2n+1){
    margin-left: 0;
}
.img_goods{
    width:78.5px;
    height:96px;
    display: block;
    margin: 0 auto;
}
.text_goods{
    margin:10px 0;
    color:#333333;
    font-size:13px;
}
.goods_price{
    font-size:18px;
    color: #FF0845;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:1px;
}
.goods_price .price_span{
    font-size:8px;
    color:#fa5754;
    line-height:8px;
}
.goods_price .price_num{
    font-size:16px;
    color:#fa5754;
    line-height:18px;    
}
.goods_seckill{
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing:border-box;
    line-height:15px;
    width:100%;
    height:15px;
}
.goods_seckill .seckill_left{
    width:70%;
    padding:2.5px 0px;
    font-size:10px;
    color:#2d2d2d;
    line-height:10px;
    border:1px solid #999999;
    border-right:1px solid #ff0845;
    text-align:center;
}
.goods_seckill .seckill_right{
    width:30%;
    color:#ffffff;
    background-color:#ff0845;
    border:1px solid #ff0845;
    font-size:10px;
    line-height:10px;
    padding:2.5px 8px;
    text-align:center;
}
</style>
        ③在游览器上模拟的320px,375px和414px尺寸下,显示的效果图:

二、盒模型的其他属性

        (1)margin,padding设置为百分比形式:

            给<main>元素的内边距和外边距的各个边设置为5%,意味着“包含元素宽度的5%”,因此,随着示例输出窗口的大小增加,内边距和外边距也增加了。

        (2)margin可以接受负数,可以用来引起元素框的重叠:

          (3)背景裁剪(Background clip)属性:

            background-clip:border-box;背景被裁剪到边框盒;

            background-cilp:padding-box;背景被裁剪到内边距框;

            background-clip:content-box;背景被裁剪到内容框。

            可以看看以下效果图比较一下:

        (4)轮廓(Outline):

            一个框的outline是一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多,但是并不改变框的尺寸(更准确的说,轮廓被勾画于在框边界之外,外边距区域之内)。

            相关实例:在引入bootstrap框架时,input在360游览器(兼容模式)下显示,在获得焦点时外边框变蓝,这就是outline造成的影响,去掉只需要添加一个CSS样式即可,input:focus{outline:none;}。

            详情介绍可以查看之前的文章:实现输入框input在获得焦点时外边框不变蓝  点击打开链接

        (5)CSS框类型,通过display属性来设定元素的框类型:

            最常见的display类型是:block,inline,inline-block,即块框(block box),行内框(inline box),行内块状框(inline-block box).

                注意:默认状态下display属性值,块级元素display:block,行内元素display:inline。

                不常见的类型display类型是:table,flex,grid.

                ①display:table--允许你像处理table布局那样处理非table元素,而不是滥用HTML的<table>标签来达到同样的目的;

                 ②display:flex--允许你处理一些困扰CSS已久的一些传统布局问题,如布置一系列弹性等宽容器或者垂直居中内容(目前,flex布局在移动端使用较为广泛);

                  ③display:grid--给出一种简单实现CSS网络系统的方式,而在传统上它依赖于一些棘手难以处理的CSS网络框架。

           (6)框的高度    

            框的高度不遵守百分比的长度;框的高度总是采用框内容的高度,除非指定一个绝对的高度(如:px或者em),它会比在页面上默认是100%高度更实用。

            (7)盒的高级属性--设置宽和高的约束

                ①通过min-width,max-width,min-height,max-height 属性,来设置大小约束,以更灵活的方式控制内容盒的大小:

                    这类情况通常用于响应式网页设计,将一个布局的外层容器的宽度设置为百分比形式。

width:70%;
max-width:1280px;
min-width:480px;
                然后,添加下句CSS使该容器在它的父容器内居中显示:

margin:0 auto;
                那么最终呈现的效果是:当父容器在最小和最大宽度限制内时,它将填满整个视口宽度;当父容器超过1280px宽度时,布局将保持在1280px宽,并开始在可用空间内居中。当宽度低于480px时,视口将小于容器,您必须滚动才能看到完全的内容。

            ②max-width属性的另一个好处是可以将容器内的媒体(如图像和视频)控制在容器内(响应式图片):

            在上述例子中,图像会引起一个问题--起初它的显示正常,但当容器变得比图像更窄时,图像开始溢流容器(因为它是一个固定的宽度)。解决这类问题,可以用以下CSS:

display:block;
margin:0 auto;
max-width:100%;
            前两条属性display:block,margin:0 auto,使它的展示行为像一个块元素并且在父容器内居中。而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此,当父容器宽度缩小到小于图像的宽度时,图像会一起缩小。(这样,可以让图片最大只能是自己的宽度,成为响应式的图片)

            而这类运用最好的实例就是bootstrap框架中,图像的img-responsive类名的属性,在框架下,图像添加了img-responsive类名,就能达到在视口宽度不断变化的情况下,图像都可以达到响应式的缩放形式,这也是图像响应式的秘诀所在。

        三、总结

               关于盒模型的总结,是从运用实例的角度来引入的,并未按照常规的顺序来进行梳理,如果大家想了解盒模型的完整知识,推荐查看MDN的盒模型讲解完整篇,点击打开链接,以及MDN再述盒模型篇,点击打开链接。
--------------------- 
作者:qq_26780317 
来源:CSDN 
原文:https://blog.csdn.net/qq_26780317/article/details/80736514 
版权声明:本文为博主原创文章,转载请附上博文链接!

这篇关于background-clip:从box-sizing:border-box属性入手,来了解盒模型的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

Andrej Karpathy最新采访:认知核心模型10亿参数就够了,AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人,AI大神Andrej Karpathy,曾是OpenAI联合创始人之一,特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ,宣布将长期致力于AI原生教育。 近日,Andrej Karpathy接受了No Priors(投资博客)的采访,与硅谷知名投资人 Sara Guo 和 Elad G

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI(简称 RVC)模型是一个基于 VITS(Variational Inference with adversarial learning for end-to-end Text-to-Speech)的简单易用的语音转换框架。 具有以下特点 简单易用:RVC 模型通过简单易用的网页界面,使得用户无需深入了

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

图神经网络模型介绍(1)

我们将图神经网络分为基于谱域的模型和基于空域的模型,并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络:谱图卷积网络、切比雪夫网络和图卷积网络。 (1)谱图卷积网络 卷积定理:函数卷积的傅里叶变换是函数傅里叶变换的乘积,即F{f*g}

秋招最新大模型算法面试,熬夜都要肝完它

💥大家在面试大模型LLM这个板块的时候,不知道面试完会不会复盘、总结,做笔记的习惯,这份大模型算法岗面试八股笔记也帮助不少人拿到过offer ✨对于面试大模型算法工程师会有一定的帮助,都附有完整答案,熬夜也要看完,祝大家一臂之力 这份《大模型算法工程师面试题》已经上传CSDN,还有完整版的大模型 AI 学习资料,朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

AI Toolkit + H100 GPU,一小时内微调最新热门文生图模型 FLUX

上个月,FLUX 席卷了互联网,这并非没有原因。他们声称优于 DALLE 3、Ideogram 和 Stable Diffusion 3 等模型,而这一点已被证明是有依据的。随着越来越多的流行图像生成工具(如 Stable Diffusion Web UI Forge 和 ComyUI)开始支持这些模型,FLUX 在 Stable Diffusion 领域的扩展将会持续下去。 自 FLU

滚雪球学Java(87):Java事务处理:JDBC的ACID属性与实战技巧!真有两下子!

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE啦,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎大家关注&&收藏!持续更新中,up!up!up!! 环境说明:Windows 10