html常用知识点

盒子属性

1. width指的只是内容区的宽度，并不包括内边距和外边距
2. 如果没指定宽度，则会默认占满浏览器的整个宽度

一、盒子宽度高度表示方法

1 . vw 和 vh

• vw （viewpoint width）视窗宽度的百分比
• vh （viewpoint height）视窗高度的百分比
• 1vw = 视窗宽度的1%
• 1vh = 视窗高度的1%
• vmin 取当前vw和vh中较小的那一个值
• vmax 取当前vw和vh中较大的那一个值

2 . 其他单位

• pt（点）1px = 0.75pt
• in（寸）1in = 96px
• cm（厘米）1cm = 37.8px
• mm（毫米）1mm = 3.78
• pc 1pc = 6pt
  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96

字体属性

一、字体大小表示方法

1 . px

• 像素大小来描述：字体最高到最低的高度决定

p {
    font-size: 14px;
}

2 . em

• 类似于百分数大小将是父元素字体大小的1.2倍

p {
    font-size: 1.2em;
}

3 . rem

• 可以理解为root em
• 是根据根节点的总统大小来计算

4 . 百分数

• 是其父级元素的字体大小的百分比—–

  字体大小为的150%

body {
    font-size: 14px;
}
h1 {
    font-size: 150%;
}

5 . 关键字

• 可以把字体大小指定为 xx-small x-small small medium large x-large xx-large
  • 每个比上一个大20%，推荐 small 和 medium

二、字体风格（粗细）

1 . font-width（字体宽度）

• bolder（比正常稍微粗一点）
• lighter（比正常稍微细一点
• 100-900（100的倍数，但不常用）

2 . font-style（字体风格）

• italic（斜体风格）

• oblique（倾斜文本）

3 . text-decoration（文本装饰）

• underline（下划线）
• line-through（从文本中间穿过的横线）

三、字体布局

1 . line-height（行高）

body {
    line-height: 1.6em;/* 为父级字体大小的1.6倍 */
    line-height: 1.6;/* 为自己的字体的小的1倍 */
}

HTML5新增内容

一、标签

<!-- 博客帖子，用户论坛 -->
<article></article>
<!-- 导航栏 -->
<nav></nav>
<!-- 页眉 -->
<header></header>
<!-- 页脚 -->
<footer></footer>
<!-- 可能包含日期和时间 -->
<time></time>
<!-- 侧边栏或者插图 -->
<aside></aside>
<!-- 主要部分 -->
<section></section>
<!-- 视频 -->
<video></video>

背景属性

一、背景图片

1 . background-image: url(images/ddddd.png);

将图片设置为背景如果大小不合适则会重复多次作为背景图

body {
    background-repeat: repeat;   /* 设置图像在水平和垂直方向上重复，这是默认行为 */
    background-repeat: no-repeat;/* 图像只显示一次 */
    background-repeat: repeat-x; /* 只在水平方向重复 */
    background-repeat: repeat-y; /* 只在垂直方向上重复 */
    background-repeat: 	inherit; /* 按父元素的设置来设置 */
}

边框属性

一、边框类型(border-style:)

1. solid (实线)
2. dotted (虚线)
3. dashed (破折线)
4. double (双线)
5. groove (槽线)
6. outset (外凹线)
7. inset (内凹线)
8. ridge (脊线)

二、边框结构

1 . border-width:

• thin (细)
• medium (中等)
• thick (粗)
• 5px (像素表示)

2 . 边框颜色 border-color:

• border-color: red;
• border-color: rgb(100%, 0%, 0%);
• border-color: #ff0000;

3 . 圆角

• border-radius: 15px;
  • border-top-left-radius: 15px; //只对某一个角设置圆角

其他 (指定某一边的边框)

• border-top-color: black;
• border-bottom-width: thin;

媒体查询

<link href="lounge-print.css" rel="stylesheet" media="print">/* 表示这个文件只有当设备是打印机加的时候才会用 */
<link href="lounge-moblie.css" rel="stylesheet" media="screen and (madx-device-width: 480px)">/* 查询有屏幕的设备而且屏幕宽度不能超过480p才可以用这个css文件 */

/* 可以直接写在css中的指定设备 */
@media screen and (min-device-width: 481px) {
    #guarantee {
        margin-right: 250px;
    }
}/* 如果设备屏幕宽度要大于480px就会使用这些规则 */
@media screen and (max-device-width: 480px) {
    #guarantee {
        margin-right: 30px;
    }
}/* 如果设备屏幕宽度要小于等于480px就会使用这些规则 */
@media print {
    body {
        font-family: Verdana, Helvetica, Arial, sans-serif;
    }
}/* 如果是打印这个页面，就会使用这些规则 */

绝对定位

1 . position:

• static : 放在正常流中，而不是由你来指定位置
• absolute : 绝对定位元素，告诉位于两边的方向
• fixed : 将元素放在相对于浏览器窗口的一个位置上（而不是相对于页面）所以以此固定的元素永远也不会移动
• relative（由父元素指定） : 相对定位会让元素正常流入页面，但在页面上显示之前要进行偏移