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-清空默认边距、文字行高相关推荐

默认字间距html,HTML连载42-清空默认边距、文字行高，字间距分享
一. 二. 如何清空呢? 我们利用前面学过的通配符选择器,给默认标签去掉属性,因为优先级低,所以不影响我们已经设置好的标签,只给没有设置的标签进行去除边距 % 注意点:通配符标签会遍历当前界面中的所有 ...
div居中边框设置文字行高设置
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
Flutter 图片和多行文本中的第一行对齐，文字行高、行距、偏移设置
众所周知,图片和文本对齐有很多种实现方式,并且基于中轴线对的很齐其中一个例子,如下: 利用 Row 的 crossAxisAlignment 属性 Row(crossAxisAlignment: C ...
CSS学习笔记（内边距~文字在盒子里的垂直居中）
内边距 1.内边距就是内容和边框之间的距离. 2.格式 2.1.非连写 .san1{width: 100px;height:100px;border: 1px solid black;padding- ...
关于HTML下overflow-y:auto无效、清除HTML默认边距、解决去除手机访问网页时的左右多余空白的三个方法汇总
在html中,如果想让某个子DIV出现overflow-y:auto的滚动条,首先需要在css中添加:html body{overflow:hidden} 然后,overflow:auto对于div是 ...
传奇服务器是测试模式怎么修改,www.23bb.net告诉你传奇服务端中默认系统提示文字修改方法...
在玩传奇中中,常见一些系统提示,如人物在安全区中扔东西时,会弹出对话框提示禁止扔,或者在游戏登陆时提示攻击模式,及人物行会显示与夫妻称号显示格式等所有的系统默认格式.其实这些格式都是可以进行修改的,今 ...
【CSS】行高、边框、外边距、内边距
一.行高line-height 1.概念 2.作用 3. 影响行高因素 4. 单位二.边框border 1.属性 2.联写 3.扩展三.内边距/内填充(padding) 1.概念 2. 联写 3. ...
html字体加粗字号为2,【css】文字基本样式（颜色、倾斜、加粗、字号、行高、字体）...
一.字体基本样式首先我们先放置一些文字,基本所有的标签都可以设置字体样式的,这里就使用标签和来做示范啦. O泡时间到! 给我O泡给我O泡,O泡果奶OOO! 图1 基本文字效果注意,文字属性都是 ...
CSS3day(CSS三大特性，行高的继承，选择器的权重，盒子模型：外边距，边框，内边距)
文章目录 CSS三大特性:层叠性.继承性.优先级层叠性继承性行高的继承优先级优先级权重的叠加盒子模型: 边框(border) 表格的细线边框边框会影响盒子的实际大小内边距(paddin ...

HTML连载42-清空默认边距、文字行高

HTML连载42-清空默认边距、文字行高相关推荐

最新文章

热门文章