|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。 l+ l& t4 x- b" i
1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
8 b. R+ X( s( y" B
9 `1 l7 W$ x7 G3 G) S; j2、第二行只有中间图片的最有边距是5px;布局如下：3 y# |8 r5 ^1 }" r3 ^
6 f, h/ [/ |4 a& O* L. [, S注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
; k5 S$ V9 }+ \5 e 二、使用display:inline-block: B" s: |/ N8 f- L: m/ M
display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float' z8 R+ O2 j. |2 m f) R
; ~% @6 I, W) l1 n红框中的布局就是使用display:inline-block最经典的布局。
' h, ]6 z: ]% g9 p5 o, z! O2 P% [ 6 S, c* y9 F' F: e2 V" k) j
此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。2 u0 S7 A: N& j4 \7 ^9 d h, M O
此出还有一个经典的布局：, [9 t) o- E; t' A; F3 L1 X; U
* h! A9 ~2 d1 D3 M- S
这种布局一般是：7 j/ I& G, B- J" x3 o3 x
<div>2 M* u- Q' p4 g9 }
<img src="" alt="">
: A& L% Y# i& F <p>
# l7 a! J8 k. C/ H: { 测试勿拍. x# S/ ~$ E. |; m+ w
</p>
. Y9 l, Q: n& m) n* f</div>$ }9 ?2 h# L' y5 W
使用定位position:absolute常用于左边固定，右边自适应的情况。/ c; e, x8 Y; D. Y7 K2 e, ?
1. 对div进行相对定位
1 W5 M. @; x: G* @0 C! t 2. 对img进行绝对定位1 S5 Y/ S7 ~* l# f
3. p进行相对定位
; A* c+ ?# W* D- M! V 注：固定宽度列的高度>自适应宽度列？- q P* y$ C; }( i, r: d
三、使用flexible box实现 真正意义上的流体布局
/ k- _% l; z" t2 O5 P6 w 这种方法本人还没有真正在实际操作中体验过，此处先记录下来~. P9 m* D% o" T# V/ N
: m: [ [: A7 V' A0 u) o" L9 u
" m# T0 x% B& s+ G7 x) j' }来源：博客园: v- ]6 A/ K2 d5 R/ ?5 v! A
|
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2017-8-8 14:39:53
, Z; r& O, o9 q3 `
+ c+ I# e0 q0 N |6 p( u' B, R
8 P9 ~% `6 d7 b( ^
( a: Z# S5 b# b# d$ ]
置顶卡
千斤顶
显身卡