html基础知识1

最新推荐文章于 2022-08-16 07:18:36 发布

Breezy__

最新推荐文章于 2022-08-16 07:18:36 发布

阅读量253

点赞数

分类专栏：网页基础文章标签： html css

本文链接：https://blog.csdn.net/breezy__/article/details/105204140

版权

网页基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、

如果是0px，可以简化为0

2、

margin或者padding后面的数字是按上右下左排的，
如果四个方向都是一样的距离，那么可以直接写一个数字；
如果上下或者左右是一样的距离，那么可以合二为一，比如margin：10px 5px; 这就是上下10，左右5；再比如margin：10px 20px 5px;这就是上下不一样，左右一样。

3、颜色有以下几种常用表示方式：

属性值	说明
color-name	例如red、blue
hex-number	十六进制，例如#d2691e是棕色，#后面是red、green、blue三原色搭配，每个色系一般占两位，数值越大颜色越浅，两位数值如果一样可以写一位，例如#000
rgb-number	rgb(255,255,255)也是三原色，0~255
rgba-number	rgba(255,255,255,0.5),a是指alpha，透明度（0~1）
Inherit	继承父元素的颜色
Hsl-number	hsl（359,75%，50%），hsl指的是色调（0~360）、饱和度，亮度
Hsla-number	和上面一样，只是多了一个透明度alpha（0~1）

4、标题标签的默认属性：

标题标签	font-size
h1	2em<=>xx-large<=>32px
h2	1.5em<=>x-large<=>24px
h3	1.17em<=>large<=>18.72px
h4	1em<=>medium<=>16px
h5	0.83em<=>small<=>13.28px
h6	0.75em<=>x-small<=>12px

标题标签	margin值
h1	margin:1.34em 0;
h2	margin:1.25em 0;
h3	margin:1.17em 0;
h4	margin:1.33em 0;
h5	margin:1.39em 0;
h6	margin:1.75em 0;

5、块级元素：

高度、行高、外边距、内边距都可控制不设置宽度的时候继承父元素的宽度

6、行内元素：

只有padding左右和margin左右有效，而块级元素上下左右都有效；
高、行高不可改变；
宽度就是文本宽度或图片宽度，不可改变；设置宽度、高度无效，可通过行高（文本的行间距）设置；

7、水平居中：

text-align：center；（盒子内容）
margin：0 auto；（盒子本身）

8、垂直居中：

height==line-height（盒子文本）
对于子盒子的垂直居中：
第一种：
父元素盒子宽高设置为100%，子元素设置相对位置relative，向下偏移top50%，再向上移动margin-top自身高度的一半。
第二种：
父元素盒子宽高设置为100%，子元素设置相对位置relative，向下偏移top50%，再向上移动transform：translateY（-50%）。//使盒子向上平移自身高度的一半

9、img：

img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px。将img设置成块级元素就可以了。

10、li：

之前还遇到过的一个问题，当我想让ul的li横向排列时，把li的display的属性设置为inline-block，然后就发现，li之间不能紧挨着，有额外的空隙，通过设置padding和margin为0都不能消除这个间隙。
产生这个问题的原因是：浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观。我们通常是一个放在一行，这导致换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
解决方法也很多：
（1）把margin设一个负值就是一种消除间隙的方法。
（2）给li标签设置浮动。
（3）将font-size设置为0，或者将letter-spacing设置为-8px，这种方法会导致其他字符的样式也会受到影响。
（4）还有一种在html代码上做修改，不用修改css的方法。加上注释，消除因换行带来的空白字符。

11、设置文本阴影

语法：text-shadow: h-shadow v-shadow blur color;
h-shadow：必需值。水平阴影的位置。允许负值。
v-shadow 必需值。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 阴影颜色。

12、

英文、数字字体的最佳写法如下 font-family: Helvetica, Tahoma, Arial;

13、补充字体族名称：

字体族大体上分为两类：sans-serif（无衬线体）和serif（衬线体），当所有的字体都找不到时，我们可以使用字体族名称作为操作系统最后选择字体的方向。一般非衬线字体在显示器中的显示效果会比较好，因此我们需要在最后添加
sans-serif，写法如下：

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

14、设置字体的经典写法：

font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

说明：该设置优先选择了lucida家族的系列字体作为英文字体，该系列字体在Mac和Win上都是预装的，且显示效果较好；中文字体方面将冬青黑体作为最优先使用的字体，sans-serif（无衬线体）字体族为最后字体选择，同时考虑了Linux系统。

font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

说明：优先使用Helvetica
Neue这款字体以保证Mac用户的最佳体验，选择了Arial作为Win下默认英文字体及Mac的替代英文字体；中文字体方面首选了微软雅黑，然后选择了冬青黑体及黑体-简作为Mac上的替代方案；最后使用文泉驿微米黑兼顾了Linux系统。

font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;

说明：代码中使用了Tahoma、Arial作为首选英文字体，中文字体首选了冬青黑体，由于Win下没有预装该款字体，所以显示出了后面的宋体（5b8b4f53为汉字宋体用unicode 表示的写法，不用SimSun是因为 Firefox 的某些版本和 Opera 不支持 SimSun的写法）

15、设置文字字号

一个网页中，标题通常使用较大的文字显示，用于吸引人的注意，小的文字用来显示网页内容，大小字体结合，形成网页，即吸引了人的注意力，又提高了阅读速度。

在HTML5中通常使用font-size设置文字大小，其语法格式如下：

font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length

一、各参数的含义

xx-small :　绝对字体尺寸。根据对象字体进行调整。最小

x-small :　绝对字体尺寸。根据对象字体进行调整。较小

small :　绝对字体尺寸。根据对象字体进行调整。小

medium :　默认值。绝对字体尺寸。根据对象字体进行调整。正常

large :　绝对字体尺寸。根据对象字体进行调整。大

x-large :　绝对字体尺寸。根据对象字体进行调整。较大

xx-large :　绝对字体尺寸。根据对象字体进行调整。最大

larger :　相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算

smaller :　相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算

length :　百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。

二、单位标识
px: 基于像素的单位。像素是一种有用的单位，因为在任何媒体上都可以保证一个像素的差别确实是可见的。
em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充)，当用于指定字体大小时，em单位是指父元素的字体大小。比如

<div style="font-size:12px">

<span style="fontsize:2em">这里的字是24px</span>

</div>

总结：px是像素单位，em是相对单位，pt是绝对单位。
它们各自的好处是：

px可以在计算机屏幕上，能达到预期的效果，在打印机和其它的高分辨率设备上，它又能取得所希望的效果。
em的优点很多，比如在一个页面上，你给定了一个父元素的字体大小，这样就可以通过调整一个元素来成比例的改变所有元素大小。它可以自由缩放，比如用来制作可伸缩的样式表。
pt是一种固定长度的度量单位，是能够使用测量设备测得的长度。绝对单位作用有限，因为它们不能够缩放，通常只用在已经知道是用在哪种输出媒体的情况下才使用。
但大多数情况下最好使用相对单位。一般都是用px和em这两种种配搭比较好。