CSS基本布局16例

css基本布局16例

單行單列

#content /"";

voice-family:inherit;
width: 370px;
}html>body #content 

#content /"";

voice-family:inherit;
width: 370px;
}html>body #content 

#content /"";

voice-family:inherit;
width: 55%;
padding: 10px 9% 10px 11%;
}html>body #content /* ie5win fudge ends */

body 

#content /"";
voice-family:inherit;
width: 370px;
}html>body #content 

單行兩列

左邊

#content /"";

voice-family:inherit;
width: 270px;
}html>body #content 

右邊

#content2 /"";

voice-family:inherit;
width: 270px;
}html>body #content2 

左上

#content /"";

voice-family:inherit;
width: 41%;
}html>body #content 

右下

#content2 /"";

voice-family:inherit;
width: 41%;
}html>body #content2 

左

#content /"";

voice-family:inherit;
width: 46%;
}html>body #content 

右

#content2 /"";

voice-family:inherit;
width: 46%;
}html>body #content2 
/* opera5.02 shows a 2px gap between. 
n6.01win sometimes does. depends on amount 
of fill and window size and wind direction. */

左上

#content /"";

voice-family:inherit;
width: 46%;
}html>body #content 

右下

#content2 /"";

voice-family:inherit;
width: 46%;
}html>body #content2 /* opera5.02 shows a 2px gap between. 
n6.01win sometimes does. depends on amount of 
fill and window size and wind direction. */

#content /"";

voice-family:inherit;
width: 46%;
}html>body #content 

#content2 /"";

voice-family:inherit;
width: 46%;
}html>body #content2 

單行三列

#left /"";

voice-family:inherit;
width: 120px;
}html>body #left 
#middle 
#right /"";
voice-family:inherit;
width: 120px;
}html>body right 

#left /"";

voice-family:inherit;
width: 120px;
}html>body #left 
#middle 
body>#middle 
#right /"";
voice-family:inherit;
width: 120px;
}html>body #right 

#left /"";

voice-family:inherit;
width: 120px;
}html>body #left 
#middle 
#right /"";
voice-family:inherit;
width: 120px;
}html>body #right 

body 

#left /"";
voice-family:inherit;
width: 120px;
}html>body #left 
#middle 
#right /"";
voice-family:inherit;
width: 120px;
}html>body #right 

#left /"";

voice-family:inherit;
width: 170px;
}html>body #left 
#middle /"";
voice-family:inherit;
margin-top: 0px;
}html>body #middle 
#right /"";
voice-family:inherit;
width: 170px;
}html>body #right 

頂行三列

#top /"";

voice-family:inherit;
height: 70px;
}html>body #top 
#left /"";
voice-family:inherit;
width: 120px;
}html>body #left 
#middle 
#right /"";
voice-family:inherit;
width: 120px;
}html>body #right 

#top /"";

voice-family:inherit;
height: 80px;
}html>body #top 
#left /"";
voice-family:inherit;
width: 130px;
}html>body #left 
#middle 
#right /"";
voice-family:inherit;
width: 130px;
}html>body #right 

css基本布局

1.盒子 針對於塊元素來說 比如div,ul,li,h1等 基本屬性 外邊距 margin 當前盒子與其他元素的距離 margin top margin right margin bottom margin left 基本用法 margin 0 auto能讓塊級元素在父元素中居中顯示 margin ...

CSS基本布局 定位

css有三種基本的布局機制 標準流 浮動和定位。定位就是確定元素的位置，利用top right bottom left這四個偏移屬性，可以準確地定義元素框相對於其正常位置應該出現的位置。top的優先順序要高於bottom，left的優先順序要高於right 相對定位 相對於元素原有位置的定位。相對定...

16 （初級）CSS布局定位相關問題

方案一 在外層元素的底部新增乙個元素，並清除浮動。方案二 浮動外層元素，後續元素清除浮動。方案三 設定overflow hidden 方案四 設定偽元素 before after。以上結果 id a，z index 1000，由於id a為父元素，在最下面。三 visibility hidden與 ...