HTML连载42-清空默认边距、文字行高
一、 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-清空默认边距、文字行高的更多相关文章
- 解决li中文字行高对齐
<div class="A_content_1"> <li>座右铭: <input class="A_ct1" type=&quo ...
- iview 标题内边距过大； 调整iview 单元格内边距、行高；
1css代码: /*调整table cell间隔和行高*/ .ivu-table-cell { padding-left: 1px; padding-right: 1px; } .ivu-table- ...
- H5 54-清空默认边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS.03 -- 浏览器行高、字体；盒子模型--边框、内边距、外边距
如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件 ctrl+n 打开文件 ctrl+o 调出和隐藏标尺 ctrl+r ...
- ASP.NET TextBox 当鼠标点击后清空默认提示文字
ASP.NET TextBox 当鼠标点击后清空默认提示文字 [ 方法一] 前台代码: <div> <asp:TextBox ID="txtName" ru ...
- 如何清空css 的默认边距
在网页开发中,html的元素,有部分元素默认是有内外边距的,例如body 元素,是有默认边距的 所以在通常情况下,我们都要先清空元素的内外边距:使用通配符选择器* 清空元素的内边距和外边距 ;; } ...
- iOS7 修改导航系统默认返回按钮文字及颜色
//iOS7 修改系统默认返回按钮文字及颜色 UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithTitle:@"返" ...
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- Cell 动态行高文字显示不全问题探索
目录 问题概述 一.新建工程 二.尝试复现问题 尝试解决 修改contentLblBtmCon优先级为High(750) 修改contentLblBtmCon优先级为Low(250) 小结 其他解决思 ...
随机推荐
- iOS中截取字符串指定位置
直接上代码: NSString *string = @"今天是个好日子,忘记穿秋裤了"; NSString *string1 = [];//截取掉下标7之后的字符串 NSStrin ...
- SpringBoot项目下的JUnit测试
在SpringBoot项目里,要编写单元测试用例,需要依赖4个jar.一个是最基本的JUnit,然后是spring-test和spring-boot-test. <!--test--> & ...
- Tornado—options.define()方法与options.options解读
tornado为我们提供了一个便捷的工具,tornado.options模块——全局参数定义.存储.转换. tornado是facebook开源的非阻塞web容器,类似java的netty,torna ...
- 你真的理解Java 注解吗？
你真的理解Java 注解吗? 1.什么是注解? 官方解释: Java 注解用于为 Java 代码提供元数据.作为元数据,注解不直接影响你的代码执行,但也有一些类型的注解实际上可以用于这一目的.Java ...
- 二维数组中的查找（剑指offer_4）
给定一个二维数组,其每一行从左到右递增排序,从上到下也是递增排序.给定一个数,判断这个数是否在该二维数组中. Consider the following matrix: [ [1, 4, 7, 11 ...
- button的onclick事件给函数传递参数
ul+='<button onclick="pay(\''+regiId+'\')" >按钮</button>' //此为原生JS页面拼接//此方式的关键就 ...
- Django多数据库
每个app使用不同的数据库 1. 配置数据库连接 # settings.py # DATABASES中必须要有default字段 DATABASES = { 'default': { 'ENGINE' ...
- ubuntu18.04 安装 WPS 2019
ubuntu自带的文字处理软件对来自windows下office或在WPS创建的ppt有点不兼容,看到WPS有linux版本的,便果断安装试一试. 一.卸载原生liboffice sudo apt-g ...
- C++设计考试例题
1. 采用面向对象的方式编写一个通迅录管理程序,通迅录中的信息包括:姓名,公司,联系电话,邮编.要求的操作有:添加一个联系人,列表显示所有联系人.先给出类定义,然后给出类实现.(提示:可以设计二个类, ...
- 连接SpringBootAdmin 异常 Name or service not known
环境: 服务器:Linux 客户端:Windows 当客户端连接到SpringBootAdmin的时候,报了如下异常 明明显示可以连接了,但是就是报了客户端INSTANCE DOWN (down机 ...