关于css calc的测试
0.参考
https://www.w3cplus.com/css3/how-to-use-css3-calc-function.html
1.使用的场合
1.box-sizing 的替代品
2.类似于简单的@media
做一个简单的响应是布局(实现比较容易)
2.关于calc的简介(calculate--计算的意思)
顾名思义,就是计算属性
3.calc()
感觉就是一个小的计算器,或者是一个写在css里面的js函数
输入参数,返回计算的结果
那参数的有什么要求吗:
1.可以使用+,-,*,/
2.可以使用百分比 20%
3.允许使用单位
4.建议使用+,-*,/的时候,前后使用空格
其实+,-必须要使用(会拼接或者隐式转换吗--奇怪了)
*,/是非必须的
4.兼容性:(IE9+)
需要在其前面加上各浏览器厂商的识别符
移动端,貌似兼容性不是太好
=================
案例的小测试:
代码:(感觉,没多大意思)
<head>
<meta charset="UTF-8">
<title>calc</title>
<style>
*{
margin: 0;
padding: 0;
}
article{
background-color: red;
height: 200px;
width:calc(80% - 5px);
margin-left: 5px;
float: left;
}
aside{
float: left;
height: 200px;
background-color: green;
width: calc(20% - 25px);
margin-right: 25px;
}
</style>
</head>
<body>
<h1>关于css calc的使用</h1>
<article>
<section>
</section>
</article>
<aside>
</aside>
0.参考
https://www.w3cplus.com/css3/how-to-use-css3-calc-function.html
1.使用的场合
1.box-sizing 的替代品
2.类似于简单的@media
做一个简单的响应是布局(实现比较容易)
2.关于calc的简介(calculate--计算的意思)
顾名思义,就是计算属性
3.calc()
感觉就是一个小的计算器,或者是一个写在css里面的js函数
输入参数,返回计算的结果
那参数的有什么要求吗:
1.可以使用+,-,*,/
2.可以使用百分比 20%
3.允许使用单位
4.建议使用+,-*,/的时候,前后使用空格
其实+,-必须要使用(会拼接或者隐式转换吗--奇怪了)
*,/是非必须的
4.兼容性:(IE9+)
需要在其前面加上各浏览器厂商的识别符
移动端,貌似兼容性不是太好
=================
案例的小测试:
代码:(感觉,没多大意思)
<head>
<meta charset="UTF-8">
<title>calc</title>
<style>
*{
margin: 0;
padding: 0;
}
article{
background-color: red;
height: 200px;
width:calc(80% - 5px);
margin-left: 5px;
float: left;
}
aside{
float: left;
height: 200px;
background-color: green;
width: calc(20% - 25px);
margin-right: 25px;
}
</style>
</head>
<body>
<h1>关于css calc的使用</h1>
<article>
<section>
</section>
</article>
<aside>
</aside>
839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
