盒子模型
盒子模型是指:外边距(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的中心部分,效果图如下:文章来源:https://www.toymoban.com/news/detail-779305.html
到了这里,关于box-sizing:border-box的理解和作用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!