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) 小结 其他解决思 ...
随机推荐
- PWA 学习笔记(三)
基础技术简介 Promise: 1.ES6 引入的一种异步编程的解决方案,通过 Promise 对象来提供统一的异步状态管理方法 2.一般在使用 Promise 对象的时候,首先需要对其进行实例化 3 ...
- Linux下的find命令2
:续linux下的find命令 Linux/Unix下非常有用的find命令的用法 功能简述:find(查找)主要沿着文件层次(目录)结构依次向下遍历,匹配符合条件的文件,可以附带执行相应的操作选项, ...
- IDEA 工具自动生成JavaBean类
1.先安装GsonFormat插件:File-->Setting-->Plugins-->GsonFormat-->OK 2.new 一个新的Class空文件,然后 Alt+I ...
- go 语言 搭建 图片上传 服务器
工具: LiteIDE 配置: 代码:list.html <!doctype html> <html> <head> <meta charset=" ...
- 使用hutool进行二维码制作
2.在IDEA中使用代码块生成二维码
- ubuntu 查看端口被占用并删除端口
做网络的同学,估计会经常用到这个功能,这里就做一个记录吧. 首先查看特定端口是占用了: sudo netstat -nplt 其次要删除特定端口并查看: kill -9 pid_num sudo ne ...
- 蓝牙spp协议分析
基本概念 蓝牙串口是基于 SPP 协议(Serial Port Profile),能在蓝牙设备之间创建串口进行数据传输的一种设备. 蓝牙串口的目的是针对如何在两个不同设备(通信的两端)上的应用之间保证 ...
- 【SDOI 2015】约数个数和
Problem Description 设 \(d(x)\) 为 \(x\) 的约数个数,给定 \(N\).\(M\),求 \[ \sum_{i=1}^N \sum_{j=1}^M d(ij) \] ...
- shell生成指定长度的随机数
生成指定长度是随机数 # 8位纯数字的随机数 tr -cd '0-9' </dev/urandom | head -c 8 # 16位包含字母.数字的随机数 tr -cd '[:alnum:]' ...
- ASP.NET MVC5基础-控制器(Controller)详解
在上文ASP.NET MVC5基础 – MVC文件架构中我们简单了解了下控制器Controller的作用,本文我将详细介绍控制器Controller的使用方法. Controller的运行过程 上文我 ...