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/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意,必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

原文地址:https://www.cnblogs.com/mingm/p/6561746.html