京东案例小知识2

小知识

 

1、同一个父级元素的盒子要么都设置浮动，要么都不设置

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

3、文字设置行高，默认是包含文字的盒子的高度

 

4、背景定位，poition，第一个值是左右，第二个值是上下。往上走的都是负值

 

5、position:absolute定位文字，可以脱离标准流，但是行高是可以让文字垂直居中。

 

 

6、里面的元素都是I标签行内元素包含着，当8 position:absolute定位的时候，不设置left的值，他会把前面元素的宽和panner值给预留出来。

 

7、设置了定位不给left/top值会出现bug(最好都给上)

 

8、功能性简单的模块就用简单的代码来写，代码量也少 （下面的文字链接直接用a写）

9、float浮动：文档相邻同级的盒子设置浮动，会找顶对齐

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

11、padding没有负值 

12、行内元素有三像素的距离

    a）a标签之间有3像素的距离

    B）图片之间有3像素的距离

 

圆角矩形

border-radius:宽/高一半

border-radius:50%;

border-radius:0.3em;（字体的高度）

border-radius:左上角 右上角  右下角  左下角

border-radius:俩个值是  左上角右下角  右上角左下角

border-radius:三个值是  左上角 右上角左下角 右下角

 

什么时候用margin和padding(不考虑宽高)

 

1、需要使用背景的时候用Padding

2、会出现外边距合并或者margin塌陷的时候用padding

3、行内元素上下只能设置padding,不能设置margin.(行内高16)

4、看border,border里面的padding,外面的是margin.

5、a链接，鼠标移上去会变色，或是小手padding，单纯的字变色用margin

6、看需求

 

层级使用条件 （自己高了，子级就高了）

1、必须有定位（除去static）

2、用z-index来控制层级数

 

li和a的用法

1、li包含a(给li设置宽高，padding撑开盒子)

2、a撑开li(给a设置宽高，padding撑开盒子 文字多少不同，不能固定宽，给padding)

 

盒子撑开和撑破

1、没有高度的盒子，撑开说明盒子变成那么大

2、有高度会撑破，盒子还是原来的高

 

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

（也会相互对齐）并且占领下面浮动盒子的位置

 

 

li和a的用法

1、li包含a(给li设置宽高，padding撑开盒子)

2、a撑开li(给a设置宽高，padding撑开盒子 文字多少不同，不能固定宽，给padding)