box-sizing的问题

遇到box-sizing的坑

第一次写博客

第一次写博客,还不知道怎么在CSDN上写东西,现在只是算给自己一个学习笔记的地方吧。

发现问题

本人前端小白,现在学习阶段。前段时间再次学习一遍CSS内容(之前为了抓紧看懂项目代码,粗略的学习一下,现在发现好多东西自己都不会,也不用,记不住。所以就再次好好学习)。
这两天在网上面看到有个用CSS画太极图的Demo,于是,我就学着自己敲一遍。首先说明的是,我是写在react项目里的(算是一边学习react东西,一边学习样式吧),先附上第一次的代码:


    render (){
        return (
            <div className={'testShadow'}>
                <div className={'shadowTest'}>
                </div>
                <div className={'testBorder'}>
                    <div className={'borderTest'}>
                    </div>
                </div>
            </div>
        )
    }

说明下代码,className={‘testShadow’}是个大的div(什么是大,哈哈,我是小白,自己乱称呼的),下面包括的两个div,className={‘shadowTest’}是我练习其他部分的模块;className={‘testBorder’}才是太极图部分。CSS的代码如下(我用的less插件):

.testShadow{
  height: 300px;
  .shadowTest{
    border:2px solid #000000;
    height: 200px;
    width: 50%;
    margin:10px 10px;
    float: left;
  }
  .shadowTest:hover{
    -moz-box-shadow:10px 10px #cccccc;
    -webkit-box-shadow:10px 10px #cccccc ;
    box-shadow:10px 10px #cccccc;
  }
  .shadowTest:active{
    -moz-box-shadow:2px 2px #fff000;
    -webkit-box-shadow:2px 2px #fff000 ;
    box-shadow:2px 2px #fff000;
  }

  .testBorder{
    height: 300px;
    width: 40%;
    float: left;
    background-color: #cccccc;
    .borderTest{
      height:200px;
      width: 0;
      margin: 50px auto;
      border-left:100px solid #000000 ;
      border-right: 100px solid #ffffff;
      border-radius: 100%;
      box-shadow: 0px 0px 14px 4px #000000
    }
    .borderTest::before ,::after{
      content: '';
      display: block;
      width: 30px;
      height: 30px;
      border-radius: 100%;
      margin-left: -50px;
    }
    .borderTest::before{
      border: 35px solid black;
      background-color: white;
    }
    .borderTest::after{
      border: 35px solid white;
      background-color: black;
    }
  }
}

效果图如下:
左边的白色的区域你们不用管,右边的太极部分有问题,两个小环不对(有兴趣的百度一下css太极图,很多代码)。在这里插入图片描述
F12调试,发现明明设置了content的高度和宽度,却不显示,没有起作用。一开始我怀疑自己的代码出错了.在这里插入图片描述
尝试了一下用nopepad++编辑,将代码直接单独拿出来,结果发现是没毛病的,html代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	body {
		<!--background-color: #abcdef;-->
	}
	.testShadow{
		height: 300px;
	}
	.shadowTest{
		border:2px solid #000000;
		height: 200px;
		width: 50%;
		margin:10px 10px;
		float: left;
	}
	.shadowTest:hover{
		-moz-box-shadow:10px 10px #cccccc;
		-webkit-box-shadow:10px 10px #cccccc ;
		box-shadow:10px 10px #cccccc;
	}
	.shadowTest:active{
		-moz-box-shadow:2px 2px #fff000;
		-webkit-box-shadow:2px 2px #fff000 ;
		box-shadow:2px 2px #fff000;
	}
	
	.testBorder{
		height: 300px;
		width: 40%;
		float: left;
		background-color: #cccccc;
	}
	.borderTest{
		height:200px;
		width: 0;
		margin: 50px auto;
		border-left:100px solid #000000 ;
		border-right: 100px solid #ffffff;
		border-radius: 100%;
		box-shadow: 0px 0px 14px 4px #000000;
    }
    .borderTest::before{
		content: '';
		display: block;
		width: 30px;
		height: 30px;
		border: 35px solid black;
		border-radius: 100%;
		background-color: white;
		margin-left: -50px;
    }
	.borderTest::after{
		content: '';
		display: block;
		width: 30px;
		height: 30px;
		border: 35px solid white;
		border-radius: 100%;
		background-color: black;
		margin-left: -50px;
    }
 
 
</style>
<body>
    <div class='testShadow'>
		<div class='shadowTest'>
        </div>
		<div class='testBorder'>
			<div class='borderTest'>
			</div>
		</div>
    </div>
</body>
</html>

同样的代码,一开始用的webStrom工具,create-react-app脚手架的react框架显示有问题,直接编译的html却好用(中间请教了两位大哥,但是他们比较忙,也没太多时间帮我研究一下,谢谢他们了)。
十分怪异,于是准备标记一下,准备下次研究。但是今天无意中看到了一个CSS3的box-sizing属性,想着是不是应该添加一下这个,我就在react里面添加了一下,神奇的发现好用了。

    .borderTest::before ,::after{
      content: '';
      display: block;
      box-sizing:content-box;
      -moz-box-sizing:content-box;
      width: 30px;
      height: 30px;
      border-radius: 100%;
      margin-left: -50px;
    }

百度了一下box-sizing,属性如下:
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
content-box,border和padding不计算入width之内
padding-box,padding计算入width内
border-box,border和padding计算入width之内

真正的原因是什么,我没搞明白,另外我的这个太极图是写在Antd的Tabs组件下的,所以不清楚是和脚手架、react框架还是Antd有关,希望有大佬能解释一下,或者我以后有机会弄清原因再贴上来。
第一次写这个东西,见谅,还是挺花时间的。不过记录了自己的学习,也有可能方便了别人,还是值得的。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值