位置:首页 > 软件操作教程 > 编程开发 > 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条评论)
请自觉遵守互联网相关政策法规,评论内容只代表网友观点,发表审核后显示!

2021年国家电网校园招聘考试直播课程通关班

  • 讲师:刘萍萍 / 谢楠
  • 课时:160h
  • 价格 4580

特色双名师解密新课程高频考点,送国家电网教材讲义,助力一次通关

配套通关班送国网在线题库一套

课程专业名称
讲师
课时
查看课程

2020年解放军文职招聘考试全程直播课

杜老师139课时试听目录

2021级国家电网招聘考试管理专业知识精讲班直播课

黎老师160小时试听目录

2021级国家电网招聘考试其它工学类专业题海练习班直播课

贺老师160小时试听目录

2021级国家电网招聘考试金融专业知识精讲班直播课

钟老师140小时试听目录

2021级国家电网招聘考试计算机专业知识精讲班直播课

杜老师160小时试听目录

2021级国家电网招聘考试通信专业知识精讲班直播课

李老师350小时试听目录

2021级国家电网招聘考试财会专业知识精讲班直播课

王老师120小时试听目录

2021级国家电网招聘考试研究生题海班直播课程

严老师180小时试听目录

2021级国家电网招聘考试研究生电气专业知识精讲班直播课

彭老师160小时试听目录

2021级国家电网招聘考试本科电气专业考前押题班录播课

蒋老师168h试听目录

2021级国家电网招聘考试本科电气专业题海训练班直播课

谷老师165小时试听目录

2021级国家电网招聘考试本科电气专业知识精讲班直播课

严老师160小时试听目录

2021级国家电网招聘考试专科电气专业考前押题班直播课

王老师150小时试听目录

2021级国家电网招聘考试专科电气专业知识题海训练直播课

杨老师146小时试听目录

2021级国家电网招聘考试专科电气专业知识精讲班直播课

崔老师180小时试听目录

2020年湖南中烟公司招聘考试技术工人二岗直播课

刘老师140小时试听目录

2020年湖南中烟公司招聘考试生成车间工人考试直播课

王老师125小时试听目录

2020年湖南中烟公司招聘考试技术工人一岗直播课

李老师140小时试听目录

2020年湖南中烟公司招聘直播课程(协议班)

崔莹莹168h试听目录

2020湖南农村信用社招聘笔试培训(协议保过班)

谢楠200h试听目录

2020军队文职招聘考试面试培训(协议保过班)

刘萍萍124h试听目录

2021国家电网招聘考试录播视频课程

  • 讲师:崔莹莹 / 刘萍萍
  • 课时:180h
  • 价格 3580

特色解密新课程高频考点,免费学习,助力一次通关

配套全套国网视频课程免费学习

课程专业名称
讲师
课时
查看课程

2021级国家电网招聘考试管理类专业知识精讲班录播课

王老师150小时试听目录

2021级国家电网招聘考试其它工学类专业题海练习班录播课

谷老师148小时试听目录

2021级国家电网招聘考试其它工学类专业知识精讲班录播课

夏老师150小时试听目录

2021级国家电网招聘考试其它专业题海练习班录播课

刘老师125小时试听目录

2021级国家招聘考试其它专业题海练习班录播课

李老师140小时试听目录

2021级国家电网招聘考试其它专业知识精讲班录播课

贾老师120小时试听目录

2021级国家电网招聘考试金融专业知识精讲班录播课

王老师140小时试听目录

2021级国家电网招聘考试通信专业知识精讲班录播课

黄老师188小时试听目录

2021级国家电网招聘考试计算机专业知识精讲班录播课

谷老师120小时试听目录

2021级国家电网招聘考试财会专业考前押题班录播课

夏老师15小时试听目录

2021级国家电网招聘考试财会专业题海练习班录播课

杨老师180小时试听目录

2021级国家电网招聘考试财会专业知识精讲班录播课

蒋老师156小时试听目录

2021级国家电网招聘考试研究生电气考前押题班录播课

谷老师12小时试听目录

2021级国家电网招聘考试研究生电气专业题海练习班录播课

李老师170小时试听目录

2021级国家电网招聘考试研究生电气专业知识精讲班录播课

崔老师150试听目录

2021级国家电网招聘考试本科电气专业考前押题班录播课

王老师120小时试听目录

2021级国家电网招聘考试本科电气题海练习班录播课

王老师158小时试听目录

2021级国家电网招聘考试本科电气专业知识精讲班录播课

谷老师170小时试听目录

2021级国家电网招聘考试专科电气专业考前押题班录播课

蒋老师12小时试听目录

2021级国家电网招聘考试专科电气专业题海练习班录播课

崔老师150小时试听目录

2021级国家电网招聘考试专科电气专业知识精讲班录播课

王老师180小时试听目录

在线题库
在线报名
  • 报考专业:
    *(必填)
  • 姓名:
    *(必填)
  • 手机号码:
    *(必填)
返回顶部