一、            webstorm取色技巧：webstorm内置了颜色取色器，我们对某种颜色未知的时候，可以利用下图中的取色器，进行颜色识别。

二、系统会默认给body添加外边距，因此我们对于这种情况应该首先去掉这些内外边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等，所以在企业开发过程中，编写代码之前第一件事情，就是清空默认的边距。

如何清空呢？

我们利用前面学过的通配符选择器，给默认标签去掉属性，因为优先级低，所以不影响我们已经设置好的标签，只给没有设置的标签进行去除边距

<style>

        *{

            magrin:0;

            padding:0;

        }

 ..........省略代码..........

注意点：通配符标签会遍历当前界面中的所有标签，会影响我们的性能，但是不用担心大牛已经帮我找好了解决措施。

在百度上搜索“yui css reset",我们进入网页：https://yuilibrary.com/yui/docs/cssreset/

我们进入上面截图中的网址，这里有一段代码，我们复制粘贴到style标签下面就可以了。

       body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{

            margin:0;padding:0

        }

三、行高和字号

1.行高：在CSS中所有的行都是有行高的。

2.注意点：

（1）我们在盒子中，如果没设置盒子的高度，但是这个盒子中有文字，那么系统也会给盒子添加高度，这个高度等于文字的行高

（2）行高和盒子高不是同一个概念。

（3）文字在行高中默认居中的。

（4）在企业开发中我们经常将合资的高度和行高设置为一致的，那么这样我们就可以保证一行文字在合资的高度中是垂直剧中的。

（4）格式：line-height:数值px;

这里的数值是指这行文字整体的数值。

举个例子：

        div{

            border:black 1px solid;

            width:300px;

            height: 20px;

            line-height:50px;}

..........省略代码.........

<div>我是一段文字</div>

我们可以看到，这样设置盒子高度小于文字行高，文字就溢出了。

（5）在企业开发过程中，如果一个盒子有多行文字就不能使用设置行高等于盒子高来达到让文字垂直居中的目的，只能通过设置padding计算数值来让文字居中​。

        div{

            /*box-sizing: border-box;*/

            border:black 1px solid;

            width:300px;

            height: 50px;

            line-height:50px;

            padding-bottom:50px;

        }

    </style>

</head>

<body>

<div>

    我是一段文字

    <br>

    我是一段文字

</div>

​四、源码：

d117and118_line_height.html地址:

https://github.com/ruigege66/HTML_learning/blob/master/d117and118_line_height.html

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载42-清空默认边距、文字行高的更多相关文章

  1. 解决li中文字行高对齐

    <div class="A_content_1"> <li>座右铭: <input class="A_ct1" type=&quo ...

  2. iview 标题内边距过大； 调整iview 单元格内边距、行高；

    1css代码: /*调整table cell间隔和行高*/ .ivu-table-cell { padding-left: 1px; padding-right: 1px; } .ivu-table- ...

  3. H5 54-清空默认边距

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS.03 -- 浏览器行高、字体；盒子模型--边框、内边距、外边距

    如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件   ctrl+n 打开文件  ctrl+o 调出和隐藏标尺 ctrl+r ...

  5. ASP.NET TextBox 当鼠标点击后清空默认提示文字

    ASP.NET TextBox 当鼠标点击后清空默认提示文字 [ 方法一] 前台代码: <div>    <asp:TextBox ID="txtName" ru ...

  6. 如何清空css 的默认边距

    在网页开发中,html的元素,有部分元素默认是有内外边距的,例如body 元素,是有默认边距的 所以在通常情况下,我们都要先清空元素的内外边距:使用通配符选择器* 清空元素的内边距和外边距 ;; } ...

  7. iOS7 修改导航系统默认返回按钮文字及颜色

    //iOS7 修改系统默认返回按钮文字及颜色 UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithTitle:@"返" ...

  8. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  9. Cell 动态行高文字显示不全问题探索

    目录 问题概述 一.新建工程 二.尝试复现问题 尝试解决 修改contentLblBtmCon优先级为High(750) 修改contentLblBtmCon优先级为Low(250) 小结 其他解决思 ...

随机推荐

  1. Docker运行dotnetcore

                    windows下安装docker 参考: https://www.jianshu.com/p/502b4ac536ef https://docs.docker.com/ ...

  2. 华为2019年NE40E-X8，承诺命令

    commit每敲一行命令,都得确认一下.以防误操作.

  3. Configuration on demand is not supported by the current version of the Android Gradle plugin since you are using Gradle version 4.6 or above. Suggestion: disable configuration on demand by setting org

    androidStudio打开cocos3.17.2Lua项目时,出现了 Configuration on demand is not supported by the current version ...

  4. TKinter当Label绑定bind事件时传参方法

    记录下tkinter的 当在label绑定bind事件时,遇到需要传参时的解决方法(因为有event存在 所以不能直接传参) https://www.cnblogs.com/liyuanhong/ar ...

  5. java并发编程-12个原子类

    背景 多线程更新变量的值,可能得不到预期的值,当然增加syncronized关键字可以解决线程并发的问题. 这里提供另外一种解决问题的方案,即位于 java.util.concurrent.atomi ...

  6. centos7编译安装Zabbix-4.2.4及设置邮件告警教程（超详细每步都有截图）

    Zabbix-4.2.4安装及配置 此安装基于centos7的LNMP环境下,如未安装LNMP还可参考本人其他随笔 第一步:上传下载 1.前往https://www.zabbix.com/downlo ...

  7. navicat的一些常用快捷键

    Navicat可以支持连接多种数据库,使用上的功能也比较强大. 如果使用了IDEA内置的数据库工具(个人喜欢用这个)或是SQL Server官方的数据库管理工具的话,会发现使用上都存在区别,区别就主要 ...

  8. Java题库——chapter7 多维数组

    1)Which of the following statements are correct? 1) _______ A)char[ ][ ] charArray = {{'a', 'b'}, {' ...

  9. 构建和管理有效API市场的关键步骤

    API市场关键要点 各个行业的公司正在寻找通过外部API扩展服务来塑造数字业务的方法.然而,要获得API的真正好处,是需要超越基本的API管理,再到创建API市场,这是一种专注于连接生产者和消费者的专 ...

  10. 松软科技web课堂:SQLServer之ROUND() 函数

    ROUND() 函数 ROUND 函数用于把数值字段舍入为指定的小数位数. SQL ROUND() 语法 SELECT ROUND(column_name,decimals) FROM table_n ...