0


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平铺的效果,就是一张图,可以铺满整个屏幕。效果图如下

然后我在#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的中心部分,效果图如下:

标签: 前端 html javascript

本文转载自: https://blog.csdn.net/qq_51066068/article/details/127048560
版权归原作者 The..Fuir 所有, 如有侵权,请联系我们删除。

“box-sizing:border-box的理解和作用”的评论:

还没有评论