H5C3小知识点总结

关于盒子模型

• 如果给定宽度的div使用padding的话，会撑开盒子
• 嵌套元素垂直外边距的塌陷问题：在父盒子中，如果给子盒子加margin-top，则会影响父
  盒子，父子盒子一起下移，该问题只出现在垂直方向的，左右margin不影响父盒子。

  • 解决方案：

     1. 给父盒子指定一个1像素的上边框或者上内边距（会称开盒子）
     2. 给父盒子添加：overflow:hidden
    

关于float

• 如果已经给行内元素添加了浮动，那么该元素默认自动转换为行内块(inline-block)元素，因此不用设置display也可以有宽高
• 浮动后的div具有文字环绕特性，利用该特性可以实现简单的图文混排以及移动端两栏自适应。

关于position

• 静态定位

  •   可以用来清除原先 的定位
    

• 相对定位(reletive)

  •   以自己为基点作偏移
    

  •   占据原来的空间
    

• 绝对定位(absolute)

  •   以父节点为基点偏移，如果没有父节点，则以当前屏幕为基点
    

  •   不占据原来的空间
    

  •   如果父节点没有相对定位，则子节点绝对定位时还是以当前屏幕为基准，可能会脱离父盒子，而浮动不会脱离父盒子，浮动不超过父盒子的内边距和border边框。
    

• 注意

  •   加了定位或浮动的盒子，margin:0 auto 就失效了
    

  •   除了相对定位外，使用浮动、绝对定位、固定定位，都会使盒子转化为**行内块**(inline-block)元素
    

关于图片和文字

• 单行文本超出显示省略号

		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;

• 多行文本超出显示省略号

		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3; // 行数
		overflow: hidden;

• vertical-align

// 只有行内块元素才有这个属性，块元素没有
// 只有行内块元素才有这个属性，块元素没有
// 通过它设置图片与文字的垂直关系。默认的图片会和文字基线对齐
		img{
				vertical-align:top;
				//文字与图片的顶部对齐
				vertical-align：middle;
				//文字与图片的中心对齐
				vertical-align：baseline;
				//文字与图片的基线对齐
			}

• 去除图片底侧空白缝隙
  图片或者表单等行内块元素，它的底线会和父级盒子的基线对齐，这样会造成一个问题，就是图片底侧会有一个空白缝隙，这个缝隙随着浏览器的不同显示不一，且line-height的值越大，该缝隙就越大。

// 解决方案
img,input{
		vertical-align:middle|top;
		}
// 或者
img{
	display:block;
}
// 或者给父容器指定一个高度
// 或者将父容器的line-height 置为0

关于background

• 使用多背景时，设置背景颜色的语句要放在设置背景图语句的下方，否则属性会被重叠掉，无法显示背景颜色

	div{
		backgorund:url('img/a.jpg')no-repeat right bottom,url('img/b.jpg') no-repeat right top;
		background-color:#f3f4f5;
	}

• 使用opacity 属性会使盒子里的文字也变透明，而使用rgba则只会让盒子的背景透明，不会影响字体。

关于3d

• perspective：视距，表示视点距离屏幕的长短，视距越小，3D效果越明显，用于模拟透视效果时人眼的位置。这个属性要设置在父盒子身上才有效果
• backface-visibility:hidden

  •   不面向屏幕时是否可见，常用在两张图片重叠，翻转时显示不同的图片