css的font-size属性一定要带px单位，font-weight:700【千万不要带单位哦】就等于font-weight:bold加粗

1.如何像淘宝页面一样，随着浏览器的减小而保持内容区大小不变，减少的只是两边的空白区大小呢？

通过内层div设置margin为0 auto就可以了！

  1.          <style type="text/css">
  2.              *{
  3.                  margin:0;
  4.                  padding:0;
  5.              }
  6.              .wrapper{
  7.                  height:30px;
  8.                  background-color: #123;
  9.              }
  10.              .content{
  11.                  width: 1200px;
  12.                  height: 30px;
  13.                  background-color: #0f0;
  14.                  margin: 0 auto;/*这里的auto就是自适应的意思，它会随着浏览器框的缩小而减小*/
  15.              }
  16.          </style>
  17.      </head>
  18.      <body>
  19.           <div class="wrapper">
  20.               <div class="content"></div>
  21.           </div>
  22.      </body>

2.HTML中的元素有三种：inline、inline-block、block

通常我们称凡是带了inline、inline-block的元素为文本类元素，也就是凡是带有inline的元素【inline、inline-block】都有文本类特点，所以我们称之为文本类元素！

3.span本来是行级元素，所以我们设置宽和高不好使，如下所示：

  1.      <head>
  2.          <meta charset="UTF-8">
  3.          <title>Insert title here</title>
  4.          <style type="text/css">
  5.              span{
  6.                  width:100px;
  7.                  height: 100px;
  8.                  background-color: red;
  9.              }
  10.          </style>
  11.      </head>
  12.      <body>
  13.           <span>123</span>
  14.      </body>

效果如下所示：

如果我们给这个css代码加了：position：absolute或者 float:left/right，那么就会惊奇的看到对span标签设置的宽和高都好使了，如下所示：

  1.      <head>
  2.          <meta charset="UTF-8">
  3.          <title>Insert title here</title>
  4.          <style type="text/css">
  5.              span{
  6.                  width:100px;
  7.                  height: 100px;
  8.                  background-color: red;
  9.                  position: absolute;
  10.              }
  11.          </style>
  12.      </head>
  13.      <body>
  14.           <span>123</span>
  15.      </body>

这是为什么呢？

这是因为一旦我们设置了position：absolute或者 float:left/right，那么系统本身就会在底层自动将该HTML标签的inline转换为inline-block;所以你会看到，一旦我们设置了position:absolute或者 float:left/right，就可以给该标签设置宽和高了！

  1.      <head>
  2.          <meta charset="UTF-8">
  3.          <title>Insert title here</title>
  4.          <style type="text/css">
  5.              *{
  6.                  margin:0;
  7.                  padding:0;
  8.              }
  9.              span{
  10.                  font-size: 50px;
  11.              }
  12.          </style>
  13.      </head>
  14.      <body>
  15.           <div>
  16.               你们刘哥很帅<span>哈哈</span>
  17.           </div>
  18.      </body>

你会看到，在一行文本里面，实际上文本是底对齐的！这是文本和文本之间的特点

如果我现在把文本和图片放在一起呢？

  1.      <head>
  2.          <meta charset="UTF-8">
  3.          <title>Insert title here</title>
  4.      </head>
  5.      <body>
  6.           <img  src="1.png">呵呵
  7.      </body>

效果也是图片和文字是底对齐的！

同理，如果我将一个行级元素变成一个行级块元素，那么行级块元素和文字也是底对齐的！

  1.      <head>
  2.          <meta charset="UTF-8">
  3.          <title>Insert title here</title>
  4.          <style type="text/css">
  5.              span{
  6.                  display:inline-block;
  7.                  width:100px;
  8.                  height:100px;
  9.                  background-color: red;
  10.              }
  11.          </style>
  12.      </head>
  13.      <body>
  14.           <span></span>哈哈
  15.      </body>

上面也是底对齐的，这也没什么问题！但是如果我现在往span标签里面加点内容，如下：

  1.      <head>
  2.          <meta charset="UTF-8">
  3.          <title>Insert title here</title>
  4.          <style type="text/css">
  5.              span{
  6.                  display:inline-block;
  7.                  width:100px;
  8.                  height:100px;
  9.                  background-color: red;
  10.              }
  11.          </style>
  12.      </head>
  13.      <body>
  14.           <span>This</span>哈哈
  15.      </body>

你会看到，这里文字将不是底对齐了，它是和它里面的文字底对齐了！

这就是浏览器的另外一个特点：一旦一个行级块元素或者一个文本类元素里面包含文字了，那么外面的文字就会和它们里面的文字底对齐！

如果里面的文字很大的话，依然是和它里面的文字底对齐：

  1.      <head>
  2.          <meta charset="UTF-8">
  3.          <title>Insert title here</title>
  4.          <style type="text/css">
  5.              span{
  6.                  display:inline-block;
  7.                  width:100px;
  8.                  height:100px;
  9.                  background-color: red;
  10.                  font-size: 50px;
  11.              }
  12.          </style>
  13.      </head>
  14.      <body>
  15.           <span>This</span>哈哈
  16.      </body>

那这里能不能调整一下对齐线呢，难道非要是底对齐么，当然可以调节，这里有个属性叫：vertical-align,该属性值可以为正数像素【3px】，也可以为负数【-5px】，当然也可以是middle、如下所示：

  1.      <head>
  2.          <meta charset="UTF-8">
  3.          <title>Insert title here</title>
  4.          <style type="text/css">
  5.              span{
  6.                  display:inline-block;
  7.                  width:100px;
  8.                  height:100px;
  9.                  background-color: red;
  10.                  font-size: 50px;
  11.                  vertical-align: -15px;
  12.              }
  13.          </style>
  14.      </head>
  15.      <body>
  16.           <span>This</span>哈哈
  17.      </body>

