自学前端day07

定位

定位的作用

用于盒子之间的层叠，定位后的盒子层级最高

把盒子固定在浏览器的某一位置不随网页的移动而移动

定位的使用

position：static/relative/absolute

left/right     top/bottom设置偏移属性值

静态定位：就是标准流不能通过方位属性进行移动

相对定位：仍具有块状标签属性；不脱标仍占有标准流；相对于自身位置的改变；遵循方位就近原则靠近那边那边位移属性值生效

绝对定位：脱标不占用标准流位置；改变标签的显示模式具有行内块的特点；以已经定位的父级元素进行位置的改变（子绝父相）若没有定位的父级元素则以浏览器为参照物；不尊询方位就近原则

定位后居中

元素定位后无法使用margin进行居中

方法：left：50%   top：50:% 定位时左上各取中值

           transform：translate（-50%，-50%）或margin-left ；margin-right左外边距和上外边距各取盒子宽高一半的负值

定位固定位置

position：fixed

脱标不占用标准流位置，改变是参照浏览器窗口的不随浏览器的移动而改变位置，具有行内块的特点

定位显示层级

若同时设置定位块标签具有后来者居上的特点

解决：z-index:数值；数值越大定位图层的优先级越高标签层级越靠前优先显示；默认值为0

文字对齐

vertical-align：baseline(默认)/top/bottom/middle

浏览器会将块或行内块解析为文字处理方式所以处理块居中时时可以用vertical-align实现垂直居中

用text-decoration实现水平居中

input标签位于块元素中时会和块元素留有缝隙除了使用对齐方式处理；也可以将input转为块元素可以取消缝隙

光标类型

cursor:pointer（手型）/default(默认)/move(可移动)/text(工字型可复制当前文本)

圆角边框

border-radius:

一个值默认为四个角的圆角边框一样

两个值默认为对角的圆角边框一样

三个值默认为未设置值的角与对角的值一羊

圆角边框的使用场景

正圆：设置一个正方形盒子；border-radius:设置为宽高的一半即50%（也是radius的最大值）

胶囊：设置一个长方形盒子；border-radius:设置为宽高的一半

溢出效果的显示

overflow：visible/hidden/auto/scroll

visible:无论是否溢出都显示

hidden：溢出部分隐藏

auto：根据内容的多少判断是否要加滚动条

scroll：无论内容多少都加滚动条

隐藏的使用

visibility:hidden;占位隐藏元素被隐藏但仍占据原来位置

display：none；不占位隐藏元素元素被隐藏位置也同时消失

透明度

opacity：0-1；1表示不透明；0表示完全透明

表格边框线的合并

单元格和每一行的边框线合并为一条

  border-collapse: collapse;只有添加到table属性中才会生效

设置三角形

设置一个盒子

绘制盒子的边框线

将盒子的宽高设置为0

保留哪边的三角形就将另外三条边框线颜色设置为transparent

焦点伪类选择器

设置当鼠标获得焦点时的显示状态

获得焦点：鼠标单击表单时表单状态      失去焦点：鼠标单击表单外部

 input:focus{

            background-color: pink;

        }

属性选择器

可以用于没有设置类名的情况下

元素名:[属性名]

元素名:[属性名=“属性值”]

 input[type]{

            background-color: pink;

}

        input[type="text"]{

            background-color: pink;

 }

CSS的补充

精灵图

一张大图中包含多个小图可以提高服务器的加载效率减少访问量

方法：绘制一个盒子使用span标签，设置宽高和背景图一样

          放入背景图片

background-position：-3px -2px 使用其调节背景图位置

背景图的缩放

background-size：width height/%/contain/cover

width height:设置缩放为指定宽高图片

%：按照自身宽高的比例进行缩放

contain：放大到填满盒子的某一方向为止，可能会导致盒子出现空白

cover：铺满整个盒子，可能会导致部分图片看不见

背景的复合写法

 background: no-repeat pink url(./1.jpg) ;

盒子阴影

box-shadow：水平偏移量，垂直偏移量，阴影模糊度，阴影尺寸，颜色，inset(不加默认为外阴影)

过渡

让元素慢慢发生变化常配合hover使用增强交互感