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) 小结 其他解决思 ...
随机推荐
- 计算机网络基础笔记 运输层协议UDP/TCP
目录 UDP 首部结构 主要特点 TCP 首部结构 主要特点 TCP 可靠性实现 停止等待ARQ协议 连续ARQ协议&滑动窗口协议 拥塞控制 TCP 运输连接管理 连接建立:三次握手 连接释放 ...
- jmeter相关知识学习记录
基于Jmeter5.2.1 断言之响应断言 响应断言:对服务器的响应接口进行断言校验,来判断接口测试得到的接口返回值是否正确. 测试字段就是指要断言的内容的匹配处. 响应文本:就是响应的body部分: ...
- JavaScript中使用正则表达式
JavaScript中正则表达式的使用 创建正则对象 RegExp 对象是带有预定义属性和方法的正则表达式对象. 方式一: var reg = new RegExp("\d", ' ...
- Metasploit从文件中读取目标地址
本文简单介绍如何使用Metasploit从文件中读取目标地址,来执行检测. 以检测MS17-010漏洞为例,在设定RHOSTS参数时,可设定目标地址范围和CIDR地址块,设定单个IP的目标也是可以的. ...
- c++实现通讯录管理系统（控制台版）
c++实现通讯录管理系统(控制台版) 此项目适合c++初学者,针对c++基础知识,涉及到变量.结构体定义使用.数组定义使用.指针定义使用等. 运行之后的结果如下: 代码: #include <i ...
- flask的模板引擎jinja入门教程 包含一个通过网络实时传输Video视频流的示例
本文首发于个人博客https://kezunlin.me/post/1e37a6/,欢迎阅读最新内容! tutorial to use python flask jinja templates and ...
- Java 的核心目的和并发编程
读一本书,最好能从它的前言开始.那么我们就来看看<Java编程思想>作者 Bruce Eckel 在前言里都说了些什么吧. 01.Java 的核心目的是"为程序员减少复杂性&qu ...
- Linux系统：常用Linux系统管理命令总结
本文源码:GitHub·点这里 || GitEE·点这里 一.目录指令 1.创建目录make directory mkdir 目录名称 //mkdir spring,创建一个spring文件夹 mkd ...
- 一起学Android之ContentProvider
本文主要讲解在Android开发中ContentProvider的常规用法,仅供学习分享使用,如有不足之处,还请指正. 访问一个ContentProvider 在Android开发中,应用程序通过Co ...
- ASP.NET图片上传和截取
一.介绍:图片的上传直接使用ajax就可以了,截取图片的话使用到Jcrop插件. 图片上传资料:https://www.jb51.net/article/87654.htm 截取图片插件:http:/ ...