-
控制 margin 重疊
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap{
}
.a{
background: green;
color: white;
margin: 30px;
-webkit-margin-collapse: separate;
}
.b{
background: deepskyblue;
color: white;
margin: 50px;
-webkit-margin-collapse: separate;
}
</style>
</head>
<body>
<div class="wrap">
<div class="a">margin:30px</div>
<div class="b">margin:50px</div>
</div>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
background: rgba(0,255,255,0.25);
direction: rtl;
}
img{
width: 150px;
margin-left: 100px;
-moz-margin-start: 100px;
-webkit-margin-start: 100px;
margin-start:100px;
}
</style>
</head>
<body>
<div class="box">
<img src="img/img.jpg"></img>X
</div>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div >
<p >圖片右浮動,【俄羅斯總統(tǒng)普京當面向習(xí)近平主席祝賀生日】俄羅斯塔斯社、俄新社6月15日上午報道稱，據(jù)俄總統(tǒng)新聞秘書佩斯科夫介紹，俄總統(tǒng)普京今天上午在杜尚別出席亞信第五次峰會前親自前往中國國家主席習(xí)近平下榻賓館，當面向習(xí)主席祝賀66歲生日。普京高度評價習(xí)主席在俄中關(guān)系發(fā)展中發(fā)揮的重要作用，強調(diào)不久前習(xí)主席對俄進行國事訪問取得圓滿成功，相信俄中關(guān)系將繼續(xù)保持良好發(fā)展勢頭。習(xí)主席對普京表示感謝，指出普京在中國很受歡迎。普京總統(tǒng)向習(xí)主席贈送俄羅斯冰淇淋，習(xí)主席回贈中國茶葉。</p>
</div>
<img src="img/img.jpg" width="150px" >
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
overflow: hidden;
resize: vertical;
}
.box >div{
width: 200px;
text-align: center;
margin-bottom: -600px;
padding-bottom: 600px;
}
.child-orange{
float:left;
background: orange;
}
.child-green{
float: left;
background:green;
}
</style>
</head>
<body>
<div class="box">
<div class="child-orange">
<div>左黃</div>
<div>左黃</div>
</div>
<div class="child-green">
<div>右綠</div>
</div>
</div>
</body>
</html>
查看全部 -
margin：auto用法：
塊級元素水平居中（內(nèi)聯(lián)元素不可）
write-mode:vertical-lr 垂直居中
絕對定位 top:0;right:0;bottom:0;left:0;margin:auto
查看全部 -
margin負值應(yīng)用場景：
容器設(shè)置負值改變大小
margin負值padding正值等高布局（不是很懂）
內(nèi)容設(shè)置負值改變位置
查看全部 -
margin 無效場景：
非替換元素正常書寫模式下垂直方向無效
margin重疊
display為table相關(guān)類型（除table-caption table inline-table）
絕對定位元素與正常流分開
float元素與正常流分開
內(nèi)聯(lián)特性導(dǎo)致margin無效，基線問題
查看全部 -
margin查看全部
-
兩欄自適應(yīng)布局
查看全部 -
margin負值解決兩端對齊
查看全部 -
父子元素重疊條件
查看全部 -
寬高2：1自適應(yīng)矩形
查看全部 -
一側(cè)定寬自適應(yīng)布局
查看全部 -
空block元素margin重疊
查看全部
舉報