css/css3

css

1.css中px/em/rem的区别

1em=16px;12px=0.75em;10px=0.625em

• em的特点:em值不固定,em会继承父级元素的字体大小.使用em注意body中申明font-size=62.5%;

2.css设置图像大小(background-size)

background-size有两个关键属性:contain/cover

• 图像由<img src="">引入

<img src="/i/eg_mouse.jpg" >
<img src="/i/eg_mouse.jpg" width="30" heignht="30" >
<img src="/i/eg_mouse.jpg" width="30" >
<img src="/i/eg_mouse.jpg" height="30" >

显示的尺寸依次:
1: 宽54px ,高49px(既,原图)
2: 宽30px, 高30px
3: 宽30px, 高30/(54/49)=27.22px
4:宽30*(54/49)=33.06px,高 30px

• 图像由\background-image引入

<style type="text/css">
    .img{
    display:"inlinne-block";
    background-color:#eee;
    background-img:url('/i/eg_mouse.jpg')
    background-repeat:no-repeat;
    background-size:auto;
    }
</style>
<span class="img" style="width:100px;height:100px;"></span>
<span class="img" style="width:30px;height:30px;"></span>
<span class="img" style="width:30px;height:30px;background-size:10px 10px;"></span>
<span class="img" style="width:300px;height:30px;background-size:conntain;"></span>
<span class="img" style="width:100px;height:100px;background-size:cover"></span>

显示的尺寸依次:
1: 宽54px ,高49px(既,原图)
2: 宽54px, 高49px
3: 宽10px, 高10px
4:宽30px,高 27.22px
5:宽100px,高 100px

3Flex 布局 弹性布局

• 6个属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

1.flex-direction属性决定主轴的方向（排列方向）。

.box{
flex-direction: row | row-reverse | column | column-reverse;
}

a:row（默认值）：主轴为水平方向，起点在左端。
b:row-reverse：主轴为水平方向，起点在右端。
c:column：主轴为垂直方向，起点在上沿。
d:column-reverse：主轴为垂直方向，起点在下沿。

2.flex-wrap属性,如果一条轴线排不下，如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

a:nowrap(默认值):不换行。
b:wrap：换行，第一行在上方。
c:wrap-reverse：换行，第一行在下方。

3.flex-flow:flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

4.justify-content属性,主轴上的对齐

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

a:flex-start（默认值）：左对齐。
b:flex-end：右对齐。
c:center： 居中。
d:space-between：两端对齐，项目之间的间隔都相等。
e:space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5align-items属性,align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

a:flex-start：交叉轴的起点对齐。
b:flex-end：交叉轴的终点对齐。
c:center：交叉轴的中点对齐。
d:baseline: 项目的第一行文字的基线对齐。
e:stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6 align-content属性:align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

a:flex-start：与交叉轴的起点对齐。
b:flex-end：与交叉轴的终点对齐。
c:center：与交叉轴的中点对齐。
d:space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
e:space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
f:stretch（默认值）：轴线占满整个交叉轴。