CSS Manual

MyFreeIT

已于 2023-09-19 16:44:29 修改

阅读量77

点赞数

分类专栏：前端文章标签： css 前端

于 2023-06-05 01:42:46 首次发布

创作源自于MyFreeIT

本文链接：https://blog.csdn.net/MyFreeIT/article/details/131039941

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的margin属性用于div的居中和靠边方法，包括使用flex布局和margin自动填充。同时讲解了div创建浮层的方法，通过position属性和z-index控制层级。还提到了list-style-type属性，用于设置列表的不同显示样式。

摘要由CSDN通过智能技术生成

CSS Manual

margin

margin标记可以带一个、二个、三个、四个参数

margin: 20px;（上、下、左、右各20px。）
margin: 20px 40px;（上、下20px；左、右40px。）
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）

此处不推荐使用上述四个标志，因为在不同浏览器对于margin的四个边都有不同的命名

div 居中

flex + align-item

  display: flex;
  flex-direction:row;
  align-items: center;

margin+auto

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:auto;

或者
通过margin居中，上层必须是一行，也就是flex

+ ```css margin: 0 auto; 上下边距是0 或者其它都没有关系 ```

div 靠右边

左边的margin 必须是auto，同理上下

 display: flex;
  margin:0px 0px 0px auto;

div浮层

position:absolute;
或者
position:relative;
z-index: 999;
设置浮层级别，越大越靠近屏幕

position:relative; 不可以设置浮层

CSS

list-style-type

设置不同的列表样式ul，例如：

<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ul.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>