首页 > 其他 > 详细

2020.02.17--02.21日H5学习分享

时间:2020-02-22 14:03:51      阅读:40      评论:0      收藏:0      [点我收藏+]

PC端宽高自适应:

宽度设置:不设置宽度或设置width:100%;(显示状态:块状元素跟随父元素宽度变化)

高度设置:1 - 不设置高度或设置height:auto;(显示状态:高度被内容撑开。弊端:内容较少时网页高度偏小)

           2 - 设置最小高度:min-height:;(显示状态:当内容超出最小高度时,容器被内容撑开,否则容器保持最小高度)

           注:低版本浏览器(例:IE6浏览器不支持min-height,且会把height解析成最小高度)

       解决办法:用过滤器下划线 _ 属性:属性值;(只有IE6认识此过滤器)

                min-height:300px;

            _height:300px;

解决高度塌陷:

(子元素浮动,父元素没有添加高度,父元素会出现高度塌陷)

   1 - 给父元素添加overflow:hidden;(溢出隐藏,触发了BFC,弊端:会隐藏掉定位在当前元素以外的内容)

   2 - 在浮动元素下添加空元素,并添加css样式clear:both;(清除浮动,弊端:空元素会造成代码冗余)

   3 - 给塌陷的元素添加伪对象选择器 (万能清除法)::after{ content: ".";      /*在元素后添加内容 . */

                          display: block;              /*转成块元素 */
                              clear: both;                  /*清除浮动*/
                          height: 0;       /*内容高度为0*/
                          overflow: hidden;    /*溢出隐藏*/
                          visibility: hidden;}   /*元素被隐藏,但空间仍然存在*/

BFC及BFC触发条件

BFC:块级格式化上下文(独立渲染区),只有块级元素参与。(同属于一个BFC时的两个相邻box的margin会发生重叠,按最大值显示)

BFC触发条件:根元素html本身,float属性不为none时,position为absolute或fixed,overflow:hidden。

BFC应用:1 - 解决高度塌陷 --- 添加overflow:hidden触发BFC

     2 - 解决两个相邻盒子的margin重叠 --- 给其中一个元素添加父元素,让她们不属于同一个BFC

     3 - BFC区域不会与浮动的盒子重叠(例:自适应两栏布局,双飞燕布局)

<style>  

html,body{
height: 100%;
}
.box_l{
height: 100%;
width: 300px;
background: pink;
float: left;
}
.box_r{
height: 100%;
background: blue;
overflow: hidden;
}
</style>
<body>
<div class="box_l"></div>
<div class="box">
<div class="box_r"></div>
</div>
</body>

CSS3属性

一 文本阴影:

     text-shadow:属性值1(水平方向位置),属性值2(垂直方向位置),属性值3(阴影大小),属性值4(阴影颜色)

二 CSS3渐变

     1- 线性渐变:background:linear-gradient(direction,color-stop1,color-stop2...)

         direction:方向位置,默认为to bottom,即从上至下

         a:单一方向渐变:to left  到左侧(to right,to top,to bottom)

     b:对角渐变:to left top 到左上角 

   c:角度渐变:30 deg  (30度角)

    2- 径向渐变(必须加浏览器前缀):background:radial-gradient(center,shape,size,star-color...last-color)

     center参数:渐变点位置(left bottom 左下角,也可添加像素)

   大小:farthest-side       最远边

                  farthest-corner    最远角

      closest-corner     最近角

      closest-side        最近边       

    3- 重复性线性渐变:repeating-linear-gradient  

    4- 重复性径向渐变:repeating-radial-gradient

注:浏览器前缀:-webkit-  谷歌前缀 ,-moz-火狐前缀  ,-ms-IE前缀  , -o-欧鹏前缀           

过渡属性:必须通过鼠标划过触发

    1- transition-property:属性值1  参与过渡的属性值

    2- transition-duration:属性值2 过渡的持续时间

    3- transition-delay:属性值3 延迟过渡时间

    4- transition-timing-function: 属性值4 动画类型

 简写:transition:属性值1(需要参与过渡的属性 all 能支持的都会过渡变换),属性值2(过渡的时间,s秒,ms毫秒) ,

                          属性值3(延迟的时间,s秒,ms毫秒),属性值4(动画类型:匀速linear,匀加速,匀减速)

 

2020.02.17--02.21日H5学习分享

原文:https://www.cnblogs.com/hyt970328/p/12342896.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!