Open CommanderXL opened 5 years ago
由于项目要兼容到IE9,因此将之前flex布局全部给换掉。今天leader让我看了kitecss这个css框架(里面的一些布局方式能比较好的兼容IE8+,里面有一些比较好的栅格布局,垂直居中等方案)。然后具体的学习了里面的一些css技巧和方法,总结如下:
github地址
源码里面很多将父元素display属性设为display: table。这个时候再将子元素display属性设置为inline-block属性后,运用text-align属性即可进行水平居中,水平靠左,水平靠右。
display
display: table
inline-block
text-align
负margin的使用技巧和应用场景其实还是挺广泛的,比如使用float和负margin现实圣杯布局,双飞燕布局等等。
float
负margin
具体的使用技巧和参照文章: 由浅入深漫谈margin属性 不要告诉我你懂margin 我知道你不知道负margin
然后在kitecss里面的时候主要是运用在了栅格布局上面。
html结构: <div class="kite kite--grid has-gutter"> <div class="kite__item is-4of12"> <div class="fixture">.is-4of12</div> </div> <div class="kite__item is-4of12"> <div class="fixture">.is-4of12</div> </div> <div class="kite__item is-4of12"> <div class="fixture">.is-4of12</div> </div> </div> css: .kite { font-size: 0 !important; } .kite--grid.has-gutter { display: block; width: auto; margin-left: -10px; //左基线向左移动10px margin-right: -10px; //右基线向右移动10px } .kite_item { box-sizing: border-box; //一定要使用border-box属性(自己不熟悉的自行google) display: inline-block; //主要是为了好设置宽度 width: 33.3333%; //都是相对于父元素的33.3333%,即将父元素平均分成了3等份。 font-size: 1rem; vertical-align: top; //元素在水平线上的对齐方式 padding-left: 10px; //左内边距10px padding-right: 10px; //右内边距10px; }
看到图上左右2边的线条没,这其实就是父元素.kite--grid的左右边界 3个子元素的宽度都是33.333%,平均的3等份,但是设置padding-left和padding-right的值都为10px的时候,正好和左右负margin抵消,这样就是现实了3列等宽布局。
html结构: <div class="kite kite--position"> <div class="kit__item"> <div class="fixture">1</div> </div> </div> css: .kite--position { display: block; position: absolute; top: 0; //使用绝对定位也可以实现自适应哦~ right: 0; height: 150px; text-align: center;//子元素的display属性为inline-block,因此可以实现水平居中 font-size: 0; } .kite--position::after{ display: inline-block; content: ''; height: 100%; vertical-align: middle; } .kite__item { display: inline-block; font-size: 1rem; box-sizing: border-box; } .fixture { border: 1px solid #489; margin-bottom: 16px; min-height: 48px; background-color: rgba(108,200,220,0.75); }
css当中使用比较巧的是利用.kite--position的伪元素(content属性一定不能省,可以把值设为""),生成一个行内元素,其高度为100%,即为父元素的高度。同时,.kite--position的子元素也声明为行内元素,因此这个时候可以利用vertical-align属性进行垂直居中.
.kite--position
""
vertical-align
这个属性平时用的不多,看源码的时候看里面用的很普遍,它的用法和width:100%还是有点区别的。 比如遇到这种结构:
width:100%
<div class="parent"> <div class="child">123123</div> </div> .parent { position: absolute; left: 50px; top: 50px; width: 200px; height: 200px; border: 1px solid #e3e3e3; } .child { width: auto 或者 100%; //可以设置不同margin和padding看下效果 border: 1px solid #e3e3e3; }
一般块级元素如果不添加float或者绝对定位或者设定宽度的话,它的宽度默认为100%.这个宽度仅仅是内容的宽度,如果你再设置padding或者margin值,会保持width不变,会出现盒模型伸长或者移动位置的情况。
绝对定位
设定宽度
padding
margin
width
width = 内容
但是如果你设置为width: auto,它起到的作用实际上和申明box-sizing: border-box的一样。
width: auto
box-sizing: border-box
width = 内容 + padding + border;
你再怎么设置padding值和border值都是在width这个宽度里面进行设置。
border
可以到codepen上看看 codepen.io
由于项目要兼容到IE9,因此将之前flex布局全部给换掉。今天leader让我看了kitecss这个css框架(里面的一些布局方式能比较好的兼容IE8+,里面有一些比较好的栅格布局,垂直居中等方案)。然后具体的学习了里面的一些css技巧和方法,总结如下:
github地址
display:table
源码里面很多将父元素
display
属性设为display: table
。这个时候再将子元素display
属性设置为inline-block
属性后,运用text-align
属性即可进行水平居中,水平靠左,水平靠右。负margin
负margin的使用技巧和应用场景其实还是挺广泛的,比如使用
float
和负margin
现实圣杯布局,双飞燕布局等等。具体的使用技巧和参照文章: 由浅入深漫谈margin属性 不要告诉我你懂margin 我知道你不知道负margin
然后在kitecss里面的时候主要是运用在了栅格布局上面。
看到图上左右2边的线条没,这其实就是父元素.kite--grid的左右边界 3个子元素的宽度都是33.333%,平均的3等份,但是设置padding-left和padding-right的值都为10px的时候,正好和左右负margin抵消,这样就是现实了3列等宽布局。
垂直居中
css当中使用比较巧的是利用
.kite--position
的伪元素(content属性一定不能省,可以把值设为""
),生成一个行内元素,其高度为100%,即为父元素的高度。同时,.kite--position
的子元素也声明为行内元素,因此这个时候可以利用vertical-align
属性进行垂直居中.width:auto
这个属性平时用的不多,看源码的时候看里面用的很普遍,它的用法和
width:100%
还是有点区别的。 比如遇到这种结构:一般块级元素如果不添加
float
或者绝对定位
或者设定宽度
的话,它的宽度默认为100%.这个宽度仅仅是内容的宽度,如果你再设置padding
或者margin
值,会保持width
不变,会出现盒模型伸长或者移动位置的情况。但是如果你设置为
width: auto
,它起到的作用实际上和申明box-sizing: border-box
的一样。你再怎么设置
padding
值和border
值都是在width
这个宽度里面进行设置。可以到codepen上看看 codepen.io