box-sizing的问题

最新推荐文章于 2022-09-26 10:21:58 发布

唐僧来巡山

最新推荐文章于 2022-09-26 10:21:58 发布

阅读量312

点赞数 1

文章标签： box-sizing

本文链接：https://blog.csdn.net/qq_37744343/article/details/85374880

版权

遇到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
评论
box-sizing的问题

遇到box-sizing的坑第一次写博客第一次写博客，还不知道怎么在CSDN上写东西，现在只是算给自己一个学习笔记的地方吧。发现问题本人前端小白，现在学习阶段。前段时间再次学习一遍CSS内容（之前为了抓紧看懂项目代码，粗略的学习一下，现在发现好多东西自己都不会，也不用，记不住。所以就再次好好学习）。这两天在网上面看到有个用CSS画太极图的Demo，于是，我就学着自己敲一遍。首先说明的是，...
复制链接

扫一扫