宽度并不是我们想要设置的100px,而是140px?因为我们设置了20的内边距,所以盒子被这个padding撑开了,宽度自然也就变成了140px,我们要是想要得到宽度为100px的盒子而且内边距又为20px的话就只能做做算术了,那就是100-40=60,我们把宽度设置为60px,再设置20px的内边距这样的话不就可以得到宽为100px的盒子了吗?
width: 300px; height: 300px; font-size: 20px; } .child { border: 1em solid ; } 子元素 这里给父元素设置了字体大小为20px,然后给子元素的border宽度设置为1em,这时,子元素的border值为20px,确实是相对于父元素的字体大小设置的: 那如果我们给子元素的字体设置为30px: .child { fon...
1.border-width:规定边框宽度 .pag{border-style:solid;border-width:10px;width:100px;height:30px; } 效果: 那我们来谈论一下border边框包括哪些范围 .pag1{ border-style:solid; border-color:rgb(255,0,255,0.3); border-width:20px; width:100px; height:100px; position:absolute; } .pag2{ back...
border-width指定边框的宽度,可以设置为px、pt、cm、em等,也可以使用预定的三个属性值: p.w2{ border-style: dotted; border-width:2pt; } p.w3{ border-style: dashed; border-width:5px; } p.w4{ border-style: groove; border-width:10px; } p.w_thick{ border-style: double; border-width: th...
第13个出现,则超出容器(600px高度)排列 wrap-reverse:反向换行。之前是从上到下换行,现在是从下到上换行。 .container { height: 600px; width: 800px; display: flex; border: 2px solid #000; flex-wrap: wrap-reverse; } .item { box-sizing: border-box; background-color: lightblue; width: 20...
width: 100%; height: 368px; background: url("纹理.jpg") 50% 0/auto 50%; animation: scroll 3s linear forwards infinite; } @keyframes scroll { 0%{ transform: translateY(-50%); } 100% { transform: translateY(-0%); } } 1. ...
.parent{width:300px;height:300px;font-size:20px; }.child{border:1emsolid; } 子元素 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 这里给父元素设置
.box{width:100px;height:100px;} (2)pt pt 全称为 Point,表示点。常用于软件设计和排版印刷行业(笔者做的前端系统,最终的产物就是一个需要拿去印刷的PDF,所以会经常用到这个单位)。当使用这个单位时,无论显示器的分辨率是多少,打印在纸上的结果都是一样的。
.container{height:400px;width:600px;background-color:#e1e1e1;} 页面是这样的 : 11. display: flex; 想要使用flex布局,我们必须先给外边的container容器加上一个display:flex;属性, 那么容器里面的元素才遵循flex布局: 代码语言:javascript 代码运行次数:0 ...
Test topTest rightTest bottomTest left 得到的offset如下: temp1.marginTop=20px*50%=10px;temp2.marginRight=20px*25%=5px;temp3.marginBottom=20px*75%=15px;temp4.marginLeft=20px*100%=20px; 然后,我又测试了padding,原以为padding的值会根据应用了该属性的相关元素来计算,但...