1.sub标签 下标
2.dl,dt,dd用的地方通常是具有标题,而标题下对应有若干列表简单的(栏目标题+对应标题列表)和标题对应下面有内容。在使用时候我们能简洁html代码情况下,学会灵活使用dl dt dd,
3.实现左侧自适应右侧固定宽度的布局
3.1 rightbar必须在left前面,因为块级元素在前面的话,浮动元素就自动到下一行了
.wrap { height: 50px; } .left { margin-right: 200px; background-color: green; height: 50px; } .rightbar { float: right; width: 200px; background-color: red; height: 50px;}
3.2 使用position:absolute 可以实现,但是如果rightbar高度比left高就会影响下一行元素
3.3 使用一个div包裹左侧div并浮动,通过外层div负margin,里面div正margin实现
3.4 传送门: http://jo2.org/css-auto-adapt-width/
4.一些名词: tooltips用于鼠标移到一些标签上会显示提示信息的情况
5.换行会出现空白字符,解决方案:给父元素设置font-size: 0;
//空白字符
6.如何让tab栏nav宽度大于屏幕宽度时,里面的元素不换行显示:用横向滚动条,将UL包裹在div.wrap里,当UL宽度大于屏幕宽度时,将UL宽度设置为所以li宽度的总和,div设置overflow-x:scroll
var product_nav = $("#product-decoration .product-tab"); var product_nav_width = 30; product_nav.children().each(function(index,element) { product_nav_width += element.offsetWidth; }) if(product_nav_width > $(window).width()) { $("#product-decoration .product-tab").css("width",product_nav_width); $("#product-decoration .nav-wrap").css("overflow-x","scroll"); //console.log(product_nav_width) }else { $("#product-decoration .nav-wrap").css("overflow-x","auto"); }
7.box-sizing
有3种值,content-box(默认),padding-box(有兼容问题),border-box