box-sizing:border-box的理解和作用

这篇具有很好参考价值的文章主要介绍了box-sizing:border-box的理解和作用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

盒子模型

盒子模型是指:外边距(margin)+ border(边框) + 内边距(padding)+ content(内容)

可以把每一个容器,比如div,都看做是一个盒子模型

比如你给一个div设置宽高为500px,但实际你设置的只是content,之后你又设置了padding:10px;border:1px solid red;

这时div的宽高就会变为544px(content 500px + padding 40px + border 4px)

相当于一个元素的实际宽高是由: padding + border + content 组成

1、没有设置box-sizing:border-box属性,宽高会加上padding和border的值,需要我们手动去计算,减去padding和border的值,并调整content的值,以免超过给定的宽高

比如下图,我给父元素parent设置宽高为500px,背景色为黑色;然后给子元素设置宽高为478px,并设置内边距10px,红色边框1px,背景颜色为灰色

此时子元素的宽高为500px(content 478px + padding 40px + border 4px)所以就覆盖了父元素的黑色背景,只能看到子元素的灰色背景

2、加了box-sizing:border-box属性padding和border的值就不会在影响元素的宽高,相当于把padding和border的值都算在content里

盒子模型会自动根据padding和border的值来调整content的值,就不需要手动调整

标准盒子模型,一般浏览器也都默认为标准盒子模型。即:box-sizing:content-box

怪异盒子模型,一般根据实际项目需要自行设置。即:box-sizing:border-box

CSS中代码background:url(图片) no-repeat right center的意思

最近在模仿一个网页的时候,发现CSS代码里有一行代码:background:url(图片) no-repeat right center不明白是什么意思,百度以后学习到了,在此记载知识点;

这一行代码其实是背景图定义形式的简写
完整形式是:

background-image:url(图片);
background-repeat:no-repeat;
background-position:right center
right center是设置图片的初始位置,right是在水平方向上贴容器或浏览器页面的右侧,center是在垂直方向上居中,这两个的顺序是先定义水平位置,再定义垂直位置
另外一个例子:
 background:url(../images/top_ico.png) no-repeat right 14px;

意思是背景图片不重复,在水平方向靠近容器的右侧,在垂直方向距离容器上方14px;

首先代码是:   #ban { margin:auto; width:500px; height:500px;border:2px dotted black;background:url(../image/hover_right.png); } 在不写repeat与no-repeat的情况下,默认的是平铺。repeat平铺的效果,就是一张图,可以铺满整个屏幕。效果图如下

 文章来源地址https://www.toymoban.com/news/detail-779305.html

然后我在#ban { margin:auto; width:500px; height:500px;border:2px dotted black; background:url(../image/hover_right.png)  no-repeat; /*不平铺*/ }no-repeat是不平铺,

效果图如下:

 center这个值,大家基本上很少去用到,往往也会忽略掉这个center的利用价值。其次我再加一个属性:background:url(../image/hover_right.png) no-repeat  center;它就会居中与div的中心部分,效果图如下:

 

到了这里,关于box-sizing:border-box的理解和作用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • (前端)你了解shadow吗?—css属性:box-shadow、text-shadow详解

    前言: css中用于设置阴影的属性有三个,分别是:box-shadow(盒子阴影)、text-shadow(文本阴影) 以及filter:drop-shadow,本篇文章着重介绍盒子阴影与文本阴影。 一、box-shadow(盒子阴影) 1、使用方式 参数介绍: h-shadow:水平阴影位移,大于0时阴影右移,小于0时阴影左移; v-shadow:

    2024年01月16日
    浏览(54)
  • CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)

    CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表 (Cascading Style Sheets)。下面是一些常用的CSS3属性及其详细解释: border-radius:设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径,也可以只使用一个值来设置统一的圆角。 box-shadow:创建一个元

    2024年02月08日
    浏览(55)
  • 前端理解的HTTP缓存(作用、缓存策略、缓存控制机制、应用)

    目录 一、HTTP缓存有什么作用? 二、 浏览器的缓存策略有哪些? 1、强缓存(Expires、Cache-control) 2、协商缓存(Last-Modified、ETag) 3、缓存过程是什么? 三、浏览器缓存控制机制有哪些? 1、使用HTML Meta 标签 2、使用HTTP头信息控制缓存 四、哪些请求不能被缓存? 五、部署时

    2024年02月15日
    浏览(39)
  • 前端理解的HTTP缓存(缓存的过程/策略/控制机制/作用和应用)

    目录 一、HTTP缓存有什么作用? 二、 浏览器的缓存策略有哪些? 1、强缓存(Expires、Cache-control) 2、协商缓存(Last-Modified、ETag) 3、缓存过程是什么? 三、浏览器缓存控制机制有哪些? 1、使用HTML Meta 标签 2、使用HTTP头信息控制缓存 四、哪些请求不能被缓存? 五、部署时

    2024年02月16日
    浏览(41)
  • 前端需要理解的CSS知识

    CSS(层叠样式表,Cascading Style Sheets)不是编程语言,而是用来描述 HTML 或 XML(包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言)文档的表现与展示效果的样式表语言。CSS3是CSS的最新标准,是 向后兼容(指的是老版本的功能和数据在新版本能完美运行, 与 向前兼容 相反 )的

    2024年02月11日
    浏览(33)
  • css实现border渐变样式

    项目中用到了border的渐变使用,虽然可以使用图片,但不如代码实现效果好,所以实现了border两头渐变的效果 效果如图:

    2024年02月11日
    浏览(46)
  • css实现有缺口的border

    通常会有那种两个div都有border重叠在一起就会有种加粗的效果。 div1,div2,div3都有个 1px 的 border ,箭头标记的地方是没有处理解决的,很明显看着是有加粗效果的。其实这种感觉把div3的 width 减小 1px ,外加一个 margin-left:1px 应该也可以的。 我这里的这种主要注意class的 positio

    2024年02月15日
    浏览(35)
  • 理解并使用CSS:前端邪术-化妆术

    文详细介绍了CSS(层叠样式表)的基本概念、语法规范、引入方式、代码风格、选择器种类以及常用元素属性。通过阅读本文,您可以深入理解CSS的强大功能,并学会如何在网页设计中灵活运用。

    2024年02月08日
    浏览(71)
  • css3 hover border 流动效果

       

    2024年02月14日
    浏览(52)
  • CSS3:border-image

    2024年04月25日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包