前端学习笔记(四)-负边距与对齐

最新推荐文章于 2024-08-13 14:14:49 发布

weixin_34162401

最新推荐文章于 2024-08-13 14:14:49 发布

阅读量107

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5cc917c5e51d456e4c4c00a9

版权

负边距

负边距原理

The Definitive Guide to Using Negative Margins

margin为负值产生的影响和常见布局应用

负边距的一些注意事项

负边距是W3C标准支持的
负边距不是黑魔法
负边距并没有破坏文档流，因此使用margin-top的负边距，后续元素将上移
兼容性非常好(包括IE6)
当元素使用浮动时，负边距所造成的行为会不同

负边距作用于静态元素

当元素没有使用浮动属性时，负边距造成的行为如图所示

top和left方向的负边距会导致元素朝相应方向移动
bottom和right方向的负边距不会导致元素移动，相反的，元素bottom和right方向的后继元素会移动进行覆盖
如果元素没有设定宽度width，那么left和right方向的负边距会朝相应方向增加元素的宽度。在这里负边距的行为像padding

负边距作用于浮动元素 TODO

负边距的应用

圣杯布局和双飞翼布局
等分布局(两边对齐，中间元素平均分布)
- 子元素设定相等的宽度width和相等的margin-right
- 父元素设定margin-right，具体数值需要计算

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            overflow:hidden;
            width: 50%;
            margin: 0 auto;
            border: 1px solid black;
        }
        ul {
            list-style-type:none;
            margin:0;
            padding:0;
            margin-right:-2%;
        }
        li {
            width:18%;
            height:92px;
            float:left;
            background-color:#ccc;
            margin-right:2%;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="list">
            <li>我是一个列表</li>
            <li>我是一个列表</li>
            <li>我是一个列表</li>
            <li>我是一个列表</li>
            <li>我是一个列表</li>
            <li>我是一个列表</li>
            <li>我是一个列表</li>
            <li>我是一个列表</li>
            <li>我是一个列表</li>
            <li>我是一个列表</li>
        </ul>
    </div>
</body>
</html>
复制代码

两列高度自适应布局

HTML

    <div class="parent">
        <div class="left">
            left
        </div>
        <div class="right">
            right<br>
          right
        </div>
    </div>
复制代码

CSS

    .parent {
      overflow:hidden;
    }
    .left {
      float:left;
      width:200px;
      background-color: #5c6;
      margin-bottom:-1000px;
      padding-bottom:1000px;
    }
    .right {
      overflow:hidden;
      background-color: #5f5;
    }
复制代码

要点：

父标签overflow：hidden
margin-bottom大负值，padding-bottom设置对应数值的正值。

对齐

参考资料：Centering in CSS: A Complete Guide

水平居中

行内元素的水平居中：父元素中设置text-align:center实现
定宽块级元素：左右margin设置为auto实现
多个块级元素：
- 利用inline-block实现，父元素设置text-align:center。由于inline-block使得元素成为inline对象，元素的内容作为block，所以text-align对元素有效果
- 利用flex实现

垂直居中

inline或inline-*元素

单行：
- padding上下相等
- 设定line-height等于height
多行：
- padding上下相等
- 父元素display:table;子元素display:table-cell和vertical-align:middle
使用flex

父容器高度给定

使用伪元素，伪元素和居中元素都使用display:inline-block，并通过vertical-align:middle实现垂直居中

        .ghost-center {
          position: relative;
        }
        .ghost-center::before {
          content: " ";
          display: inline-block;
          height: 100%;
          width: 1%;
          vertical-align: middle;
        }
        .ghost-center p {
          display: inline-block;
          vertical-align: middle;
        }
复制代码

block块级元素
- 元素定高：父相子绝，利用top:50%和margin-top:-(元素高度)实现
- 元素不定高：父相子绝，利用top:50%和transform: translateY(-50%)实现
- 使用flex

水平垂直居中

元素定宽定高：父相子绝，利用top:50%;left:50%和margin-top:-(元素高度);margin-left:-(元素宽度)实现
元素不定宽不定高：父相子绝，利用top:50%;left:50%和transform:translate(-50%,-50%)实现
使用flex
使用grid

补充资料：CSS布局(六) 对齐方式

转载于:https://juejin.im/post/5cc917c5e51d456e4c4c00a9

weixin_34162401

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记(四)-负边距与对齐

负边距负边距原理The Definitive Guide to Using Negative Margins margin为负值产生的影响和常见布局应用负边距的一些注意事项负边距是W3C标准支持的负边距不是黑魔法负边距并没有破坏文档流，因此使用margin-top的负边距，后续元素将上移兼容性非常好(包括IE6)当元素使用浮动时，负边距所造成的行为会不同负边距作用于静态元素...
复制链接

扫一扫