CSS学习第四天

1.外边距

1.1外边距的合并

垂直布局的块标签元素，上下的的margin会合并。

显示结果：两个块之间间距只有50px，下面的间距被合并。

	<style>
    div {
      margin-buttom:50px;
    }
    .div1 {
      margin-top:50px;
    }
</style>
......
<div>
  这是第一个快
</div>
<div class=div1>
  这是第二个块
</div>

垂直布局的块标签元素，上下的margin大的会覆盖小的。

显示结果：两个块之间间距有100px，下面的间距被覆盖。

	<style>
    div {
      margin-buttom:100px;
    }
    .div1 {
      margin-top:50px;
    }
</style>
......
<div>
  这是第一个快
</div>
<div class=div1>
  这是第二个块
</div>

1.2外边距的塌陷

外边距的塌陷简称“坑爹现象”；由于父级元素内容没有高度，下面的元素会顶上去导致子元素的外边距跑到父元素一起，造成页面的塌陷

解决方法：

1.给父元素添加border-top，

2.给父元素添加overflow：hidden。（***最好用的方式）//显示结果这样父级的高度就随子级容器及子级内容的高度而自适应

1.3行内元素的内外边距的问题

行内的标签的margin-top或bottom和padding-top或bottm不生效。

使用行高来调整行内标签的文字。

2.结构伪类

2.1结构伪类选择器

根据标签的结构来查找标签

E:frist-child {} 选择父元素的第一个E元素

E:last-child {} 选择父元素的倒数第一个E元素

E:nth-child {n} 选择父元素的第n个E元素

E:last-nth-child {n} 选择父元素的倒数第n个E元素

2.2结构伪类的公式

n可以等于任意数

2n 偶数

2n+1或2n-1奇数

-n+5 前五位

n+5 第五位开始

2.3伪元素

E::before

E::after

css属性值中必须要有 content：’ ';不然伪元素不成立

伪元素添加的类名必须是块。

3.标准流

标准流又叫文档流，是标签的默认显示模式。

4.浮动

4.1 浮动是为了让块标签完美的在一行显示

4.2浮动的特点：

1.浮动元素会脱离标准流（简称脱标），在标准流中不占位置。

2。浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3。浮动找浮动，浮动的元素按顶对齐。

4.浮动的特殊显示效果（具备行内块特点）：一行显示多个，可以设置宽高。

注意点：浮动之后的元素不受margin（0 auto）的影响。优先级>margin

5,清除浮动-场景搭建

5.1增加height高度

5.2额外标签法

1.在父级标签的内容最后一行添加块级标签clearfix。

2.给clearfix块级标签属性添加clear：both清浮动；

5.3单伪元素清除法

<style>
  .clearfix::after {
    content:'';
    display:block;
    clear:both;
  }
</style>
......
<div class="top clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

5.4双伪元素清除法(可以清塌陷)

<style>
  .cleandix::before,
  .clearfix::after {
    content:'';
    display:block;
  }
  <!--清浮动--！>
  .cleanfix::after;{
    clear:both; 
  }
</style>
......
<div class="top clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

5.5清浮动-overflow：hidden

给父级元素添加css属性。

<style>
  .clearfix::after {
     overflow:hidden;
  }
</style>
......
<div class="top clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

6,拓展

1.a 标签的写入需在ul>li中

网页代码靠浏览器渲染执行的

SEO搜索排名HTML的标签写入规范， 导航ul嵌套li嵌套a

原做法直接堆叠a，浏览器会认为是故意堆积关键词，排名会被刻意拉黑放到后面去

2，父标签浮动后所有的内容（块，行内块）都在一行