遇到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有关,希望有大佬能解释一下,或者我以后有机会弄清原因再贴上来。
第一次写这个东西,见谅,还是挺花时间的。不过记录了自己的学习,也有可能方便了别人,还是值得的。