9、自适应和透明

最新推荐文章于 2024-06-23 20:25:37 发布

hl8187

最新推荐文章于 2024-06-23 20:25:37 发布

阅读量35

点赞数

分类专栏： Web前端文章标签： css html css3

本文链接：https://blog.csdn.net/hl8187/article/details/127291865

版权

Web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应

二、宽度自适应高度自适应

1、宽度自适应：
  不给元素写固定宽度，宽度常态下默认为百分百，这个时候浏览器窗口多大，元素的宽度就有多大，这就是宽度自适应。
2、高度自适应：
  不给元素写固定高度，高度由内容区域撑开，这个时候内容多高，元素的高度就是多少，这就是高度自适应。
3、浮动元素的自适应问题
  （1）浮动元素宽度自适应:
  	  元素浮动后，如果没有设置宽度，这个时候宽度由内容区域撑开。
  （2）浮动元素高度自适应:
      父元素不写高度，高度想要由内容区域撑开(自适应)，这个时候子元素浮动，就会造成高度塌陷。(父元素没高度了)
    解决：<1>给父元素写上高度。(父元素没有那么灵活)
          <2>给父元素也添加浮动。（如果父元素不需要浮动，会影响页面布局）
          <3>overflow:hidden;(一般情况下，该属性能解决大部分高度塌陷问题，但是会隐藏溢出的元素而且当我们需要写一个元素突出父元素效果时，overflow:hidden就不太合适了。)
          <4>万能清除浮动法(能解决各种塌陷问题，一般不用，当overflow:hidden解决不了再用。)
                .box::after{
                    content: "";
                    display: block;
                    clear: both;
                    /* width: 0;
                    height: 0;
                    overflow: hidden; */
                  }

三、伪元素选择器

1、伪元素选择器和伪类选择器的区别：
		伪元素选择器是双冒号，伪类选择器是单冒号。
2、伪元素选择器
    （1）::after{  在xxx之后，必须搭配content使用
              content:"";  
                }
    （2）::before{ 在xxx之前，必须搭配content使用
              content:"";
                 }
    （3）::first-letter    选中xxx的第一个字符
    （4）::first-line      选中xxx的第一行内容

四、元素的显示与隐藏

 1、display:none;    元素隐藏
      特点:隐藏后不占据空间，后面元素上去补位置
 2、height:0;
      特点：元素如果有内容的话，内容不会被隐藏，可以搭配overflow:hidden;来实现效果。
 3、opacity:0;
      特点:本质上属于元素透明，并不是真正意义上的元素隐藏。消失后仍占据原本的空间。
 4、visibility           元素隐藏
      visible(默认值)      显示
      hidden               隐藏
      特点：隐藏后仍占据空间。
 5、使用缩放====缩放比例为0
      transform:scale(0);
*6、display:none、opacity:0、visibility:hidden之间的区别:
     （1）opacity本质上属于元素透明，不是真正意义上的隐藏，消失后仍然可以触发划过自身的事件。
     （2）display:none;是元素消失，消失后不占据页面空间，自然也无法触发划过事件。
     （3）visibility:hidden也是元素消失，但是消失后仍占据页面空间，但是他也无法触发划过事件。

五、透明

1、opacity      元素整体透明
    特点：取值范围为0-1之间，0为全透明，1为不透明。
    注意：他是内容和元素整体透明
2、rgba(0,0,0,0);    透明色   
    特点:前三个参数为红绿蓝三个色域取值，取值范围为0-255之间。第四个参数为透明度，取值范围为0-1
3、transparent       透明色

六、最小最大宽高

min-width           最小宽度
max-width           最大宽度
min-height          最小高度
max-height          最大高度
 特点总结：
  （1）在常态下，如果没有定义宽度，这个时候宽度默认为100%，如果100%>max-width，这个时候最多按照max-width显示
  （2）在常态下，如果没有定义高度，高度由内容撑开，如果没有内容，则为0，这个时候按照min-height来显示。
  （3）如果设置宽和高了，看设置的宽高值是否在最大最小的范围内，在的话按照设置的宽高显示.
  （4）总结：在我们设置最大最小宽高后，宽度和高度一定在这个范围内。

七、窗口自适应

    body,html{
      height:100%;
    }
  总结：为了写一个满屏高度的效果，我们需要上述代码。

八、iframe

 在一个页面中嵌入另外一个页面
    特点：行内块元素。

九、calc()计算函数

    特点：calc()计算函数可以动态的计算一些数值单位。
    运算规则和数学运算规则保持一致。先算*/再算+-,有()先算()
    注意：运算符前后需要加空格。

十、两栏三栏布局

    例：
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        *{
          margin: 0;
          padding: 0;
        }
        html,body{
          height: 100%;
        }
        .top{
          height: 200px;
          background-color: red;
        }
        .bottom{
          height: calc(100% - 200px);
          background-color: blue;
        }
        .left{
          width: 200px;
          height: 100%;
          background-color: yellow;
          float: left;
        }
        .right{
          width: calc(100% - 200px);
          height: 100%;
          float: left;
          background-color: blueviolet;
        }
      </style>
    </head>
    <body>
      <div class="top"></div>
      <div class="bottom">
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </body>
    </html>