位置:首页 > 软件操作教程 > 编程开发 > CSS > 问题详情

CSS3 方框大小调整box-sizing

提问人:刘团圆发布时间:2020-11-19

    box-sizing属性是CSS3中BOX属性之、而且box-sizing属性和box-model的关系非同一般。box-sizing属性也遵循了盒子模型的原理,它允许以特定的方式定义匹配某个区域的特定元素。

    例如,需要并排放置两个带边框的框,可将box-sizing设置为border-box。这样浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中7语法如下:

    box-sizing: content-130x1 border- box | inherit:

    box-sizing的属性可以是以下几种:

    •content-box:这是由CSS2.1规定的宽度和高度行为。宽度和高度分别应用到元素的内容框。 在宽度和高度之外,绘制元素的内边距和边框。

    •border-box:为元素设定的宽度和高度决定了元素的边框盒。为元素指定的任何内边距和边框 都将在已设定的宽度和高度内进行绘制。从已设定的宽度和高度分别减去边框和内边距才能得到 内容的宽度和高度。

    •inherit:规定应从父元素继承box-sizing属性的值。

    下面主要介绍border-box值的用法。例如,在页面中需要手动画出一个按钮div ( 200*50 ), 在按钮中间有一个圆形的div(30*30),现在要让这个圆形的div在方形的按钮上居中。按照传统的做法,只能去设置圆形div的margin以达到让其居中的目的,还要考虑到它的父级是否也有margin值,否则会产生外边距合并的问题。传统的做法需要考虑的方面太多,不方便。

     其实;可以换一种思路,不对圆形div进行操作,而是让方形按钮拥有内边距。可以使用box-sizing属性设置内边距。

    【例题】使用box-sizing属性

    代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.btn{

width: 200px;

height: 50px;

border-radius: 10px;

background: #f46;

margin:10px;

position:relative;

}

.d2{

padding:10px 85px;

width: 30px;

height: 30px;

}

.circle{

width: 30px;

height: 30px;

border-radius: 15px;

background: #fff;

}

.c1{

top:10px;

left:85px;

position:absolute;

}

.d3{

box-sizing: border-box;

padding:10px 85px;

}

</style>

</head>

<body>

<div class="btn d1">

<div class="circle c1"></div>

</div>

<div class="btn d2">

<div></div>

</div>

<div class="btn d3">

<div></div>

</div>

</body>

</html>

image.png

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部