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) 小结 其他解决思 ...
随机推荐
- Cnblogs图片无法上传
2019年5月28日以前的两三个月时间,使用cnblogs原来的接口时,提示图片无法上传,空间不足,实在没办法了,自己实现了博客代理,发现上传图片时返回了503错误,只好先把图片传到其它服务器,再 ...
- java编译报错: 找不到或无法加载主类 Demo.class 的解决方法
原因:java 命令后面的文件不能有后缀名. 解决方法:运行java时候,后面的文件去掉后缀名.
- 如何计算Data Guard环境中Redo所需的网络带宽传输 (Doc ID 736755.1)
How To Calculate The Required Network Bandwidth Transfer Of Redo In Data Guard Environments (Doc ID ...
- Python语法速查： 13. 操作系统服务
返回目录 本篇索引 (1)sys模块 (2)os模块 (3)与Windows相关模块 (4)subprocess模块 (5)signal模块 (1)sys模块 sys模块用于Python解释器及其环境 ...
- docker alphine 设置系统日期
设置时区为上海 RUN apk add tzdata && cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && ...
- Fiddle无法抓取网页信息或HTTPS
1:清除电脑根证书: 打开dos命令框,输入:certmgr.msc ![file](https://img2018.cnblogs.com/blog/1023158/201912/1023158-2 ...
- python的@propert装饰器
首先,@propert的作用是把类中的方法『变成』了属性,方便通过实例访问.propert可以有两种用法:可以把一个方法变成只读属性:可以对一些属性进行过滤. 想象这样一个场景,在实例化一个类之后,需 ...
- web安全技术--XSS和CSRF
Xss一般是脚本代码,主要是JS的,但是也有AS和VBS的. 主要分为反射型,存储型,DOM型三个大类. 一般来讲在手工测试的时候先要考虑的地方就是哪里有输入那里有输出. 然后是进行敏感字符测试,通常 ...
- IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML框架结构
使用HTML框架结构可以把一个浏览器窗口划分为若干个小窗口,每个窗口可以显示不同的URL网页,每个框架里的网页相互独立.这样不仅可以非常方便地在浏览器中同时浏览不同的页面效果,而且可以非常方便地完成导 ...
- java中窗口的打开与关闭
作为小白的我,今天学习了java中打开与关闭窗口的方法. 1.在java中创建一个窗口 import java.awt.*;import java.awt.event.*;public class L ...