margin使用之前是不是需要设置宽高
时间: 2024-04-10 15:30:46 浏览: 7
在使用 `margin` 属性之前,不需要设置元素的宽度和高度。`margin` 是用来控制元素与其他元素之间的间距的,它会影响元素的外部空白区域,而不会改变元素本身的大小。你可以通过设置 `margin-top`、`margin-right`、`margin-bottom` 和 `margin-left` 四个属性来调整元素的外边距。这些属性可以取负值,表示将元素向内缩进。
相关问题
你以一个20年Android专家的身份,帮我写一个工具类,要求传进一个view返回测量的宽高
好的,可以使用如下代码实现:
```java
public class ViewUtils {
public static int[] measureView(View view) {
int[] size = new int[2];
int widthMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
int heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
view.measure(widthMeasureSpec, heightMeasureSpec);
size[0] = view.getMeasuredWidth();
size[1] = view.getMeasuredHeight();
return size;
}
}
```
调用方法如下:
```java
int[] size = ViewUtils.measureView(view);
int measuredWidth = size[0];
int measuredHeight = size[1];
```
这个工具类的实现非常简单,就是通过调用 `View` 的 `measure()` 方法得到测量的宽高,并返回一个包含宽高的数组。注意,这个工具类并没有考虑 `View` 的 `margin`、`padding` 等因素,如果需要考虑这些因素,可以在 `measure()` 方法之前设置 `View` 的 `margin`、`padding` 等属性。
嵌入窗口长、宽都为100%
如果您想要将嵌入窗口的长宽都设置为100%,请修改之前的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid yellow;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 5s linear infinite;
margin: auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 添加隐藏类 */
.hidden {
display: none;
}
/* 设置嵌入窗口的样式 */
.content {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="loader" class="loader"></div>
<!-- 添加一个隐藏的 iframe -->
<iframe id="content" src="your_file.html" frameborder="0" class="hidden"></iframe>
<script>
// 获取小球和内容 iframe 的引用
const loader = document.getElementById("loader");
const content = document.getElementById("content");
// 监听小球动画结束事件
loader.addEventListener("animationend", function() {
// 隐藏小球
loader.classList.add("hidden");
// 显示内容 iframe
content.classList.remove("hidden");
});
</script>
</body>
</html>
```
在上述代码中,我们添加了一个 `.content` 类来设置嵌入窗口的样式,将其宽度和高度都设置为100%。这样,嵌入窗口将填充整个容器的宽度和高度。
记得将 `your_file.html` 替换为要嵌入的本地 HTML 文件的路径。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性定位测试</title>
<style>
.w {
height: 20000px;
width: 1200px;
margin: 0 auto;
background-color: skyblue;
}
.top {
position: absolute;
top: 1600px;
left: 50%;
width: 68px;
height: 68px;
margin-left: 600px;
background-color: red;
}
.top button {
position: sticky;
top: 0;
z-index: 999;
width: 68px;
height: 68px;
}
.top button img {
width: 68px;
height: 68px;
}
</style>
</head>
<body>
<button>
</button>
</body>
</html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)