您的当前位置:首页css中border-sizing属性的用法
广告

css中border-sizing属性的用法

2023-11-28 来源:酷申汽车网

这篇文章给大家介绍的文章内容是关于css中border-sizing属性的用法,有很好的参考价值,希望可以帮助到有需要的朋友。

box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式,不再冗赘。

## 1. 属性讲解

#### content-box默认值,也是css2.1中的盒子模型。在计算widthheight时候,不计算borderpaddingmargin。高度、宽度都只是内容高度。

#### border-boxcss3新增。 widthheight属性包括内容,内边距和边框,但不包括外边距。

计算公式:

  1. width = width = border + padding + 内容宽度

  2. height = border + padding + 内容高度

## 2. 考虑盒子模型的margin从上面可以知道,即时是border-box也是不计算margin,只是多余计算了borderpadding。因为borderpadding都是盒子模型的一部分,但是margin标记的是盒子和盒子的间距。所以,border-box的解释很符合常理。

问题来了,如果有时候一定要设置margin,怎么做到自由控制来保证兼容?例如,我们下面要设置一个撑满页面的盒子元素,而且有外边距干扰,怎么做?

实现如下效果图:border-sizing属性详解和应用

代码:源码下载

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>yuanxin.me</title> <style type="text/css"> *{ margin: 0; padding: 0; } #app { box-sizing: border-box; /* 指定计算方式 */ margin: 10px; /* 外边距干扰 */ /* 利用 css3 的 calc */ width: calc(100vw - 2*10px); height: calc(100vh - 2*10px); } </style></head><body> <p id="app"> </p></body></html>

所以,当需要计算外边距(margin),可以配合css3中的四则运算(calc)来使用。

## 3. 使用建议

根据项目中的使用经验和w3c的建议,推荐将box-sizing属性设置为border-box。

* { margin: 0; padding: 0;}p { box-sizing: border-box;}

小编还为您整理了以下内容,可能对您也有帮助:

CSS中的border-sizing

一、box-sizing: content-box|border-box|inherit;

1.content-box:宽和高只是内容部分,不包含padding和border

2.border-box:box的宽和高包含padding和border

3.inherit:继承自父级

二、demo

<style type="text/css">

.box1,.box2{

width: 100px;

height: 100px;

border:20px solid red;

padding:20px;

float: left;

margin-right: 50px;

}

.box1{

box-sizing: content-box;

}

.box2{box-sizing: border-box;}

</style>

<body>

<div class="box1">box1</div>

<div class="box2">box2</div>

效果图:

