h5基础（三）

1.行内块级元素

　　行内块级元素也称置换元素，即可以设置宽高（默认是内容宽高），也可以设置内外边距

　　常见的行内块级元素：img、input

       1.1行内块级元素出现的bug

　　　　

 

 　　

    很明显我们能看出图片下方跟p标签之间有一点缝隙，这个缝隙并不是我们自己设置的外边距而是他自带的小bug，很多小伙伴会说可以给p标签margin-top顶上去，那么具体应该怎么解决呢

　此时我们可以给图片设置vertical-align: top;   这是你就会发现这个小bug就解决啦

　　1.2行内元素宽高问题

　　很多时候我们是想将一个行内元素设置宽高或者垂直方向设置margin、padding时，但发现你设置之后并没有什么用，这是因为行内元素不支持设置宽高，那我们如何才能达到我们预期的效果呢

　　　　（1）我们可以给行内元素设置display：inline-block/block；　　　　　

　　　　　　　　说到display我想给各位爱学习的小粉丝们科普一下，display的几个常用属性值：

　　　　　　　　　　none　　此元素不会被显示

　　　　　　　　　　block       此元素将显示为块级元素，此元素前后会带有换行符。

　　　　　　　　　　inline       默认，此元素会被显示为内联元素，元素前后没有换行符。

　　　　　　　　　　inline-block　　行内块元素

　　　　　　　　　　table　　此元素会作为块级表格来显示

　　　  （2）给行内元素开浮动float

　　　　 (3)  定位position：absolute/fixed

2.兄弟选择器

　　我相信很多初学的小伙伴分不清楚兄弟选择器~和+的区别 ，今天小编来讲解一下兄弟选择器~  和 +的区别吧，来吧，展示！

　　

 

 

 

 

 

 

 

  从上图不难看出~表示选中元素后面的所有的兄弟元素，而+则表示选中元素后面最近的一个兄弟元素

3.关于定位居中的问题

　　常用的有两种方法，拿固定定位举个栗子

　　

 

 

        

     

 4.BFC

　　BFC全称块级格式化上下文，BFC是css中一个隐含的属性，开启BFC该元素会变成一个独立的布局区域。

　　4.1BFC的布局规则

• 内部的box会在垂直方向，一个接一个地放置。　　
• box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算。
• BFC不会与浮动发生重叠

　　4.2触发BFC的条件：

　　　　　　（1）设置元素浮动 float（除了none以外的值）

　　　　　　（2）display:inline-block/table

　　　　　　（3）overflow 除了 visible 以外的值 (hidden、auto、scroll)-------常用：overflow：hidden；

　　　　　　（4）定位：position ：absolute/fixed；

　　　　　　  (5) 根元素html

　　4.3 BFC的作用

　　　　4.3.1利用BFC避免margin重叠

                       

 

 

 　　　　　　页面效果图：

 

　　        　　

　　

　　　　     根据第二条，属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC

　　　　　　

 

 　　　　　　页面效果图：

 

 

 　　　　　　

 

 　　　　4.3.2 两栏布局

 

　　　

    　　页面效果图：

           

 

 　　　除了以上的做法，小编还总结了另外两种方法，喜欢的小伙伴可以收藏下

　　　　                  

 

 　　　　上面两种方法则是利用BFC不会与浮动发生重叠

　　　　4.3.3 清除浮动

　　　　　　当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动。

　　　　

 

•  计算高度时，浮动元素也会参与计算，这时给父元素开启BFC

　　

 

　　 总结：

　　　　BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。