HTML学习笔记（二）

HTML学习笔记（二）

23.选择特定的盒子：

/偶数div //.msg2,.msg4{
}/

.msg div: nth-child(2n){
background-color: green;
}

/*奇数div| */
.msg div:nth-child(2n-1){
background-coLor: aqua;
}

24.IE浏览器图片默认边框
img{
border:0;
}
用来处理IE10及其以下版本浏览器的兼容

25.透明属性IE兼容

.box{
width: 200px;
height: 200px;
background: red;
opacity: 0.5;
filter: alpha(opacity=50); /取值区间0-100，针对IE8及其以下版本浏览器的兼容写法/
}

26.图片的经验写法:
图片在左，内容在右，给图片添加浮动解决间隙问题;
图片在上，内容在下，给图片添加display : block;解决间隙问题。

27.弹性盒的对齐方式：
flex-wrap: wrap;=换行
1.设置主轴的方向:flex-direction
row=横向

row-reverse===反着的横向

column====纵向

column-reverse===反着的纵向

2.设置子元素在主轴上的对齐方式: justify-content
flex-start====在主轴的起点

flex-end===在主轴的终点

center===在主轴的中间

space-between===两端对齐，中间间距自动分配

space-around===中间元素的间距是贴边元素间距的2倍

space-evenly====元素的间距—致

3.设置子元素在侧轴上的对齐方式: align-items
flex-start===在侧轴的起点

flex-end===在侧]轴的终点

center===在侧轴的中间

baseline===基线对齐

strench===拉伸 == 要想看到拉伸的效果，子元素就不能设置宽度或者高度。

如果侧轴在纵向，就不定高度
                                如果侧|轴在横向，就不定宽度

4.多行的对齐方式：align-content
flex-start====全都放在起点，行与行没有间距

flex-end====全部放在终点，行与行没有间距

center====全部放在中间，行与行没有间距

space-between===第一行和最后一行贴边，中间行间距自动分配

space-around=====中间行间距是贴边行间距的2倍

如果实在不知道该用那个，就打开页面右键-【检查】-【元素】，用箭头选中你设置了弹性盒子的元素，下面就会出现：（如图所示）根据自己的需求调整即可。

子元素的宽是父元素的三分之一：

width:calc(100% / 3);

28. 三栏布局：
    三栏布局(双飞翼布局、圣杯布局)：左边固定宽，右边固定宽，中间宽度自适 应
    实现方案：
    1.利用BFC特性，左边盒子给宽和浮动，右边盒子也给宽和浮动，中间
    盒子不给宽，给overflow:hidden;（需要将中间的盒子和右边的盒子
    换位置）;
    2.利用float的特点，左边盒子给宽和浮动，右边盒子也给宽和浮动，
    中间盒子不给宽，给margin-left和margin-right;（需要将中间的盒
    子和右边的盒子换位置）;
    3.利用定位，左边盒子给宽和定位，右边盒子也给宽和定位，中间盒子
    不给宽，给margin-left和margin-right;（不需要换位置）
    4.利用弹性盒，给三个盒子添加父元素，给父元素添加display:flex;
    给中间宽度自适应的盒子添加flex:1;
    5.利用calc()函数特性，左边盒子给宽和浮动，右边盒子也给宽和浮动
    ，中间盒子给宽(calc(100% - 左宽 - 右宽))和浮动。