CSS基础

文本属性
浏览器默认大小为 16px =1em = 12pt % 百分比 相对单位
text indent 可以取负值，文字往左移 背景的位置可以取负值
英文文本大小写转换：text-transform:capitalize/
rgba(0,0,0,0.3) rgb三原色 a 透明度：0~1（0全透明，1不透明）
当给一个元素同时添加背景图和背景色，背景图在背景色上面
透明 ：transparent rgb(0,0,0,0)
float的特性：给元素设置了该属性后，

文本字体：{font-family:字体1，字体2，字体3；}
padding的使用：
margin-top:上边距 使用过程中要注意，它有bug 给子元素加上maigin-top,父元素整个下移
解决方案：在父元素中加入 overflow:hidden;

position:absolute; 绝对定位
特性：给元素设置了绝对定位之后，它会飘起来，自己的位置也不要了
top bottom left right
在定位里面，四个方位的值都可以取负值
在没有父元素的时候，给元素添加绝对定位，默认是针对浏览器的第一屏做的定位
有父元素的时候，如果是相对于这个父元素做绝对定位的话，那么这个父元素必须是带有定位属性的父元素
position:relative; 相对定位
特性：给元素设置了相对定位之后，元素还占着自己的位置,如果去调整它的位置，他也是相对于自己原来的位置进行相应的变动
position:fixed; 固定定位
特性：默认相对于整个浏览器做的固定定位，而且给元素设置了固定定位之后，元素会飘起来，而且原来的位置也不要了,也可以用z-index去设置层级关系，值越大在越上层
position:sticky; 粘性定位（做吸顶效果）
css3新增加的一个属性值
特性：在页面没有出现滚动条的时候，浏览器的第一屏上面，给元素设置粘性定位，并给它设置方向值，只有left有效
在页面出现滚动条的时候，浏览器上面，给元素设置粘性定位，并给它设置方向值，只有left和top有效

总结
css设置定位的属性值有哪些？它们的区别是什么？
position:static absolute relative fixed sticky
区别：
absolute 绝对定位
1.文档流 脱离了文档流（也就是飘了），自己的位置就不要了
2.参照物 没有父元素的时候，默认是浏览器的第一屏位置做定位，如果是相对于父元素做定位，那么这个父元素也必须设置定位，最好是设置相对定位（relative）
3.层级关系 z-index

    relative  相对定位
    1.文档流     没有脱离文档流
    2.参照物     参照物是自己原来的位置
    3.层级关系    z-index
   
   
    fixed  固定定位
    1.文档流     脱离了文档流（也就是飘了），自己的位置就不要了
    2.参照物     参照物是整个浏览器
    3.层级关系    z-index
   
   
    sticky  粘性定位
    1.文档流     没有脱离文档流
    2.参照物     参照物是整个浏览器
    3.层级关系    z-index

transition 过渡 可以让动态效果缓慢几秒钟
opacity 可以让一个元素变透明 取值区间 0~1 0全透明 1不透明
总结：display:block 和display:none 可以让一个元素出现和隐藏
display:none是让一个元素隐藏的很彻底，web页面检查都看不到位置
opacity:1和opacit:0 也可以让一个元素出现和隐藏，但是在web页面检查可以看到其位置

粘性定位 position:sticky css3新增的一个属性值 主要做 “ 吸顶 ” 的效果
特性：在页面没有出现滚动条的时候，浏览器第一屏上面，给元素设置粘性定位，并且给他设置方向值，只有left有效；
在页面出现滚动条的时候，给元素设置粘性定位，并且给他设置方向值，只有left和top生效。
仍保留原来的位置
border-radius:给边框设置圆角

text-overflow属性可以：设置盒子中的文本溢出时显示省略号，设置盒子中的文本溢出时被裁剪掉

元素
类型分为三种分别是：行内元素，块状元素，可变元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素是其内容不受CSS视觉格式化模型控制的元素，也叫置换元素，浏览器会根据元素的标签类型和属性来显示这些元素。替换元素也在其显示中生成了框。所以，替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率例如img , input , textarea , select , object都是替换元素

伪元素：
:after 与content属性一起使用，定义在对象后的内容，如果对象的内容引入的图片可以不需要添加双引号。
:before 与content属性一起使用，定义在对象前的内容，如果对象的内容引入的图片可以不需要添加双引号。
:first-letter 定义对象内第一个字符的样式，注：该伪元素只能用于块元素
:first-line 定义对象内第一行的样式，注：该伪元素只能用于块元素，ie6以下版本浏览器不支持伪对象选择符，CSS2中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”。