4.如何实现像淘宝这样的导航栏，一行文字中的内容一部分靠左，一部分靠右，实际上也很简单，最外层是一个大盒子，里面有两个小盒子，然后一个向左浮动，一个向右浮动就OK了，基本上都是这么实现的，如下所示：

  1.      <body>
  2.           <div>
  3.               <ul style="float: left"></ul>
  4.               <ul style="float: right"></ul>
  5.           </div>
  6.      </body>

CSS几个要点补充的更多相关文章

  1. 前端总结·基础篇·CSS（三）补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  2. [.NET] 《Effective C#》快速笔记 - C# 高效编程要点补充

    <Effective C#>快速笔记 - C# 高效编程要点补充 目录 四十五.尽量减少装箱拆箱 四十六.为应用程序创建专门的异常类 四十七.使用强异常安全保证 四十八.尽量使用安全的代码 ...

  3. 《Effective C#》快速笔记（六）- - C# 高效编程要点补充

    目录 四十五.尽量减少装箱拆箱 四十六.为应用程序创建专门的异常类 四十七.使用强异常安全保证 四十八.尽量使用安全的代码 四十九.实现与 CLS 兼容的程序集 五十.实现小尺寸.高内聚的程序集 这是 ...

  4. 高效CSS开发核心要点摘录

    做网站的,我们都知道尽量减少请求数,压缩CSS代码量,使用高效CSS选择符等方式可以来提高网站的载入速度和访问速度,也就是优化网站的性能. 下面分析了一些CSS的书写方式,很多都是我们知道并且正在使用 ...

  5. CSS琐碎知识点(持续补充)

    一.字体单位,pt?px?em?rem? pt:磅,一种固定长度的绝对的度量单位,是能够使用测量设备测得的长度,印刷业上经常使用,一般用于页面打印排版. px:屏幕设备上能显示出的最小的一个物理点,这 ...

  6. 【简记】HTML + CSS 的一些要点（不定时更新）

    1.td占据多行 / 列时,其挤开的 td 不写(但是包裹 td 的 tr 要写) 2. display:td 的元素中的文本默认垂直不居中(table中的td中的文本是垂直居中的) 3.th虽然定义 ...

  7. css优先级 中文版MDN补充翻译

    原文地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity css的MDN中文版,这一页是讲css的优先级的. 读到文章的最后, ...

  8. css和xpath定位补充

    定位的网页的地址:https://item.jd.com/100000323510.htmlxpath绝对定位: 1 以"/"开头的是绝对定位 2 /html/body/div[1 ...

  9. C#要点补充

    1字符串与时间的互转 DateTime.TryParse将空字符串.为null或格式不正确,则转换为的DateTime所代表的值为:0001/1/1 0:00:00,此为DateTime.MinVal ...

随机推荐

  1. AES和RSA加解密的Python用法

    AES AES 是一种对称加密算法,用key对一段text加密,则用同一个key对密文解密, from Crypto import Random from Crypto.Hash import SHA ...

  2. 64位 windows10，安装配置MYSQL8.0.13

    MySQL的安装配置过程,一查网上一大堆,但是每个人在安装配置的过程中都会碰到一些问题,因为安装的版本不一样,有些命令可能就不适用了.所以安装之前一定先确认好你的版本号. 下面开始安装MYSQL8.0 ...

  3. 利用Python半自动化生成Nessus报告

    0x01 前言 Nessus是一个功能强大而又易于使用的远程安全扫描器,Nessus对个人用户是免费的,只需要在官方网站上填邮箱,立马就能收到注册号了,对应商业用户是收费的.当然,个人用户是有16个I ...

  4. [原]Jenkins(一)---我理解的jenkins是这样的（附全套PDF下载）

    /** * lihaibo * 文章内容都是根据自己工作情况实践得出. *版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/5330 ...

  5. IOS 圆形进度条

    // // CCProgressView.h // Demo // // Created by leao on 2017/8/7. // Copyright © 2017年 zaodao. All r ...

  6. js中的运算符优先级

    运算符有何很多,基本的可能都比较熟,单有些优先级很难记住.建议使用“()”将复杂的运算表达式区分好优先级. 我给运算符优先级做了一首小打油诗. 括号成员new函数 直new后置累计数 单目幂算乘除模 ...

  7. spring boot中的jave注解学习

    在spring中,不仅框架作者会使用java注解,开发者也常使用. 可以随手给个例子:在org.springframework.boot.autoconfigure.jdbc.DataSourcePr ...

  8. 赶鸭子上架的cdq分治

    前置技能:归并排序,树状数组. cdq分治主要是用来离线解决一些奇怪的问题的.可以用来代替一些高级数据结构比如树套树或者KD-Tree之类的... 话说挑战2上的KD-Tree我到现在还没开始学... ...

  9. MSSQL：查看所有触发器信息的命令

    转自:http://www.2cto.com/database/201307/228708.html 编写程序,有时或为了偷懒,或为更简单地实现所需功能,使用了触发器.这可是把双刃剑,用得不好,程序出 ...

  10. DataGrid表格某单元格数据填入是否正确的验证---MiniUI使用

    示例: <div id="datagrid1" class="mini-datagrid" oncellvalidation="onCellVa ...