day 39 盒模型 display 浮动

一、盒模型

属性：
    width:内容的宽度
    height:内容的高度
    padding:内边距 内容到边框的距离
    border:边框
    margin:外边距  另一个边到另一个边的距离
    
盒模型的计算：
    总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
    前提是：在标准文档流
            padding：父子之间调整位置
            margin: 兄弟之间调整位置	

1.1 adding的设置

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

　　标签的默认padding

　　比如ul，ol标签，有默认的padding-left值。

　　那么我们一般在写网页的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

*{
  padding:0;
  margin:0;    
}

1.2 border的设置

  -border
    三要素：线性的宽度 线性的样式 颜色
    border: 1px solid red;
                    silid实线  dotted点线  double双线  dashed虚线

    border-left: 1px solid red;

1.3margin的设置

  -margin    
  
    前提必须是标准文档流下 
    
        margin的水平不会出现任何问题
        垂直方向上 margin会出现'塌陷问题'

 

2.display 显示（重要）

前提必须是标准文档流下 

属性：
	block 块级标签
			- 独占一行
			- 可以设置宽高，如果不设置宽，默认是父盒子宽度的100%
	inline 行内标签
			- 在一行内显示
			- 不可以设置宽高，根据内容来显示宽高
	inline-block 行内块
			- 在一行内显示
			- 可以设置宽高
			
	none  不显示 隐藏 不在文档上占位置
	
   visibility：hidden;隐藏 在文档上占位置

3.浮动 （重要）

　　3.1浮动的四大特性

1.浮动的元素会脱离标准文档流
2.浮动的元素互相贴靠
3.浮动的元素有"子围"效果
4.收缩的效果
    收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

float:none;
	  left;左浮动
	  right;右浮动
	  
浮动：脱离了标准文档流
作用好处：使元素实现并排（布局）
	在页面上占位置
	
浮动带来的问题：
	子盒子浮动，不在页面占位置，如果父盒子不设置高度，那么撑不起父盒子的高度，页面出现紊乱
	
	
清除浮动：
	1.给父盒子设置固定高度（后期不好维护）
	2.clear:both;
		给浮动元素的最后面，加一个空的块级标签(标准文档流的块级标签)
		给当前这个标签设置一个clearfix类名，设置该标签属性cleart:both
		
		问题：代码冗余
	3.   .clearfix:after {
			content: ".";
			display: block;
			height: 0;            1    
			visibility: hidden;   2  有1，2清楚content添加的.    
			clear: both
		}
	
		父盒子浮动和子盒子浮动没有关系，子盒子该浮动就浮动

	4.overflow:hidden;   超出部分默认可见（visible）
		超级：清除浮动  最牛逼的方法，以上三种都是渣渣
		补充：
			overflow：auto     超出部分出现左右滚动条
			overflow: scroll   超出部分出现上下滚动条

要浮动一起浮动，有浮动，清除浮动