精华内容
下载资源
问答
  • CSS外边距合并代码

    2021-08-05 01:58:57
    我习惯把 图中所示的margin边界称为外边距,padding填充部分称之为内边距。设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好 办法就是设置padding了。设置内边距没什么好说的,设置的值是多少就是...

    请看下面的图,就对边距的理解很清晰了。

    我习惯把 图中所示的margin边界称为外边距,padding填充部分称之为内边距。设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好 办法就是设置padding了。设置内边距没什么好说的,设置的值是多少就是多少,不会出现什么异常,即浏览器的兼容性方面,但外边距就不一样了。

    设置外边距,首先想到的是应该是双边距的问题。如果设这边距的这个元素同时设置了浮 动,那么浮动的这个方向如果有margin值的话,那么在ie6里面的实际距离是设置值的双倍。要解决这个问题不复杂,只要给这个元素加个 display:inline属性即可,但不建议这么做,因为这无形中增加了代码的质量,带宽很贵的哦,最好的办法就是在浮动的方向不设置margin 值,因为这个可以用其他的方法实现的,比如padding,或者设置在父层节点的style。

    在一个问题就是垂直双编剧的合并问题。当两个垂直的双边距相遇时,它们将形成一个边距,合并后的边距等于发生合并的边距的较大值。

    复制代码代码如下:

    *{padding:0;margin:0;}

    .box{width:200px;height:120px;margin:0 auto;background:#FFC;}

    .d1,.d2{height:40px;width:100%;overflow:hidden;}

    .d1{background:#f00;margin-bottom:20px;}

    .d2{background:#0033CC;margin-top:10px;}

    看到这样的代码,顺着代码的思维看,这段代码的效果应该是d1模块和d2模块有个间距,间距值是d1的margin-bottom的20和d2的margin-top的10相加的和,但其实不然。看一下效果图吧。

    实际两个模块的间距是20,这就是垂直双编剧的合并问题了。有时候遇到这样的情况不知所然,不知怎么回事,后来才知道了垂直双边距。知道了问题 的根源,那么解决这个问题的最好办法就是避免这个问题的出现了。我是这么做的,比较懒惰的作法,不过绝对有效哈。

    还有一个很不人性化的规范,就是一 个盒子,即一个模块如果没有上边距(margin-top)或者上边框(border-top),那么这个盒子的上边距会和这个盒子的第一个子元素的上边 距重合。不说什么了,把代码和效果贴上,直观,易理解。知道了问题所在就知道了怎么避免问题的出现了。

    复制代码代码如下:

    *{padding:0;margin:0;}

    .box{width:200px;height:120px;margin:0 auto;background:#FFC;}

    .d1,.d2{height:40px;width:100%;margin-top:10px;overflow:hidden;}

    .d1{background:#f00;}

    .d2{background:#0033CC;}

    我想和老不死的分家我想和老不死的分家

    我对这些的理解都是基于css中的盒子模型,不知道大家有没关注过,我会在后来博文中补上盒子模型这一点,希望大家关注。第一次写博客,感觉有点不习惯,我会坚持,提高自己的文字水平,努力让自己有一个提高,同时也能将我的观点和大家分享。 ad51e517755f8fd6a7ec83ced4ecfaf3.png

    展开全文
  • CSS 外边距

    2021-04-28 08:36:49
    CSS 外边距围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。CSS margin 属性设置外边距...

    CSS 外边距

    围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

    设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。

    CSS margin 属性

    设置外边距的最简单的方法就是使用 margin 属性。

    margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。

    margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白:

    h1 {margin : 0.25in;}

    下面的例子为 h1 元素的四个边分别定义了不同的外边距,所使用的长度单位是像素 (px):

    h1 {margin : 10px 0px 15px 5px;}

    与内边距的设置相同,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的:

    margin: top right bottom left

    另外,还可以为 margin 设置一个百分比数值:

    p {margin : 10%;}

    百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

    margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。

    值复制

    还记得吗?我们曾经在前两节中提到过值复制。下面我们为您讲解如何使用值复制。

    有时,我们会输入一些重复的值:

    p {margin: 0.5em 1em 0.5em 1em;}

    通过值复制,您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的:

    p {margin: 0.5em 1em;}

    这两个值可以取代前面 4 个值。这是如何做到的呢?CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:

    如果缺少左外边距的值,则使用右外边距的值。

    如果缺少下外边距的值,则使用上外边距的值。

    如果缺少右外边距的值,则使用上外边距的值。

    下图提供了更直观的方法来了解这一点:

    dad46691307581cb2f580ee3bbefc00e.gif

    换句话说,如果为外边距指定了 3 个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第 1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。

    利用这个简单的机制,您只需指定必要的值,而不必全部都应用 4 个值,例如:

    h1 {margin: 0.25em 1em 0.5em;}/* 等价于 0.25em 1em 0.5em 1em */

    h2 {margin: 0.5em 1em;}/* 等价于 0.5em 1em 0.5em 1em */

    p {margin: 1px;}/* 等价于 1px 1px 1px 1px */

    这种办法有一个小缺点,您最后肯定会遇到这个问题。假设希望把 p 元素的上外边距和左外边距设置为 20 像素,下外边距和右外边距设置为 30 像素。在这种情况下,必须写作:

    p {margin: 20px 30px 30px 20px;}

    这样才能得到您想要的结果。遗憾的是,在这种情况下,所需值的个数没有办法更少了。

    再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是 auto(左外边距是 20px):

    p {margin: auto auto auto 20px;}

    同样的,这样才能得到你想要的效果。问题在于,键入这些 auto 有些麻烦。如果您只是希望控制元素单边上的外边距,请使用单边外边距属性。

    单边外边距属性

    您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin(需要键入很多 auto),而是可以采用以下方法:

    p {margin-left: 20px;}

    您可以使用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其他外边距:

    一个规则中可以使用多个这种单边属性,例如:

    h2 {

    margin-top: 20px;

    margin-right: 30px;

    margin-bottom: 30px;

    margin-left: 20px;

    }

    当然,对于这种情况,使用 margin 可能更容易一些:

    p {margin: 20px 30px 30px 20px;}

    不论使用单边属性还是使用 margin,得到的结果都一样。一般来说,如果希望为多个边设置外边距,使用 margin 会更容易一些。不过,从文档显示的角度看,实际上使用哪种方法都不重要,所以应该选择对自己来说更容易的一种方法。

    提示和注释

    提示:Netscape 和 IE 对 body 标签定义的默认边距(margin)值是 8px。而 Opera 不是这样。相反地,Opera 将内部填充(padding)的默认值定义为 8px,因此如果希望对整个网站的边缘部分进行调整,并将之正确显示于 Opera 中,那么必须对 body 的 padding 进行自定义。

    9e621263d8d9c66b640f3341ac9632b6.gifCSS 外边距实例

    设置文本的左外边距

    本例演示如何设置文本的左外边距。

    设置文本的右外边距

    本例演示如何设置文本的右外边距。

    设置文本的上外边距

    本例演示如何设置文本的上外边距。

    设置文本的下外边距

    本例演示如何设置文本的下外边距。

    所有的外边距属性在一个声明中。

    本例演示如何将所有的外边距属性设置于一个声明中。

    CSS 外边距属性

    属性

    描述

    简写属性。在一个声明中设置所有外边距属性。

    设置元素的上外边距。

    展开全文
  • HTML连载38-内边距属性、外边距属性一、内边距属性1.定义:边框和内容之间的距离就是内边距2.分开写padding-top:数字px;padding-left:数字px;padding-bottom:数字px;padding-right:数字px;3.连写:padding:上 ...

    HTML连载38-内边距属性、外边距属性

    一、内边距属性

    1.定义:边框和内容之间的距离就是内边距

    2.分开写

    padding-top:数字px;

    padding-left:数字px;

    padding-bottom:数字px;

    padding-right:数字px;

    3.连写:

    padding:上 右 下 左;

    4.注意点:

    (1)给标签设置内边距之后,标签占有的宽度和高度会发生变化

    (2)内边距也会有背景颜色

    div{

    font-size: 25px;

    width:100px;

    height: 100px;

    border: 1px solid red;

    background-color: green;

    }

    .box1{

    padding-top:20px;

    }

    .box2{

    padding-left: 30px;

    }

    .box3{

    padding-bottom: 40px;

    }

    .box4{

    padding-right:50px;

    }

    .box5{

    padding:40px 60px 70px 80px;

    }

    我是段落一
    我是段落二
    我是段落三
    我是段落四
    我是段落五

    545ca6d0d2e446d22100758c69cc3b96.png

    二、外边距属性

    1.定义:标签与标签之间的距离就是外边距

    2.分开写:

    margin-top:数值px;

    margin-left:数值px;

    margin-bottom:数值px;

    margin-left:数值px;

    3.一起写

    margin:上 左 下 右;

    4.例子

    span{

    width: 100px;

    height:100px;

    background-color: red;

    margin:50px;

    border:2px solid black;

    }

    .box1{

    margin-top:20px;

    }

    .box2{

    margin-left:30px;

    }

    .box3{

    margin-bottom: 40px;

    }

    .box4{

    margin-rigth:50px;

    }

    .box5{

    margin:60px 70px 80px 90px;

    }

    我是span我是span我是span我是span我是span

    ?

    99a145cc2656d041d4d439407b603df5.png

    5.注意点:外边距的那一部分是没有背景颜色的。

    展开全文
  • 正如标题状态 - 我想设置对话框的外缘:与上面的代码Android - 如何设置对话框的外边距PurchaseDetailsDialogFragmentpublic class PurchaseDetailsDialogFragment extends DialogFragment {private static fi...

    我知道这个问题已经被问了几次,但没有一个我遇到的解决方案为我工作,因此这个话题。正如标题状态 - 我想设置对话框的外缘:与上面的代码Android - 如何设置对话框的外边距

    PurchaseDetailsDialogFragment

    public class PurchaseDetailsDialogFragment extends DialogFragment {

    private static final String MAX_AMOUNT = "maxAmount";

    private static final String UNIT_PRICE = "unitPrice";

    private static final String PICKUP_TIME_FROM = "pickupTimeFrom";

    private static final String PICKUP_TIME_TO = "pickupTimeTo";

    public PurchaseDetailsDialogFragment() { }

    public static PurchaseDetailsDialogFragment newInstance(int maxAmount, float unitPrice, String pickupTimeFrom, String pickupTimeTo) {

    PurchaseDetailsDialogFragment fragment = new PurchaseDetailsDialogFragment();

    Bundle args = new Bundle();

    args.putInt(MAX_AMOUNT, maxAmount);

    args.putFloat(UNIT_PRICE, unitPrice);

    args.putString(PICKUP_TIME_FROM, pickupTimeFrom);

    args.putString(PICKUP_TIME_TO, pickupTimeTo);

    fragment.setArguments(args);

    return fragment;

    }

    @Override

    public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    if (getArguments() != null) {

    int maxAmount = getArguments().getInt(MAX_AMOUNT);

    float unitPrice = getArguments().getFloat(UNIT_PRICE);

    String pickupFrom = getArguments().getString(PICKUP_TIME_FROM);

    String pickupTo = getArguments().getString(PICKUP_TIME_TO);

    }

    }

    @Override

    public Dialog onCreateDialog(Bundle savedInstanceState) {

    Context context = getContext();

    FragmentPurchaseDetailsDialogBinding binding = DataBindingUtil.inflate(

    LayoutInflater.from(context),

    R.layout.fragment_purchase_details_dialog,

    null,

    false);

    binding.setDataContext(new PurchaseDetailsViewModel(context));

    AlertDialog dialog = new AlertDialog.Builder(getActivity(), R.style.DialogTheme)

    .setView(binding.getRoot())

    .create();

    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

    return dialog;

    }

    }

    fragment_purchase_details_dialog

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:background="@drawable/dialog">

    name="dataContext"

    type="com.myapp.viewModels.PurchaseDetailsViewModel" />

    android:layout_width="wrap_content"

    android:layout_height="wrap_content">

    android:layout_width="wrap_content"

    android:layout_height="80dp"

    android:paddingTop="20dp"

    android:layout_centerHorizontal="true"

    android:background="@color/white">

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="@string/choose_amount"

    style="@style/Widget.App.PurchaseTextViewTitle" />

    android:id="@+id/dialogCentralContent"

    android:layout_width="match_parent"

    android:layout_height="200dp"

    android:orientation="vertical"

    android:layout_marginTop="80dp"

    android:background="@color/dirtyWhite">

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="74" />

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:orientation="horizontal"

    android:layout_marginTop="46dp"

    android:layout_centerHorizontal="true">

    android:layout_width="44dp"

    android:layout_height="44dp"

    android:layout_marginTop="6dp"

    android:background="@drawable/button_filled"

    android:text="-"

    style="@style/Widget.App.PurchaseIncDecButton" />

    android:layout_width="60dp"

    android:layout_height="60dp"

    android:layout_marginLeft="8dp"

    android:layout_marginRight="8dp"

    android:background="@drawable/edittext_white_rounded">

    android:layout_width="30dp"

    android:layout_height="match_parent"

    android:layout_marginLeft="15dp"

    android:gravity="center_horizontal"

    android:maxLines="1"

    style="@style/Widget.App.PurchaseAmountEditText" />

    android:layout_width="44dp"

    android:layout_height="44dp"

    android:layout_marginTop="6dp"

    android:background="@drawable/button_filled"

    android:text="+"

    style="@style/Widget.App.PurchaseIncDecButton" />

    android:layout_width="match_parent"

    android:layout_height="50dp"

    android:layout_below="@+id/dialogCentralContent"

    android:text="@string/buttonBuyText"

    android:background="@drawable/button_submit"

    style="@style/Widget.App.SubmitButton" />

    目前止,我的对话占据了整个宽度的屏幕。如果我然而做到这一点,在片段java代码:

    AlertDialog dialog = new AlertDialog.Builder(getActivity(), R.style.DialogTheme) /// the rest of the code

    ,并添加一个主题:

    380dp

    380dp

    然后一些时髦的事情发生。在API23上看起来都不错,而在API19及以下版本(没有在19和23之间检查apis),对话框是100%宽,并且与屏幕顶部对齐。如何让它按照我喜欢的方式工作?

    2016-09-21

    Marek M.

    +0

    你可以尝试创建低于19 API级别的资源文件,以更改对话框 –

    +0

    我意识到的宽度,但也许有一些通用的解决方案,只是到处工作?另外 - 为什么它的行为就像API19

    +0

    我不是100%确定的,但我相信材料设计被添加到api level 21上,所以它可能无法找到Theme.Material.Dialog.Alert作为父类并使用一些通用的东西?或者什么也没有 –

    展开全文
  • 外边距简写属性 margin

    2021-04-28 08:37:04
    浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号属性定义及使用说明margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。代码解析margin:10px 5px 15px 20px;n上边距是 10pxn右边距是 ...
  • 外边距的典型应用2.1 示例代码2.2 运行结果3. 外边距合并4.嵌套元素垂直外边距的塌陷5. 清除内外边距 1. 盒子模型之外边距 margin 2. 外边距的典型应用 2.1 示例代码 <!DOCTYPE html> <...
  • css怎么设置外边距

    2021-06-11 03:16:27
    css怎么设置外边距?下面本篇文章就来给大家介绍一下使用CSS设置外边距的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。在CSS中,可以使用margin属性及其相关属性来设置外边距。margin...
  • 九十年代的完全用表格布局,简单的段落边框都需要用表格。CSS让布局更方便。 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章... -------------------------------- 外边距vs内边距 margin vs padding
  • 外边距:边框于边框之间的距离。二、外边距marginMargin的特性margin始终是透明的。margin通过使用单独的属性,可以对上、右、下、左的外边距进行设置。即:margin-top、margin-right、margin-bottom、margin-left。...
  • 在学习css的时候,会css外边距这一概念,所以,css外边距是什么呢?边框以外就是外边距外边距默认是透明的,因此不会遮挡其后的任何元素,接下来本篇文章将来给大家介绍关于css外边距属性的相关内容。首先我们应该...
  • 外边距 html中div的外边距和内边距都是什么意思,怎么设html中div的外边距和内边距都是什么意思,怎么设置内边距padding的意思是: 边框与内容之间的距离。 外边距margin的意思是:边框与边框之间的距离。 拓展资料...
  • html5右边

    千次阅读 2020-12-20 02:44:27
    css知识margin和padding是什么意思margin外边距,padding内边距,外边距表示一个元素的边到相邻元素的距离,内边距表示元素之间的内容和元素边框的距离。font:12px/1.5 表示什么意思?其中12px/1.5表示:文字大小12...
  • 最近写项目过程中遇到一个CSS盒子模型中外边距...外边距折叠的概念:所谓外边距折叠就是相邻的两个或多个元素(含有子元素的情况)的外边距会在垂直方向上合并成一个一个外边距。CSS盒子模型中外边距(margin)折叠的常...
  • 如何设置盒子模型的外边距

    千次阅读 2021-06-13 01:00:54
    网页是由多个盒子排列而成的,要想拉开盒子与盒子之间的距离,合理地布局网页,就需要为盒子设置外边距。所谓外边距指的是标签边框与相邻标签之间的距离。在CSS中margin属性用于设置外边距,它是一个复合属性,与内...
  • 三种方法去除img标签自带外边距。 #img img{height: 100px;}#bottom{width: 100px;height: 100px;background-color: red;}页面效果:图1-img的高度是100px图2-父容器div的高度却是104px第一进触法位近行发识移近行发...
  • <!DOCTYPE html> <html lang="zn"> <head>...meta charset="UTF-8">...盒子模型-外边距</title> <style> .box1 { width: 200px; height: 200px; background-color: #bfa;
  • [摘要]CSS外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。不理解此规范的话,会在前端布局中出现异常问题,本文深入浅出学习此规范,并提供解决办法。不得不说前端是一个水很深的行业,虽然起点...
  • css上边怎么设置

    2021-08-05 04:34:38
    css设置上边距的方法:1、使用margin-top属性设置元素的上外边距;2、使用padding-top属性设置元素的上内边距。margin-top和padding-top属性接受任何长度单位,可以是像素、英寸、毫米或em。本教程操作环境:windows...
  • DIV CSS外边距指CSS属性单词margin,margin是设置对象四边的外延边距,没有背景颜色也无颜色。1、margin语法Margin:10pxMargin的值是数字+html单位,同时也可以为auto(自动、自适应)2、应用结构Div{margin:10px}设置...
  • 前言之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库(〃'▽'〃)),这一次需要动手排一个页面,也挺简单,但是遇到了一个奇怪的问题,所以学习记录一下。问题测试代码如下...
  • css怎么设置左边

    千次阅读 2021-06-11 06:35:35
    css设置左边距的方法:1、使用margin-left属性,可以设置元素的左外边距,语法格式“margin-left:边距值;”;2、使用padding-left属性,可以设置元素的左内边距,语法格式“padding-left:边距值;”。本教程操作环境...
  • css样式中的margin也就是css中外边距外间属性,顾名思义,就是控制div块或者各元素之间上下左右的距离,显然margin在css中的作用不容小觑。本篇文章就给新手小白介绍关于css margin属性的具体用法。希望对大家有所...
  • 学习 说明:字体 1.text1是使用textColor属性设置了字体颜色,textSize属性设置了字体大小3d 2.text2使用layout_margin设置组件的外边距,上下左右都是20dp,autoLink是为了让组件将超连接直接识别成地址 3.text3...
  • CSS 内边距与外边距

    2021-03-22 16:12:37
    这里就和大家分享一下:一、内边距如下面代码html:css:.test{width:100px;height:100px;background-color:#fbc;padding:10px 20px 30px 40px;}这时候在这个div中会形成一个内容框它里顶部边框距离为10px,右边20px,...
  • 解释什么是外边距塌陷和解决它的八种方法
  • CSS margin(外边距)属性定义元素周围的空间。CSS margin 属性接受任何长度单位、百分数值,甚至负值。Marginmargin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的。margin可以单独改变上、右、下...
  • 代码运行效果如下图: 2.3、margin属性值可以有四种形式: 三、内边距和外边距的区别 1、margin和padding都是盒模型(Box Model)的重要元素,二者都是用来处理与其他盒子的距离关系进行布局的。 2、形象的介绍,夏季...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,790
精华内容 13,116
关键字:

外边距代码