html5 day11 第14集

错误：1.

            2.

1.写在a中，引用的标签图像有下划线，text-decoration：none去掉

2.把弹出框作为子元素

3.这种布局，可以对父框设置实际内容大小，再用padding撑开；

4.

5.对内容设置多张背景图，谁放在前面，谁就会出现在上面，谁在后面谁就在下面；对于定位的多张图片的效果相反；如：

6.用border写

7.border在帮助我们看时，也会站空间，会导致不准

8.当在一个html文件用iframe引入另一个页面，同时这两个页面引用一个css样式时，在css中写另一个样式，不受引入原页面的影响

3.

注意：可以对一个元素设置上、右边框，旋转；背景是透明的，要想覆盖，必须给他一个白色的背景 ；

当a划过时，出现

定义标签，样式是斜体的

让li里面的标签继承font-size

用的并不是另加一个div显示虚框，用的是透明背景

要想使这行文字yu'li

定位和float都会使任何元素产生块级框；

把img{display：block}

after内容不会显示，因为img主要是显示图片的，他会遮住里面的内容；

方法：

可以定位或浮动实现；

任何元素经过定位和浮动都会变成块元素；

p标签不能嵌套h标签，吧p变成div

所有加标签的方式都可用：before;:after;

两个行内块元素默认是有空隙的。可以转换成块元素，再浮动，可取消空袭

 

 

 

 

 

 

ul变成弹性盒

弹性盒一般用于移动端，在pc端有兼容性问题

display:fiex;块级弹性盒，宽度与父元素同宽；display:inline-flex;内联弹性盒，宽度和内容同款，效果如上

 

 

 

默认不换行

space-between：将多余的空间分配到每个子元素之间

space-space将父元素多余的空间分到每个元素的两边

 

/* flex-direction:row;

flex-direction:设置主轴方向

flex-wrap:wrap-reverse;设置子项目在主轴上的换行方式

flex-flow:是flex-direction和flex-wrap的缩写

justify-content:用于设置子元素在主轴上的对齐方式（父元素上）
align-items:baseline;单行在父元素的侧轴的对其方式的(父元素上)
align-content:center;多行在父元素的侧轴的对其方式的（父元素）
align-self:单个子元素在父元素的侧轴的对其方式的（子元素）
ul{display:flex;background:#FC6;flex-flow:row wrap;width:400px;justify-content:space-around;height:400px;align-content:space-around}

flex-grow:将父元素的空余空间分配给子元素几份（子元素上）

flex-shrink若子元素加起来宽度大于父元素宽度，则根据子元素各自的宽度等比率缩小；默认值是1；若设为0，则不会等比例缩小，会溢出

flex:是flex-grow和flex-shrink的缩写，默认0 1

默认值

侧轴行与行之间

 

默认情狂下子元素不会扩大

父元素有空余空间，flex-grow:1每一个li标签都会获得ul标签多余空间的1份

flex-shrink若子元素加起来宽度大于父元素宽度，则根据子元素各自的宽度等比率缩小；默认值是1；若设为0，则不会等比例缩小，会溢出

设置弹性子元素的宽度

 

子元素不会等比例扩大父元素多余的空间，子元素超出范围之后不会等比例缩小，子元素的宽度是根据wodth属性来定的