菜鸟学前端的第二周

一. 溢出属性-属性：overflow、overflow-x、overflow-y；

visible：默认值
hidden：溢出裁切（溢出内容隐藏）溢出内容不可见
scroll：无论内容是否溢出，都会显示滚动条的区域，溢出内容可见
auto：自动哪个方向有溢出就显示哪个方向的滚动条，如果不溢出则不显示
inherit：继承父元素的overgflow属性值。

二. 空白控件属性：white-space

pre：将所有的回车、缩进、换行、空格全部解析，遇到边界不换行；
pre-wrap：将所有的回车、缩进、换行、空格全部解析，遇到边界会换行；
pre-line：只解析回车换行，内容中间的空格按照默认解析一个字符，遇到边界会换行。
nowrap：回车缩进换行都不解析，只按照默认解析一个字符，遇到边界不会换行。
normal：默认值

三. 溢出省略属性 text-overflow

clip：裁切
ellipsis：省略号

四. 单行文本溢出显示省略号的必要条件

有一定的宽度：width：value；
强制在一排显示：white-space：nowrap；
溢出裁切：overflow：hidden；
显示省略号：text-overflow：ellipsis；

五. 圆角：border-radius

圆：border-radius：50%；

六.元素的类型

1.【块状元素与内联元素的区别】
块状元素可以设置宽度和高度，内联元素不可以，内联元素的宽高是其内容的宽高；块状元素自上而下独占一行显示，内联元素自左向右在一排显示知道遇到边界才会换行显示；块状元素和内联元素都遵循盒模型的设置，但是内联元素的有些属性不能正常显示；块状元素一般做内联元素的盒子使用；常用的块状元素：div p h1 h2 h3 h4 h5 h6 ul ol （li特殊块状元素） dl dt dd form table常用的内联元素：span a b strong i em （img input textarea select 特殊的内联元素）

2. 元素类型转换的属性display
Block 块状元素
如果元素设置float属性时相当于给元素添加display:block;
Inline 内联元素
None 隐藏
Inline-block 行内块
img、 input、 textarea、 select 只有此值的标签支持vertical-align属性Table-cell 表格元素
大多数块状元素的display属性默认值为block，li的display属性值为list-item
大多数内联元素的display属性默认值为inline，img的display属性值为inline-block

3 置换元素和非置换元素

通过属性值决定其在页面的显示效果的元素叫做置换元素 img input textarea select 置换元素之所以可以设置宽高是因为其在渲染时会生成一个框。

六. 定位属性

position（一般与top、right、 left、bottom）
static：静态的 默认值
relative：相对定位，相对于自身原来位置的偏移，不会影响正常的文档流
absolute： 绝对定位，会脱离正常的文档流，绝对定位根据离其最近的有定位的父元素去定，如果父元素没有定位，则根据浏览器窗口去定。
fixed：固定定位，根据浏览器窗口去定，无论是否出现滚动条，元素都会处在给定位置保持不变。
扩展：sticky粘性定位
如果子元素想根据父元素去定位，那么父元素一定要有定位属性值，父元素的定位属性值不能为static。如果父元素有margin：0 auto；属性设置，此时父元素的position的属性值使用相对定位比较好。
子元素相对父元素定位，一般父元素相对定位，子元素绝对定位。
如果使用定位属性，即便宽度为100%，也需要添加

固定宽高如何实现水平垂直居中：

 div</