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;
        }
      }