CSS3的box-sizing属性用来做什么,用法是怎样的
Admin 2022-06-10 群英技术资讯 1027 次浏览
今天小编跟大家讲解下有关“CSS3的box-sizing属性用来做什么,用法是怎样的”的内容 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了相关资料,希望小伙伴们看了有所帮助。CSS3中的box-sizing(content-box与border-box)
CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式:
content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型
border-box:怪异盒模型,低版本IE浏览器中的盒模型
现代浏览器和IE9+默认值是content-box。
语法格式:
box-sizing:content-box | border-box
区别:
content-box:padding和border不被包含在定义的width和height之内。
盒子的实际宽度=设置的width+padding+border
border-box:padding和border被包含在定义的width和height之内。
盒子的实际宽度=设置的width(padding和border不会影响实际宽度)
总结
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
css中position常见的四个属性值:1、static默认位置。2、relative相对定位。相对定位是相对于元素默认位置的定位。3、absolute绝对定位。4、fixed固定定位。
rotate函数定义了一种将元素围绕一个定点旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正,则顺时针方向旋转,否则逆时针方向旋转。旋转180°也被称为点反射。
方法:1、利用animation属性给元素绑定循环旋转动画;2、利用@keyframes规则设置动画的旋转动作;3、用“元素:active{animation-play-state:paused}”语句设置元素循环旋转时,点击元素停止旋转。
在css中,可以利用ransform和transition属性设置div向上移动,只需要给div元素添加“transform:translateY(-向上移动距离值);transition:all 动画时间 ease-in;”样式即可。
<div><p>1111</p></div>div{ width:980px;<br> background-color:#ccc;<br> height:300px;}p{width:100%;<br> /*width:auto;*/padding:10px;<br> background-color:#000;<br>}如果是p的width:100%,则说明p的width会得到980px就已经充满div区域,然后自己又有padd ...
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准(ICP备案)粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008