码迷，mamicode.com
首页 > 其他好文 > 详细

京东案例小知识2

时间：2017-07-14 18:09:12      阅读：178      评论：0      收藏：0      [点我收藏+]

标签：并且   需要   a标签   案例   order   alt   log   png   宽高   

小知识
 
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

标签：并且   需要   a标签   案例   order   alt   log   png   宽高   

原文地址：http://www.cnblogs.com/wdz1/p/7171675.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！