css 关闭ios 边界弹性控制 css边界怎么设置

转载

数据大侠客 2023-09-04 14:20:26

文章标签 css 关闭ios 边界弹性控制 css 外边距 margin 简写属性 文章分类 iOS 移动开发

本文目录

1. 前言
2. 默认情况
3. 设置外边距
4. 简写属性
5. 小结

1. 前言

要理解外边距，先来说一下外边。

物体的外边，指的就是外围的边界，对网页元素来说，外边就是元素最外面的边界。

那么外边距，就是一个物体的外边，与另一个物体的外边的距离。

CSS之中，通过margin来设定元素的外边距，本篇就来说明下用法。

2. 默认情况

先看代码：

<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <br>
    <input type="button" value="按钮3">
    <input type="button" value="按钮4">
</body>

效果如下：

css 关闭ios 边界弹性控制 css边界怎么设置_css 关闭ios 边界弹性控制

从上述效果可以看出，默认情况下，元素之间的边距很小，排列非常紧凑，这也会导致从界面效果上看密密麻麻，不够美观。

3. 设置外边距

可以通过margin-left/margin-right/margin-top/margin-bottom分别设定元素的左、右、上、下边距。

我们为按钮1设置一个id:

<body>
    <input type="button" value="按钮1" id="button1">
    <input type="button" value="按钮2">
    <br>
    <input type="button" value="按钮3">
    <input type="button" value="按钮4">
</body>

然后通过id选择器选中该元素，为其设置CSS样式：

#button1 {
            margin-left: 100px;
            margin-right: 200px;
            margin-top: 30px;
            margin-bottom: 30px;
        }

上述代码，将按钮1的左边距设为了100px，右边距设为了200px，上下边距设为了30px，所以效果如下：

css 关闭ios 边界弹性控制 css边界怎么设置_css_02

我们可以看到，按钮1距离左外边距变大了100px，右外边距变大了300px，上下外边距变大了30px。

4. 简写属性

可以通过以下方式，简化外边距的写法：

/* 上下左右边距均设置为10px */
            margin: 10px;
            /* 上下10px 左右20px */
            margin: 10px 20px;
            /* 上、右、下、左分别为1px 2px 3px 4px */
            margin: 1px 2px 3px 4px;

也就是说，当只写一个值时，代表同时为4个边设置同样的边距。

当写两个值时，第一个值代表上下边距，第二个值代表左右边距。

当同时写了4个值时，分别代表上、右、下、左四个边距，也就是从上开始，顺时针的顺序。