css（3）

溢出属性

overflow：

visible：默认值

hidden：溢出内容隐藏

scroll：滚动，溢出内容以滚动方式显示

auto：如果有溢出会添加滚动条，没有溢出正常显示

inherit：规定应该遵从父元素继承overflow属性的值(知道一下就行)

overflow-x：x轴溢出

overflow-y：y轴溢出

空余空间

white-space：；

normal：；默认值，空白会被浏览器忽略

nowrap：；文本不会换行，文本会在同一行上继续，直到遇到
标签为止；

pre：保留空格，回车，不换行

pre-wrap：保留空格，回车，换行

pre-line：保留回车，不保留空格，换行

省略号显示

text-overflow:：；

clip：；默认值（不显示省略号…）

ellipsis：；显示省略号

当单行文本溢出显示省略号需要同时设置以下声明

容器宽度width：200px；

强制文本在一行内显示：white-space: nowrap;

溢出内容为隐藏：overflow: hidden;

溢出文本显示省略号：text-overflow:ellipsis 

       

块元素：

自带display：block或display：list-item属性

注：（p标签放文本可以，不能放块级元素）

例如：div  p  ul  li  ol  li  dl  dt  dd  h1-h6……

行内元素：

自带display：inline属性

例如：a  b  em  i  span  strong……

不能定义宽和高，无法实现上下边距，可以实现左右并排

行内块元素

自带display：inline-block属性

例如：img  input……

能定义宽和高，还可以并排显示

display:none;隐藏属性

元素类型互相转换

行内元素或行内块元素加上display：block 会变成块元素

块元素或行内快元素加上display：inline 会变成行内元素

行内元素或块元素加上display：inline-block属性会变成行内块元素

行内元素加上position：absolute；能转换成块元素

行内元素加上float：left；也能转换成块元素

定位

position：static；      默认

position：absolute；  绝对定位

position：relative；  相对定位

position：fixed；    固定定位

position：sticky；    粘性定位

absolute:

当没有父元素或者父元素没有定位，参照物是浏览器窗口

有父元素且父元素有定位，参照物是父元素

relative参照物是自己的初始位置

fixed参照物是浏览器当前窗口

sticky可以做吸顶效果，粘性定位是css3,0新加的，兼容不好

定位里的层级

z-index：；层级(两个盒子或多个盒子重叠)

数值越大越靠上显示

定位控制元素水平垂直居中

div{

width: 200px;

height: 200px;

background: yellow

position: absolute;

top: 50%;

left: 50%;

margin-top:-100px;（设置成自身宽度和高度的一半）

margin-left:-100px;（设置成自身宽度和高度的一半）

}

浮动与定位的区别

float：半脱离，文字环绕

absolute：全脱离，不会出现文字环绕效果