5道css题目
1. 快速居中对齐
- 方法很多包括定位position，浮动float，调整margin等等，这里写一个最快速的，两行代码实现快速居中
<style>
html,body, .parent {
margin: 0;
padding: 0;
}
.parent {
width: 600px;
height: 600px;
background-color: blue;
/*第一步-*/
display: flex;
}
.child {
width: 200px;
height: 200px;
background-color: #5c44aa;
/*第二步*/
margin: auto;
}
/*注意尺寸，父元素是百分比时，注意父元素的父元素是否为百分比等等*/
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
2. padding和margin有什么不同
padding是内边距，作用于自身，比如border-box计算width是包含paddingmargin是外边距，作用于外部
3. vw和百分比的区别
- vw是相当于视窗宽度（设备宽度）的百分比
- 百分比则是相当于继承父元素尺寸之后的百分比
4. 行内元素与块级元素
- 行内元素： 宽高由内容决定，不可设置大小，不换行
- 块级元素：可设置宽高，不设置宽高下继承父元素宽高，自己占一行
5.如何让谷歌浏览器支持小字体
- 比如谷歌最小字体12px,想要更小，如何设置
transform: scale(0.5) 使用这个属性缩放字体
<style>
.parent{
width: 200px;
height: 200px;
background-color: #5c44aa;
margin: auto;
font-size: 12px;
}
.small {
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
</style>
</head>
<body>
<div class="parent">
<div class="small">HELLO WORLD</div>
</div>
</body>
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
