day4-盒模型-19-1-11

今天主要讲了 盒模型 默认样式 PS基本操作

CSS盒子模型
    组成：content（内容）
         padding （内填充）
         border （边框）
         margin （外填充）
margin注意事项？
	1. margin叠加
		当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。
			例如一个40px，一个30px，最终结果为40px
		这个问题，只在上下有，左右是没有这个叠加问题的。	
		解决方案：
			1. BFC规范
			2. 想办法只给一个元素添加间距。
	2.margin传递
		margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。
		解决方案：
			1. BFC规范
				overflow : hidden
			2. 给父容器加边框	
			3. margin换成padding去操作
块与内联？
        标签分为三类：
            1，块：适合做布局
                div，p，h1……h6，ul，li，dl，dd，dt……
                    独占一行
                    支持所有样式
                    不设置宽时 和父标签相同 
            2，内联：适合做修饰
                span a strong em
                在一行显示
                不支持宽高，margin padding显示会出现问题
                    宽度由内容撑开
                    代码换行会被解析
            3，内联的块
                img input
                有块的特性，也有内联的特性
                在一行内排列，支持宽高
显示框类型：display？
	block : 块
	inline : 内联
	inline-block : 内联的块
	none : 隐藏元素(不占空间的)

	display : none 
	visibility : hidden 隐藏元素(占空间的)
最简单的CSS reset方案：
		*{ margin:0; padding:0;}
		ul{ list-style:none;}
		a{ text-decoration:none; color:#666;}
		img{display:block;}  |  img{vertical-align:bottom;}
			首先产生图片跟容器的空隙问题，只有内联或内联的块才有，块元素是没有这个问题的，所以通过img{display:block}就可以解决这个问题。
			计算机排版：是跟文字的基线对齐的，基线是英文字母x的最底部  xyz

vertical-align : 只对内联的块起作用	
			baseline   基线
			bottom     底线
			top        顶线
			middle     中间