CSS几个要点补充
css的font-size属性一定要带px单位，font-weight:700【千万不要带单位哦】就等于font-weight:bold加粗
1.如何像淘宝页面一样，随着浏览器的减小而保持内容区大小不变，减少的只是两边的空白区大小呢？
通过内层div设置margin为0 auto就可以了！
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrapper{
height:30px;
background-color: #123;
}
.content{
width: 1200px;
height: 30px;
background-color: #0f0;
margin: 0 auto;/*这里的auto就是自适应的意思，它会随着浏览器框的缩小而减小*/
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
2.HTML中的元素有三种：inline、inline-block、block
通常我们称凡是带了inline、inline-block的元素为文本类元素，也就是凡是带有inline的元素【inline、inline-block】都有文本类特点，所以我们称之为文本类元素！
3.span本来是行级元素，所以我们设置宽和高不好使，如下所示：
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span{
width:100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<span>123</span>
</body>
效果如下所示：
如果我们给这个css代码加了：position：absolute或者 float:left/right，那么就会惊奇的看到对span标签设置的宽和高都好使了，如下所示：
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span{
width:100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<span>123</span>
</body>
这是为什么呢？
这是因为一旦我们设置了position：absolute或者 float:left/right，那么系统本身就会在底层自动将该HTML标签的inline转换为inline-block;所以你会看到，一旦我们设置了position:absolute或者 float:left/right，就可以给该标签设置宽和高了！
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
span{
font-size: 50px;
}
</style>
</head>
<body>
<div>
你们刘哥很帅<span>哈哈</span>
</div>
</body>
你会看到，在一行文本里面，实际上文本是底对齐的！这是文本和文本之间的特点
如果我现在把文本和图片放在一起呢？
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="1.png">呵呵
</body>
效果也是图片和文字是底对齐的！
同理，如果我将一个行级元素变成一个行级块元素，那么行级块元素和文字也是底对齐的！
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span{
display:inline-block;
width:100px;
height:100px;
background-color: red;
}
</style>
</head>
<body>
<span></span>哈哈
</body>
上面也是底对齐的，这也没什么问题！但是如果我现在往span标签里面加点内容，如下：
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span{
display:inline-block;
width:100px;
height:100px;
background-color: red;
}
</style>
</head>
<body>
<span>This</span>哈哈
</body>
你会看到，这里文字将不是底对齐了，它是和它里面的文字底对齐了！
这就是浏览器的另外一个特点：一旦一个行级块元素或者一个文本类元素里面包含文字了，那么外面的文字就会和它们里面的文字底对齐！
如果里面的文字很大的话，依然是和它里面的文字底对齐：
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span{
display:inline-block;
width:100px;
height:100px;
background-color: red;
font-size: 50px;
}
</style>
</head>
<body>
<span>This</span>哈哈
</body>
那这里能不能调整一下对齐线呢，难道非要是底对齐么，当然可以调节，这里有个属性叫：vertical-align,该属性值可以为正数像素【3px】，也可以为负数【-5px】，当然也可以是middle、如下所示：
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span{
display:inline-block;
width:100px;
height:100px;
background-color: red;
font-size: 50px;
vertical-align: -15px;
}
</style>
</head>
<body>
<span>This</span>哈哈
</body>
4.如何实现像淘宝这样的导航栏，一行文字中的内容一部分靠左，一部分靠右，实际上也很简单，最外层是一个大盒子，里面有两个小盒子，然后一个向左浮动，一个向右浮动就OK了，基本上都是这么实现的，如下所示：
<body>
<div>
<ul style="float: left"></ul>
<ul style="float: right"></ul>
</div>
</body>
CSS几个要点补充的更多相关文章
- 前端总结·基础篇·CSS（三）补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
- [.NET] 《Effective C#》快速笔记 - C# 高效编程要点补充
<Effective C#>快速笔记 - C# 高效编程要点补充 目录 四十五.尽量减少装箱拆箱 四十六.为应用程序创建专门的异常类 四十七.使用强异常安全保证 四十八.尽量使用安全的代码 ...
- 《Effective C#》快速笔记（六）- - C# 高效编程要点补充
目录 四十五.尽量减少装箱拆箱 四十六.为应用程序创建专门的异常类 四十七.使用强异常安全保证 四十八.尽量使用安全的代码 四十九.实现与 CLS 兼容的程序集 五十.实现小尺寸.高内聚的程序集 这是 ...
- 高效CSS开发核心要点摘录
做网站的,我们都知道尽量减少请求数,压缩CSS代码量,使用高效CSS选择符等方式可以来提高网站的载入速度和访问速度,也就是优化网站的性能. 下面分析了一些CSS的书写方式,很多都是我们知道并且正在使用 ...
- CSS琐碎知识点(持续补充)
一.字体单位,pt?px?em?rem? pt:磅,一种固定长度的绝对的度量单位,是能够使用测量设备测得的长度,印刷业上经常使用,一般用于页面打印排版. px:屏幕设备上能显示出的最小的一个物理点,这 ...
- 【简记】HTML + CSS 的一些要点（不定时更新）
1.td占据多行 / 列时,其挤开的 td 不写(但是包裹 td 的 tr 要写) 2. display:td 的元素中的文本默认垂直不居中(table中的td中的文本是垂直居中的) 3.th虽然定义 ...
- css优先级 中文版MDN补充翻译
原文地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity css的MDN中文版,这一页是讲css的优先级的. 读到文章的最后, ...
- css和xpath定位补充
定位的网页的地址:https://item.jd.com/100000323510.htmlxpath绝对定位: 1 以"/"开头的是绝对定位 2 /html/body/div[1 ...
- C#要点补充
1字符串与时间的互转 DateTime.TryParse将空字符串.为null或格式不正确,则转换为的DateTime所代表的值为:0001/1/1 0:00:00,此为DateTime.MinVal ...
随机推荐
- GRE封装解封装过程
GRE(Generic Routing Encapsulation,通用路由封装)协议是对某些网络层协议(IPX, AppleTalk, IP,etc.)的数据报文进行封装,使这些被封装的数据报文能够 ...
- Linux 文件删除原理_009
***了解Linux文件删除原理先了解一下文件inode索引节点,每个文件在Linux系统里都有唯一的索引节点(身份证号) inode.如果文件存在硬链接,那这个文件和这个文件的硬链接的inode是相 ...
- node-sass 安装失败 Failed at the node-sass@4.9.2 postinstall script的解决
控制台运行npm install时报错,报错信息如下: npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! node-sass@4.9.2 postins ...
- Debian/Ubuntu pip default install to $HOME/.local
pip default install to $HOME/.local on Debian/Ubuntu After pip 8.1.1-2 on Debian or Ubuntu you can p ...
- Fiddler 会话过滤功能
我们访问任何网址都会被 Fiddler 捕获,但有时我们只想捕获某个地址,可以使用 Fiddler 的会话过滤,如下我们只过滤出百度的域名 如下,切换到 Filters --- 把 Use Filte ...
- 关于ping地址的几个意义
1.ping 127.0.0.1 判断电脑的tcp/ip协议栈有没有问题 2.ping 本机ip 判断电脑的网卡驱动有没有问题 3.ping 网关 判断数据是否可以到达路由 4.ping www.ba ...
- linux下GPRS模块使用AT命令实现拨接电话，发中英文短信
开发板 :fl2440 cpu : s3c2440(arm9) 开发模块 :A7(GPRS/GPS) 远程登陆软件:PUTTY **** ...
- Wireshark安装使用及报文分析（图文详解）
Wireshark是世界上最流行的网络分析工具.这个强大的工具可以捕捉网络中的数据,并为用户提供关于网络和上层协议的各种信息.与很多其他网络工具一样,Wireshark也使用pcapnetwork l ...
- POI导出Excel发现不可读取的内容
环境说明:MyEclipse Tomcat7.0 通过后台查询数据,导出Excel在打开时会出现以下提示: 点击否,则不显示任何内容,点击是,弹出 查看修改记录为: 通过WPS打开不会出现任何提示,可 ...
- Go学习笔记（五）Go命令工具
上篇Go学习笔记(四)Go自动化测试框架 1.go build 这个命令可以直接使用,也可以带上代码包或源码文件使用. 如果是直接使用,表示试图编译当前目录所对应的代码包,如果当前目录不是一个有效的代 ...