加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 电商 > 正文

CSS margin全面了解

发布时间:2020-03-15 22:55:57 所属栏目:电商 来源:站长网
导读:副标题#e# 一、margin可以为负值 在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。 关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM
副标题[/!--empirenews.page--]

一、margin可以为负值

在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。

关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM结构的流体布局。

此demo与CSS float浅析篇中的是同一个。

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>  

<html>  

    <head>  

        <meta charset="utf-8">  

        <title>不改变DOM结构的流体布局</title>  

        <style>  

            .container {   

                width:600px;   

                margin-left: auto;   

                margin-right: auto;   

                background-color: orange;   

                font-size: 16px;   

                line-height: 1.5;   

            }   

  

            .box1 {   

                width:100%;   

                float:left;   

            }   

  

            .box2 {   

                margin-right: 220px;   

                padding-left: 20px;   

            }   

  

            img {   

                width:200px;   

                float:left;   

                margin-left:-200px;   

            }   

  

            .clearfix:after {   

                content: "";   

                display: table;   

                clear: both;   

            }   

  

            .clearfix {   

                *zoom: 1;   

            }   

  

        </style>  

    </head>  

    <body>  

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读