前端入坑到放弃day7

第07天——CSS基础

一、定位

1、定位组成

      —— 定位=定位模式+边偏移

              定位模式：指定元素的定位方式，通过position属性设置

              边偏移：根据定位模式确定最终位置，通过top、bottom、left、right四个属性设置

2、定位模式

      —— static ——静态定位——默认，无定位意思，几乎不用

        —— relative ——相对定位—— 不脱标，相对于自身位置进行定位

        —— absolute ——绝对定位——脱标，相对于最近定位父级进行定位，如果最近父元素没有定位，就相对于浏览器定位

        —— fixed——固定定位 ——脱标，相对于浏览器的可视窗口来定位

        ——sticky——粘性定位 ——不脱标，相对于浏览器的可视窗口定位（兼容性不好）

        —— 在开发时为什么不建议直接控制图片？而是要给图片加一个父盒子？

                图片默认是按照实际大小显示的；

                页面中的图片通常会很多；

                用一个盒子包起来，控制图片更容易。 

3、固定定位小技巧——固定到版心右侧

      —— left：50%；（到版心中间）

       —— margin-left：版心宽度一半；（到版心右侧）

 

4、定位总结

 

 

5、绝对定位的盒子居中算法

      —— left：50%；向右移动到父盒子（版心）宽度的一半

       —— margin-left：版心宽度一半；利用负数向左移动被选盒子宽度的一半

       —— top：50%；向下移动到父盒子（版心）高度的一半

       —— margin-top：高度的一半，利用负数向上移动被选盒子的一半

【注】绝对定位之后，不仅会脱标，而且有层次 —— 没有相邻的盒子； 此时与边偏移属性联用，修改 margin 可以参照盒子的外边框位置继续调整盒 子的位置。

     —— 行内元素添加绝对或固定定位后，可以直接设置宽度和高度

 

二、显示属性

1、display显示隐藏

      —— none ——隐藏对象，不占位

        —— block ——显示对象

2、visibility显示隐藏

      —— visible ——元素可见

        —— hiddle —— 隐藏元素，占位

3、overflow溢出显示隐藏

     —— visible —— 不剪切内容也不添加滚动条

      —— hidden —— 不显示超过对象尺寸的内容，超出的部分隐藏掉 

      —— scroll —— 不管超出内容否，总是显示滚动条 

      —— auto —— 超出自动显示滚动条，不超出不显示滚动条