子元素如何在父元素中居中
1、水平居中:
-
子父元素宽度固定,子元素设置 margin:auto,并且子元素不能设置浮动,否则居中失效
-
子父元素宽度固定,父元素设置 text-align:center,子元素设置display:inline-block,并且子元素不能设置浮动,否则居中失效
2、水平垂直居中:
-
子元素相对于父元素绝对定位,子元素 top,left 设置 50%,子元素margin-top 和 margin-left 减去各自宽高的一半
-
子元素相对于父元素绝对定位,子元素上下左右全为 0,然后设置子元素margin:auto
元素垂直居中
1.设置子元素和父元素的行高一样
2.子元素设置为行内块,再加 vertical-align:middle
Doctype 作用
声明文档类型
定位的属性值有何区别
Position 有四个属性值:relative absolute fixed static
Relative 相对定位 不脱离文档流,相对于自身定位
Absolute 绝对定位,脱离文档流 相对于父级定位
Fixed 固定定位,脱离文档流,相对于浏览器窗口定位
Static 默认值,元素出现在正常的流中
介绍一下box-sizing属性
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box:让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的
宽度/高度决定,设置width/height属性指的是content部分的宽/高
border-box:让元素维持IE传统盒模型(IE6以下版本和IE6~7的怪异模式)。设置width/height属
性指的是border + padding + content
标准浏览器下,按照W3C规范对盒模型解析,一旦修改了元素的边框或内距,就会影响元素的盒子尺
寸,就不得不重新计算元素的盒子尺寸,从而影响整个页面的布局。