首页 > 代码库 > 京东案例小知识2
京东案例小知识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)
京东案例小知识2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。