2021-06-20 HTML基础知识

1、颜色值及长度单位

 

1.1、颜色

 

- 英文单词： red green blue pink black white brown gold yellow purple

- 十六进制颜色表示法：#RRGGBB   RR表示红色 00-ff  GG 表示绿色 00-ff  BB表示蓝色00-ff

- rgb()颜色：rgb(0-255,0-255,0-255);    r：red,g:green,b:blue;

- rgba()颜色：rgba(0-255,0-255,0-255,0-1);  a：alpha 透明度 0 完全透明 1不透明 0.x半透明

1.2、长度单位

 

- px : 像素

- em : 相对单位，表示当前标签的font-size大小

- % : 百分比

- rem : html的font-size值

盒模型（box modal）

 

在css当中，可以把标签看做一个盒子，这个盒子可以分为四个部分：内容区、内边距、边框、外边距。

1、内容区

 

    width:100px; 内容区宽度

    height:100px; 内容区高度

 

2、内边距

 

内边距是元素的边缘和内容(或者子元素)之间的距离

    简写：

    padding: 10px; 四个方向统一为10px

    padding: 10px 20px; 上下  左右

    padding: 10px 20px 30px; 上  左右   下

    padding: 10px 20px 30px 40px; 上  右   下   左

    四个方向分别设置：

    padding-top: 20px;

    padding-bottom: 20px;

    padding-left: 20px;

    padding-right: 20px;

   

    padding-right: -20px;  /* padding不允许设置负值*/

 

3、边框

 

边框指内边距和外边距之间的线条

    border: width style color;

    border-width:2px; 边框宽度

    border-style:solid; 边框风格

        - solid 实线

        - dashed 虚线

        - dotted 点线

        - double 双实线

    border-color:red; 边框颜色

 

    border-top:width style color;

    border-top-width:2px;

    border-top-style:solid;

    border-top-color:solid;

   

    去除边框：

    border-top: 0;

    border-bottom: none;

4、外边距

 

外边距表示盒子和父元素或者相邻元素之间的距离

    简写：

    margin: 10px; 四个方向统一为10px

    margin: 10px 20px; 上下  左右

    margin: 10px 20px 30px; 上  左右   下

    margin: 10px 20px 30px 40px; 上  右   下   左

    四个方向分别设置：

    margin-top: 20px;

    margin-bottom: 20px;

    margin-left: 20px;

    margin-right: 20px;

 

    特殊用法：

        margin-bottom:-100px; 占位减少100px

    固定宽盒子水平居中：

        margin:0 auto;

 

2、标签分类及特点

 

2.1、块级标签

 

div 、h1-h6 、p 、ul 、 ol 、dl 、li、dt、dd

特点:

 

1、从上到下排列，独占一行

2、默认宽度自动占满父级 （width + 左右padding + 左右border + 左右margin = 父级宽度）

3、可以设置宽高及所有盒模型属性

2.2、行内标签

 

span 、 i 、em 、b 、strong 、sub 、sup 、del 、a

特点：

 

1、从左到右在一行排列

2、默认宽度由内容撑开

3、不可以设置宽高属性，水平方向盒模型属性有效，垂直方向无效

1.3、行内块标签

 

    img

特点：

 

1、从左到右在一行排列

2、默认宽度由内容撑开

3、可以设置宽高及所有盒模型属性

2、标签类型转换

 

    display:block; 转换成块级

    display:inline; 转换成行内

    display:inline-block; 转换成行内块

3、行内块标签一些特殊用法

 

3.1、居中

 

行内块居中需要给父元素添加text-align:center; 给自身添加margin:0 auto无效

 

3.2、行内块下方多出的空白

 

当父级没有设置固定高时，行内块会把父级多撑开4px的高度

解决方法：

 

   1、 给行内块父级固定高度

   2、 把图片转换成块级

   3、 给行内块父级设置font-size:0;line-height:0;

   4、 给行内块设置vertical-align:middle;

3.3、行内块之间的空白问题

 

因为标签之间的换行符会识别成一个空格

解决方法：

 

给父元素添加font-size:0;

4、背景样式

 

4.1、background-color 背景颜色

   background-color:transparent; 默认透明色

4.2、background-image 背景图片

    background-image:url("...");

4.3 、background-repeat 背景平铺

    background-repeat:repeat; 水平和垂直都平铺

    background-repeat:repeat-x; 水平平铺

    background-repeat:repeat-y; 垂直平铺

    background-repeat:no-repeat; 不平铺

4.4、background-position 背景定位

    background-position: 水平 垂直;

    background-position: left/center/right top/center/bottom;

    background-position: 100px/-100px 100px/-100px;   水平：正值往右，负值往左  垂直：正值向下 ，负值向上

    background-position:0%/50%/100% 0%/50%/100%;

    //水平和垂直的位置只写了一个值，代表另一个值为center

    background-position: top;

    background-position: 100px;

4.5、background 简写

简写属性里面的各个值可以交换顺序，并且可以省略任何不需要设置的属性

    background:lime url("...") no-repeat center;

5、复合选择器

 

5.1、后代选择器

selector1 selector2...

    .box div{  ... } 选择.box 所有后代中的div标签（包含子级以及子级的子级）

    .box p{  ... }

    #head h3{  ... }

    #head ul li{ ... }

5.2、子代选择器

selector1 > selector2 ...

    .box > div{ ... } 选择.box 子级的div标签（不包含子级的子级）