sub,dl,dt,排版,横向滚动条,浮动元素居中,box-sizing

时间:2022-08-30 16:15:18

1.sub标签 下标

2.dl,dt,dd用的地方通常是具有标题,而标题下对应有若干列表简单的(栏目标题+对应标题列表)和标题对应下面有内容。在使用时候我们能简洁html代码情况下,学会灵活使用dl dt dd,

3.实现左侧自适应右侧固定宽度的布局

  3.1  rightbar必须在left前面,因为块级元素在前面的话,浮动元素就自动到下一行了

<div class="wrap">
<div class="rightbar"></div>
<div class="left"></div>
</div>
.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;

<div class="container">
<div class="left"></div> //空白字符
<div class="right"></div>
</div>

6.如何让tab栏nav宽度大于屏幕宽度时,里面的元素不换行显示:用横向滚动条,将UL包裹在div.wrap里,当UL宽度大于屏幕宽度时,将UL宽度设置为所以li宽度的总和,div设置overflow-x:scroll

  <div class="nav-wrap">
<ul class="nav nav-tabs product-tab" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">特别推荐</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">微投资</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">微小宝</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">微消费</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">微增利</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">微金宝</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">微转让</a></li>
<li class="pull-right hidden-sm hidden-xs"><a href="#settings" >更多</a></li>
</ul>
</div>
 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

sub,dl,dt,排版,横向滚动条,浮动元素居中,box-sizing的更多相关文章

  1. 如何垂直居中元素(浮动元素&amp&semi;居中一个&lt&semi;img&gt&semi;)?

    1.如何居中一个浮动元素? 方法一:已知元素的高度   <!DOCTYPE html> <html lang="en"> <head> < ...

  2. css 浮动元素居中

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  3. H5禁止底部横向滚动条,使一个元素居中

    1.禁止底部横向滚动条 选择元素设置样式 { overflow-y:auto; overflow-x:hidden } 2.元素居中 { margin-left:auto ; margin-right ...

  4. 用CSS 实现 浮动元素的 水平居中

    问题描述: 基本的html结构: <div> <!-- <span>1</span> <span>2</span> <span& ...

  5. CSS元素居中汇总

    总结实现不同类型元素居中的几种方法: 一.把margin值设置为auto(实现水平居中) 可以实现元素水平居中对齐 原理:使  margin-left=margin-right  如果设置  marg ...

  6. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一.dl dt dd认识 ...

  7. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  8. 边框,元素居中,盒子模型,margin&comma;display&comma;overflow&comma;textarea&comma;float&comma;浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  9. HTML5标签选择,图文混排使用dl dt dd

    图文混排,可以使用 dl dt dd(dd 和 dt 是同级,不可以嵌套,没有先后顺序) 1,上面红色部分是标题,可以使用h1里面包含一个span标签,样式一样,所以两个可以一起写. 2,上面黑色部分 ...

随机推荐

  1. C&num; 先说IEnumerable,我们每天用的foreach你真的懂它吗?

    原文: http://www.cnblogs.com/zhaopei/p/5769782.html

  2. select&lowbar;tag 选择后自动提交,并且保持选择的项

    使用select来选择,,,选择就响应真是花了好大的功夫....你妹...在controller设置变量来储存选择后的值...js中如果select选择为空那么传入的值是””而不是null selec ...

  3. Lua xavante WEB server实现xmlrpc服务器端

    xavante xavante是一个使用lua实现的遵守http1.1的web server,支持wsapi. 依赖库: xavante核心 -- lua, copas(纯lua编写,网络连接coro ...

  4. List应用举例

    1.集合的嵌套遍历 学生类: package listexercise; /** * Created by gao on 15-12-9. */ public class Student { priv ...

  5. java提高篇(二二)-----LinkedList

    摘自http://blog.csdn.net/chenssy/article/details/18099417  java提高篇(二二)-----LinkedList 一.概述 LinkedList与 ...

  6. mac系统奔溃无法启动时,如何备份重要资料

    虽然说苹果系统以稳定性获得高度好评,但是作为一名程序员,还是要考虑到系统奔溃的情况. 当遇到系统奔溃,无法启动,而我们还没有备份电脑里面的重要资料,这时候不用着急.可以用下面的 方法来拯救你的苹果电脑 ...

  7. 最快的方法来清除Chrome浏览器DNS高速缓存

    最快的方法是直接数据url.那么不需要清除dns高速缓存. chrome://net-internals/#dns 一般步骤,要经过下列几项. Chrome - > 扳手 - > 选项 - ...

  8. 一把刀系统维护工具箱 v1&period;6 绿色版

    软件名称: 一把刀系统维护工具箱 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win8 / Win7 / Vista / WinXP 软件大小: 13.7MB 图片预览: 软件简介: 一把 ...

  9. Visual Studio 实用技能

    1快捷键使用 1. Ctrl K F 代码对齐

  10. for语句,你真正搞懂了吗?

    今天看书时,无意间看到了这个知识点,啥知识点?也许在各位大神看来,那是再简单不过的东西了. 说来惭愧.原来直到今天我才真正搞懂for语句. for语句的结构如下所示: for(语句A;语句B;语句C) ...