Day 7 (CSS)

1.overflow不继承

    div {       overflow: hidden;    }

所以子也要设定

    p{        overflow: hidden;    }

2.设宽高object-fit才抓的到

    img {        width: 100%;        height: 100%;        object-fit: contain;        }

3.display：显示方式 vs position：定位

position=>如何让图片上有文字
(档案:position下)

(1)static预设

      .reddiv {        position: static;        /* 所以以下都没反应 */        top: 500px;      }

(2)fixed
设定fixed会在"原本的位置""飘浮"起来
因为原本被拿出来固定,绿色蓝色就往上推了
(原本位置不保留)
原本=>都会在同样的位置 EX:TOP

        #reddiv {        position:fixed;        /* 离浏览器视窗距离 */        right: 0;        bottom: 0;        }

(3)relative
relative要设定其他值,才会移动,不然就是static(预设)
原本位置有保留并且飘浮起来,所以下面绿色和蓝色不会往上跑
(原本位置保留)
原本=>黏在浏览器上

      #reddiv {                position: relative;       /* 离前一个元素的位置距离 */        top: 100px;        left: 200px;      }

(4)absolute
设定absolute会在"原本的位置""固定在上面"
因为原本被拿出来固定,绿色蓝色就往上推了
(原本位置不保留)
原本=>黏在浏览器上

      #reddiv {         position: absolute;        /* 对齐浏览器 */        top: 100px;        left: 200px;      }

(5)relative + absolute

relative要设定其他值,才会移动,不然就是static(预设)
原本位置有保留并且飘浮起来,所以下面绿色和蓝色不会往上跑
但是因为配合absolute,解释在下方

      .demo {        position: relative;      }

absolute此时会找爸爸看有没有设定relative
有就会找他设定相对位置top: 50px

      #greendiv {        position: absolute;         top: 50px;        right: 100px;      }

使用时机-响应式网站

4.position置中

      .box {        width: 200px;        height: 200px;        background-color: #fa0;        position: absolute;

方法1.

        top: 50%;        left: 50%;        /* 到这里还没置中,因为基準点是方框的左上角,所以要200-100对齐方框中间 */        margin-top: -100px;        margin-left: -100px;

方法2.

        top: 50%;         left: 50%;         transform: translate(-50%, -50%); 

方法3.

        top: 0;        left: 0;        left: 0;        right: 0;        margin: auto

5.z-index,position有设才可以用

      #rainbow {        position: relative;      }      #rainbow > div:hover {       z-index : 1;      }

6.适用方式:

display(显示 flex grid inline-block)=>大版面用

position(定位 上下左右)=>小版面用(RWD)
使用时机-响应式网站
(1)电脑看可能会是好的,但是在手机或平板都会跑版,
此时使用相对定位(这个方法)最不会跑版
(2)作品集加上作者名称固定在左上角,使用此方法就不用一个一个找定位

float (飘移 left right)=>大版面用也可以用,图片的处理好用

7.float: right会受到父层限制

因为div飘浮起来后.group1抓不到div而无法产生内容
如有想显示的东西都要写在父层(.group1)才不会抓不到
(档案float_30_clear)

      .group1 {        background-color: #fa0;        width: 300px;        height: 75px;        overflow: hidden;      }      .group1 > div {        float: right;      }

解决办法有3：

(1) 第二个div 加入 clear属性

     #apple {        clear: right;       }

(2) 在 .group1 加入 overflow: hidden;(父)
会抓出宽高,还可以clear(奥义XD,神奇的用法)

      .group1 {        overflow: hidden;       }

(3)透过虚拟元素

      .group1::after {        content: "";        display: block;        clear: both;      }

8.px 单位注意事项

在浏览器缩放为100%的情况下，小于10px以后，看起来一模一样，使用上要小心

 <p style="font-size: 8px">标题1!!( 8px )</p> <p style="font-size: 6px">标题2!!( 6px )</p>

字不要用到这么小!!会无法看清楚而且难设定

9.css 的单位表示方式

(1)px不受任何影响

(2)em巢状,受父层影响(父子31)

      :root {        font-size: 32px;      }   <div id="div1" style="font-size: 3em">   <div id="div1child" style="font-size: 1em">标题1</div>

(3)rem无巢状,受父层影响

      :root {        font-size: 32px;      }

(4)% 受父层影响

#demo {        background-color: lightcoral;        height: 80%;     }

(5)vh,vw只受浏览器影响,与%数不同 */

#demo {        height: 100vh;        width: 100vw;       }

EX:
100vw: 1200 100vh: 600
50vw : 600 50vh: 300

vmin,vmax依照vw及vh的比例下去算 50为一半
50vmax = 600 50vmin = 300

10.预览手机格式

11.RWD => try

https://www.w3schools.com/css/css_rwd_mediaqueries.asp
@定义媒体 专给萤幕 条件为 宽度 <= 600px(最大600)

      @media only screen and (max-width: 600px) {        body {          background-color: lightblue;        }      }

800~1000之间(最小800最大1000))

      @media only screen and (min-width: 800px) and (max-width: 1000px) {        body {          background-color: #fa0;        }        p {          color: yellow;        }      }