CSS常用位置样式

版权声明： https://blog.csdn.net/niuch1029291561/article/details/84646988

CSS margin 属性

例子 1
margin:10px 5px 15px 20px;

• 上外边距是 10px
• 右外边距是 5px
• 下外边距是 15px
• 左外边距是 20px

例子 2
margin:10px 5px 15px;

• 上外边距是 10px
• 右外边距和左外边距是 5px
• 下外边距是 15px

例子 3
margin:10px 5px;

• 上外边距和下外边距是 10px
• 右外边距和左外边距是 5px

例子 4
margin:10px;

• 所有 4 个外边距都是 10px

margin-left: 0;

margin-bottom: -32px;

float

float: right;

可能的值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

CSS3 border-radius 属性

向 div 元素添加圆角边框：

div
{
border:2px solid;
border-radius:25px;
}

border-radius:2em;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

样式优先级

.backgroup{
    background: rgb(241, 248, 252) !important;
}

CSS padding 属性

设置元素的 4 个内边距：

p{padding:2cm 4cm 3cm 4cm;
}

单边内边距属性

也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

• padding-top
• padding-right
• padding-bottom
• padding-left

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

例子 1
padding:10px 5px 15px 20px;

• 上内边距是 10px
• 右内边距是 5px
• 下内边距是 15px
• 左内边距是 20px

例子 2
padding:10px 5px 15px;

• 上内边距是 10px
• 右内边距和左内边距是 5px
• 下内边距是 15px

例子 3
padding:10px 5px;

• 上内边距和下内边距是 10px
• 右内边距和左内边距是 5px

例子 4
padding:10px;

• 所有 4 个内边距都是 10px