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要执行的数据冲内存中取，内存中的数据冲硬盘中取。（堆和栈）
• 驱动：让硬件和系统的兼容性更好