博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
sub,dl,dt,排版,横向滚动条,浮动元素居中,box-sizing
阅读量:6268 次
发布时间:2019-06-22

本文共 1820 字,大约阅读时间需要 6 分钟。

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

 

转载于:https://www.cnblogs.com/zmshare/p/6110998.html

你可能感兴趣的文章
BOOT.INI文件参数
查看>>
vmstat详解
查看>>
新年第一镖
查看>>
unbtu使用笔记
查看>>
MaxCompute 学习计划(一)
查看>>
OEA 中 WPF 树型表格虚拟化设计方案
查看>>
Android程序开发初级教程(一) 开始 Hello Android
查看>>
使用Gradle打RPM包
查看>>
“我意识到”的意义
查看>>
淘宝天猫上新辅助工具-新品填表
查看>>
再学 GDI+[43]: 文本输出 - 获取已安装的字体列表
查看>>
nginx反向代理
查看>>
操作系统真实的虚拟内存是什么样的(一)
查看>>
hadoop、hbase、zookeeper集群搭建
查看>>
python中一切皆对象------类的基础(五)
查看>>
modprobe
查看>>
android中用ExpandableListView实现三级扩展列表
查看>>
%Error opening tftp://255.255.255.255/cisconet.cfg
查看>>
java读取excel、txt 文件内容,传到、显示到另一个页面的文本框里面。
查看>>
《从零开始学Swift》学习笔记(Day 51)——扩展构造函数
查看>>