CSS margin全面了解

发布时间：2020-03-15 14:09 所属栏目：52 来源：站长网

导读：副标题#e# 一、margin可以为负值在盒模型中，内容区的width/height、padding、border都不能为负值，但是margin例外，它可以为负值。关于margin负值的使用技巧，了解不多，日后有机会再补充，此处先贴一个经典应用，margin-left负值结合浮动实现不改变DOM

一、margin可以为负值

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<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>

（编辑：ASP站长网）