day23总结

1.什么是标准流
标签在没有添加布局相关的样式的时候，在浏览器中默认的布局方式
  块级标签在标准流中是一个占一行(不管宽度大小);默认宽度是父标签的宽度, 默认高度是内容的高度;设置宽高有效
  行内标签在标准流中一行可以显示多个;默认大小是内容的大小;设置宽高无效(span,a)
  行内块标签在标准流中一行可以显示多个;默认大小是内容的大小;设置宽高有效(img,input)
2.实际布局的选择
a.左右结构使用行内块
display属性 - 可以让任何标签变成块级、行内、行内块; 隐藏标签
display属性(CSS属性):
  block(块)
  inline(行内)
  inline-block(行内块) - 默认左右间隙(因为换行产生的)，这个间隙可以通过将父标签的字体大小设置为0来去掉
  none(隐藏)

<a href="" style="display: inline-block; background-color: salmon; width: 100px; font-size: 20px;">百度1</a>
<a href="" style="display: inline-block; background-color: seagreen; width: 100px; font-size: 20px;">新浪1</a>

b.脱流/脱标(脱离标准流)
  float(浮动)
  定位(letf,right,top,bottom position)
1.浮动会让标签脱流
  脱流 - 让标签脱离标准流布局，不管什么标签脱流了，都是按'一行可以显示多个，默认大小是内容大小，设置宽高有效'的方式布局
2.float属性
  left
  right
块级标签脱流

<div id="" style="background-color: saddlebrown; float: left; width: 100px;">
    div1
</div>
<div id="" style="background-color: salmon; float: left;">
    div2
</div>

行内标签脱标

<a href="" style="background-color: salmon; width: 100px; float: left;">百度1</a>
<a href="" style="background-color: darkcyan;">百度2</a>-->

文字环绕：
  被环绕的标签浮动，文字标签不浮动

<div style="background-color: aquamarine; width: 100px;height: 100px; float: left;margin-right: 10px;">
    <img src="img/luffy.jpg"/>
</div>
<p style="">小米公司是一家专注于高端智能手机、互联网电视以及智能家居生态链建设的创新型科技企业。
    小米公司在互联网电视机顶盒、互联网智能电视,以及家用智能路由器和智能家居...
    小米公司是一家专注于高端智能手机、互联网电视以及智能家居生态链建设的创新型科技企业。
    小米公司在互联网电视机顶盒、互联网智能电视,以及家用智能路由器和智能家居...
</p>

清除浮动
1.高度塌陷
  当父标签不浮动，子标签浮动的时候，父标签就会产生高度塌陷的问题
2.清除浮动
清除浮动指的是清除因为浮动而产生的高度塌陷
a.方法一：添加空盒子
  在高度会塌陷的父标签的最后添加一个空的div; 然后给空的div添加样式设置clear属性的值为both

<div class="clear" style="clear: both;"></div>

(记)b.方法二：overflow
  给高度会塌陷的那个父标签，添加样式设置overflow属性值为hidden
c.方法三: 万能清除法
  选中高度会塌陷的那个父标签,给after状态添加样式: display:block;clear:both;content:"";visibility:hidden;height:0;
然后再给这个父标签添加样式: zoom:1

1.定位
定位会让标签脱流

2.定位属性:
top属性: 顶部的距离
bottom属性: 底部的距离
left属性: 左边的距离
right属性: 右边的距离
  以上4给属性想要有效，必须通过position属性来说明参考对象
position属性:
  initial和static - 默认值，不能定位(定位无效)
  absolute - 绝对定位; 以第一个position的值不是默认值的父标签进行定位.(注意：body标签的position不是initial和static)
  relative - 相对定位; 相对于标准流定位(相对自己在标准流中的位置进行定位)；一般使用relative是在标签本身不需要定位，但是希望自己的子标签相对自己定位的时候使用
  fixed - 相对浏览器定位
  sticky - 当浏览器内容没有超过一屏的时候，显示在内容的最下面；当浏览器内容超过一屏bottom有效，并且显示在浏览器的底部（top和bottom有效，left和right无效）

<style type="text/css">
    #div2{
        position: sticky;
        bottom: 100px;
    }
</style>

1.盒子模型
网页上所有的可视标签都是一个盒子模型：
  一个标签是由4个部分组成，分别是:内容(content)、padding、border、margin;
  其中content、padding、border是可见的，margin不可见，但是占位

2.盒子模型的每个部分
  content - 标签内容;设置标签的宽高其实是作用于content;标签中的文字和子标签都是添加在content上的

/*1.content*/
background-color: lightgoldenrodyellow;
width: 100px;
height: 100px;

  padding - 在内容外部，默认是0;可见的，并且背景颜色也作用于padding(padding和content的颜色一样);有四个方向

/*2.padding*/
/*单独设*/
/*padding-left: 100px;*/
/*padding-top: 20px;
padding-left: 20px;*/
/*一起设*/
padding: 50px;

  border - 边框; 默认是0，可见的，有四个方向；颜色和大小都可以单独设置

/*3.border*/
/* 单独设
border-方向: 边框宽度 边框风格 边框颜色
边框风格: solid(实线), dashed(虚线), dotted（点划线）
*/
border-top: 1px solid orange;
border-left: 3px solid orange;
/* 一起设*/
border: 10px solid darkcyan;
/*设置边框的圆角*/
border-radius: 110px; 

外边距:margin

margin-left: 100px;
margin-top: 100px;
margin-bottom: 50px;