zoukankan      html  css  js  c++  java
  • JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置

    ---恢复内容开始---

    圆角矩形

    border-radius:50%  40%  30%  33px;   像素、百分比、小数( 0.5 )

            左上、右上、右下、左下

    权重:

    标签 1 ; 类选择器 10  ; ID选择器 100  ;行内样式 1000;  !important  无穷大;

    层级

      • 浮动/标准的盒子代码位置越往下,层级越高
      • 层级一样,代码在后面的盒子会压住前面的盒子
      • 浮动的盒子会压住标准的
      • 定位的盒子会压住浮动的
      • 高低和占不占位置无关,relative占位置,也比不占位置的浮动层级高
      • 层级为0的盒子,也比标准量和浮动的高
      • 层级为负数的盒子,比标准量和浮动低
      • 层级不取小数
      • Z-idex会导致有外边距的盒子压住另外的盒子
      • 定位比浮动高,浮动比标准高
      • 定位设置z-index:-1;后也比其他都低
      • 定位设置z-index:0;也比其他盒子高
      • 标准流中的盒子,代码越往下层级越高
      • 有外边距的盒子层级变高会压住其他相邻的盒子
      • 浮动的盒子尽量给宽高

    同一个父级元素,若浮动则一起浮动

    行高:line-height:也可以撑开盒子 

    文字不设置行高,默认是包含的文字的盒子的高度

    设置了定位不给left、top 值会出现bug

    行内元素有三像素的距离 、a标签之间有3像素的距离、图片之间也有3像素的距离 

    子盒子在父盒子居中

    让子盒子在父盒子水平居中,先绝对定位,left50%,然后margin – left:负子盒子的一半宽度;(垂直方向也适用)

     

    给html文档相邻的同级盒子设置浮动,会顶对齐

    文字不参与浮动   标准流中的文字不会被浮动的盒子遮挡 

    不是同一个父盒子的盒子浮动也会相互影响

     行内元素尽量不给font标签

    Position:relative/static;设置之后也不能给行内元素设置宽高,只能是浮动、absolute

    高和行高都可以撑开盒子,背景图不可以撑开盒子

    浮动宽度不够的问题

    父盒子宽度不够,又要子盒子浮动不掉下去

    如图,正常情况下,给绿色的盒子右浮动之后,由于父盒子的宽度不够,最后一个绿色盒子会被排列在第二行,

    但是如果想要绿色的盒子在一行内显示

    解决方法是,在给绿色加一个父盒子,也就是红色边框的盒子,只给红色边框盒子一个宽度属性就够了,这样,绿色的盒子就不会因为蓝色盒子的宽度不够而掉下去了

    超出的部分可以给父盒子(蓝色盒子)设置overflow:hidden;

    隐藏超出的部分

    关闭a 的链接:

      • Href=“javascript:(javascript:void(0));”;关闭a链接
      • A的href = “”:效果是刷新页面
      • Href = “#”:跳到页面顶部
    • Left的权限比right高,同时设置right的属性不起作用,top比bottom权限高
    • Rgba颜色模式
      • r红g绿b蓝a透明度(0-1)(1完全不透明)

    清除浮动

        清除浮动的原因:

        父盒子高度为0,子盒子全部浮动、定位,子盒子不会撑开父盒子,下面的元素会到子盒子的下面

        清除浮动的方法

      1.  clean:both

      2.  overflow:hidden ;(BFC)

      3.  加空标签

      4.  单伪元素/双伪元素

    //双伪元素
    clearfix:befor , clearfix:after {
            content: " 0" ;
            display:table;
        }
    
    clearfix:after {
            clear:both ;
        }
    clearfix {
            *zoom:1;
        }
    // 单伪元素
    clearfix:after {
        content:".";
        display:block ;
        height:0 ;
        line-height:0;
        visibility:hidden ;
        clear:both;
      }
    clearfix{
        zoom:1;
      }

    隐藏盒子

      1.  display:none ; 隐藏盒子 ,且 不占位置

      2.  voerflow:hidden;超出部分隐藏,不占位置;

      3.  visibility:hidden ;隐藏盒子,占位置 ;

      4.  opacity:0 ;    隐藏盒子,占位置;

      5.  position-left/top:-999em; 隐藏盒子,不占位置

    • 盒子的撑开与撑破
      • 子盒子设置的高度比父盒子设置的高度高,会撑破盒子
      • 父盒子不设置高度,子盒子设置高度会撑开盒子 

    电脑组成

    • CPU:中央处理器,电脑的大脑,用来计算收发指令
      • 英特尔i3/i5/i7;低端的性价比高
      • amd
      • 国产龙芯,最高2s版本,没有实现商业化,军队在使用
    • 服务器:特殊的电脑
    • 系统:麒麟系统(中标麒麟)
    • 硬盘:存储数据(永久性存储),读写机制慢
    • 显卡:图像显示,存储量、带宽、架构
    • 内存:存储数据(暂时性存储),CPU要执行的数据冲内存中取,内存中的数据冲硬盘中取。(堆和栈)
    • 驱动:让硬件和系统的兼容性更好

    作者:明明
    出处: http://www.cnblogs.com/mingm/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意,必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

  • 相关阅读:
    获取文件扩展名的几个函数
    Window下,在TEMP路径下生成一个临时文件名
    字符串中的TOUPPER函数
    字符串中的TRIM操作
    BIN转换成HEX格式及HEX转换成BIN的两个函数接口
    GMSSL在Window下的编译
    VS2012下自定义打开文件对话框
    Daliy Algorithm (graph,思维)-- day 59
    Daliy Algorithm (贪心,gcd)-- day 58
    图论--Floyd(弗洛伊德)算法
  • 原文地址:https://www.cnblogs.com/mingm/p/6561746.html
Copyright © 2011-2022 走看看