zoukankan      html  css  js  c++  java
  • html5+css3的神奇搭配

     

    1.关于浮动

    浮动的元素会脱离标准文档流(float),从而不占据空间,实现了一行排列多个元素的效果 ,但是又导致上级元素height消失,处理这种情况的方法就是有两种:

    1.第一种在css里写个伪类,哪些地方需要清除浮动,直接调用类名。

    .clearfix::after
    {
    display: block;
    clear: both;

    height: 0;

    content: ' ';

    }
    .clearfix
    {
    zoom: 1;
    }

    2.第二种情况就是溢出隐藏。

    overflow:hidden;

    zoom:1;

    2.静态定位,相对定位,绝对定位,固定定位

    1.静态定位:是元素的默认定位方式,不能使用top,bottom,left,right和z-index属性。

    2.相对定位:就是相对于当前的位置进行的left,top,right,bottom。

    3.绝对定位:脱离文档流,不占据空间,用position:absolute;这条语句。进行left,right,top,bottom进行相对于具有定位属性得父级元素进行定位,如果未找到就会依次向上寻找,直到找到body停止相对于浏览器窗口进行绝对定位。

    4.固定定位:设置position:fixed;,直接以浏览器窗口作为参考进行定位,它是浮动在页面中,元素位置不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响。

    3.css3响应式

    1.总体来说css3的响应式满足了所有分辨率的需求,@media媒体查询进行主流分辨率的响应式调节。

    2.切记代码中不可写固定高度!

  • 相关阅读:
    对数值计算numpy的一些总结,感兴趣的朋友可以看看
    mysql基础语法(部分)
    python_内建结构
    07_go语言基础
    06_go语言基础
    05_go语言基础常量
    04_go语言基础
    03_go语言基础
    02_go语言基础
    01_go语言基础
  • 原文地址:https://www.cnblogs.com/2019qing/p/12079860.html
Copyright © 2011-2022 走看看