![RCT223]26@56_K91HECU_0D.png]( https://upload-images.jianshu.io/upload_images/6955119-520e1f66f0c68568.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )

【css】边框border的属性和使用方法

顾名思义,就是元素外面的一圈边框,下图中虚线圈起的部分是内容,外面橙色的一圈是它的边框,可以理解成在照片外面加一个相框,使用border属性。

边框样式border-style必须写!否则其它属性全部失效。

边框的样式:

border后面可跟多个值,中间用空格分离,含义如下:

注意顺序, 边框样式不可省略 ,颜色和宽度可以省略,会显示默认的效果。

——以上规律在padding和margin一样适用。

边框样式border-style必须设置

如果我们的四条边框属性都是一样的,那么统一设置就可以啦,注意边框类型不可省略。

首先我们放置一个宽高为200px的粉色盒子。

接下来我们为它加上一条宽度为10px,样式为实线,颜色为红色的边框。

我们可以看到,添加边框的时候,是在盒子外面套一圈边框,而不是加在里面,在Chrome浏览器中点击右键检查,可以看到div的大小变成了220x220。

套在外面的边框的宽度是会加进盒子尺寸的(上下左右各增加了10px),如果我们想盒子保持大小不变,要对div本身的width和height进行减小,在这个样例中,通过计算可得,减少到180px即可保持大小不变。

当我们使用点状、虚线等边框样式时,多出来的缝隙,会使用元素本身的 背景颜色 填充。

点和虚线的具体样式,不同浏览器中可能会不一样。

我们为刚刚的盒子设置上边框为红色,左边框为绿色,效果如下图所示:

我们会发现在两条边框交界处的小方块,通过一条对角线分隔,上边框和左边框各占一半。当边框不一样宽时,同样也是用对角线把交界处的小长方形一分为二,如下图所示:

当被添加边框的元素宽度为0,不设置高度(高度默认是0)的情况下,我们可以巧妙利用 边框组合 transparent(透明) 绘制三角形,可以体验下哦。

三角形1-css:

三角形2-css:

多彩三角形-css:

绘制梯形只要对应添加宽度或者高度就可以啦
梯形1-css:

梯形2-css:

【css】边框border的属性和使用方法

顾名思义,就是元素外面的一圈边框,下图中虚线圈起的部分是内容,外面橙色的一圈是它的边框,可以理解成在照片外面加一个相框,使用border属性。

边框样式border-style必须写!否则其它属性全部失效。

边框的样式:

border后面可跟多个值,中间用空格分离,含义如下:

注意顺序, 边框样式不可省略 ,颜色和宽度可以省略,会显示默认的效果。

——以上规律在padding和margin一样适用。

边框样式border-style必须设置

如果我们的四条边框属性都是一样的,那么统一设置就可以啦,注意边框类型不可省略。

首先我们放置一个宽高为200px的粉色盒子。

接下来我们为它加上一条宽度为10px,样式为实线,颜色为红色的边框。

我们可以看到,添加边框的时候,是在盒子外面套一圈边框,而不是加在里面,在Chrome浏览器中点击右键检查,可以看到div的大小变成了220x220。

套在外面的边框的宽度是会加进盒子尺寸的(上下左右各增加了10px),如果我们想盒子保持大小不变,要对div本身的width和height进行减小,在这个样例中,通过计算可得,减少到180px即可保持大小不变。

当我们使用点状、虚线等边框样式时,多出来的缝隙,会使用元素本身的 背景颜色 填充。

点和虚线的具体样式,不同浏览器中可能会不一样。

我们为刚刚的盒子设置上边框为红色,左边框为绿色,效果如下图所示:

我们会发现在两条边框交界处的小方块,通过一条对角线分隔,上边框和左边框各占一半。当边框不一样宽时,同样也是用对角线把交界处的小长方形一分为二,如下图所示:

当被添加边框的元素宽度为0,不设置高度(高度默认是0)的情况下,我们可以巧妙利用 边框组合 transparent(透明) 绘制三角形,可以体验下哦。

三角形1-css:

三角形2-css:

多彩三角形-css:

绘制梯形只要对应添加宽度或者高度就可以啦
梯形1-css:

梯形2-css:

css border是什么属性

在CSS中,border是用于定义元素边框样式的属性。通过设置border属性,你可以为元素添加边框,并指定边框的宽度、样式和颜色。

border属性的语法如下:

border: width style color;

下面是对上述语法中各个属性的解释:

width:指定边框的宽度。可以使用像素(px)、百分比(%)或其他长度单位来指定。

style:指定边框的样式。常用的样式包括实线 (solid)、虚线 (dashed)、点线 (dotted) 等。还有其他样式可用,如双线 (double)、线性渐变 (linear-gradient) 等。

color:指定边框的颜色。可以使用颜色名称、十六进制、RGB、RGBA 等格式来指定。

以下是一些示例,演示如何使用 border 属性设置元素边框:

.example {  border: 1px solid black;}.example2 {  border: 2px dashed #f00;}

在上述示例中,.example类的元素将显示一个1像素宽的黑色实线边框,而.example2类的元素将显示一个2像素宽的红色虚线边框。

通过使用border属性,你可以为元素添加边框,并根据需要自定义边框的宽度、样式和颜色,以实现所需的设计效果。

CSS如何怎么设置div边框颜色宽度和高度

CSS设置div边框颜色宽度和高度步骤如下:

1、新建一个html文件,创建一个类名为wrap的div。

2、先通过css类选择器选择到div来控制div的宽度和高度和背景颜色(没有边框时方便看出来div的大小)。

3、通过div 的border属性控制边框颜色,设置border的宽度为2px,线型为实线,颜色为蓝色。

4、这样就可以设置div边框颜色宽度和高度,如下图:

扩展资料:

css border属性:

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性:

border-width,border-style,border-color

如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。

酷申汽车网还为您提供以下相关内容希望对您有帮助:

CSS中的border-sizing

一、box-sizing: content-box|border-box|inherit;1.content-box:宽和高只是内容部分,不包含padding和border 2.border-box:box的宽和高包含padding和border 3.inherit:继承自父级 二、demo .box1,.box2{ width: 100...

css如何设置div边框css设置div边框颜色

如果只想显示右边框,只需将border-width属性更改为01px00。html中边框怎么设置位置?1、html中调整位置使用css的float属性。详细用法首先在html文件中新建两个p容器,用来方便演示效果,容器中都加入h2标签,设置不同文字便于...

能够影响到盒子模型宽高的css属性?

4. border(边框):设置元素的边框样式、宽度和颜色。边框也会占据一定的宽度和高度。5. margin(外边距):设置元素与相邻元素之间的距离。外边距会在元素周围创建一定的空白区域,影响元素的实际尺寸。6. box-sizing(盒子...

box-sizing属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内...

【css】边框border的属性和使用方法

border后面可跟多个值,中间用空格分离,含义如下:注意顺序, 边框样式不可省略 ,颜色和宽度可以省略,会显示默认的效果。——以上规律在padding和margin一样适用。边框样式border-style必须设置 如果我们的四条边框属性都是一...

CSS如何怎么设置div边框颜色宽度和高度?

1、新建一个html文件,创建一个类名为wrap的div。2、先通过css类选择器选择到div来控制div的宽度和高度和背景颜色(没有边框时方便看出来div的大小)。3、通过div 的border属性控制边框颜色,设置border的宽度为2px,线型为...

编写CSS+DIV代码完成三列固定宽度的网页结构布局

border-sizing:border-box;/*将边框设置为内边框 这样就不影响元素的宽度和高度,这样正好右列二到页面左边距正好是700px ,没有这个属性的话是708px*/ float: left;} a{ background: #ffc33c;border: 2px solid #...

CSS border(边框)样式写法总结

border属性 :在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。 语法:border: border-width | border-style | border-color; border-width...

css中给文字设置上内边距时为什么背景图片的透明度会加宽?

设置CSS的box-sizing属性值为“border-box”,这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px!!是不是很神奇呢?.column{ width: 16%;margin: 2% 2%;floa...

div+css如何设置边框border?

border这个位置可选border:四边边框,border-top:顶部边框,类似还有border-left/right/button。宽度即为边框宽度。样式有如图:颜色忽略,如有不清楚的可以参见w3school教程http://www.w3school.com.cn/css/css_border.asp ...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top