CSS 第二天 基础知识

Emmet 语法

常用方法：如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了

                  如果生成的div 类名是有顺序的， 可以用 自增符号 $

                  如果想要在生成的标签内部写内容可以用 { } 表示 

                  w200 按tab 可以 生成 width: 200px

                  lh26px 按tab 可以生成 line-height: 26px

快速格式化：Vscode 快速格式化代码: shift+alt+f

                      也可以设置 当我们 保存页面的时候自动格式化代码:

                      1）文件 ------.>【首选项】---------->【设置】；

                      2）搜索emmet.include;

                      3）在settings.json下的【工作区设置】中添加以下语句：

                            "editor.formatOnType": true,

                             "editor.formatOnSave": true

 

css 元素的显示模式

1.HTML元素一般分为块元素和行内元素两种类型。

2.块元素

    常见的块元素有<div> <p> <h1>-<h6> <ul> <ol> <li>，其中<div>标签是最经典的块元素。

    特点：

         1.独占一行。

         2.高度，宽度，外边距 以及内边距都可以控制。

         3.宽度默认容器（父级宽度）的100％。

         4.是一个容器盒子，里面可以放行内或者块级元素。

    注意：

         1.文字类的元素内不能使用块级元素。

         2.<p>标签主要用于存放文字，因此<p> 里面不能放块级元素，特别是不能放<div>。

         3.<h1>-<h6> 也不能放块级元素。

2.行内元素

    常见的行内元素：<a> <strong> <b> <em> <i> <del> <s>（删除线标签） <ins> <u>（下划线标签） <span>,其中<span>标签是最经典的行内元素。有的地方也称行内元素为内联元素。

    特点：

        1.相邻行内元素之间，一行可以显示多个。

        2.高、宽直接设置是无效的。

        3.默认宽度就是他本身内容的宽度。

        4.行内元素只能容纳文本或其他行内元素。

    注意：

    1.连接里面不能再放连接。

    2.特殊情况连接<a> 里面可以放块元素，但是给<a>转换一下块级模式更安全。

3.行内块元素

    在行内块中的几个特殊标签-----<img/> <input/> <td>，他们同时具有块元素和行内元素的特点。

    特点：

        1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙。一行可以显示多个（行内元素特点）。

        2.默认宽度就是它本身的宽度（含内元素特点）。

        3.宽度，行高，外边距以及内边距都可以控制（块级元素特点）。

4.元素显示总结

5.元素显示模式转换

    转换为块元素：display：block;

    转换为行内元素：display: inline;

    转换成行内块元素：display：inline-block

 

Snipaste 截图工具

    Sinpaste 是一个简单但强大的截图工具，可以将你的截图贴到屏幕上。

    常用快捷方式：

         F1 截图           F3 在桌面置顶显示        点击图片，alt可以取色      esc 取消

 

 CSS 单行文字垂直居中的代码

    解决方案：让文字的行高等于盒子的高度。

    简单原理：行高的上空隙和下空隙把文字挤到中间了，是如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，盒字会偏下。

 

CSS 的背景

1.背景颜色（background-color）

backgroud-color:颜色值；

    一般情况下元素背景颜色的默认值是：transparent（透明）。

2.背景图片（background-image）

    常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）

background-image: none|url(url)

参数值	作用
none	无背景图
url	使用绝对或相对地址指定背景图像

    注意：背景图片后面的地址，千万不要忘记加URL，同时里面的路径不要加引号。

3.背景平铺（background-repeat）

    如果需要在html页面上对背景图像进行平铺，可以使用background-repeat属性。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

4.背景图片位置（background-position）

background-position: x y;

     参数代表的意思是：x坐标和y坐标，可以使用方位名字或者精确单位。

    1.参数是方位名称

        如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和top left 效果一致

        如果只指定一个方位名词，另一个值省略，则第二个默认值居中对齐。

    2.参数是精确单位

        如果参数是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标。

        如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中。

    3.参数是混合单位

        如果指定的两个位置是精确单位和方向名词混合使用，则第一个值是x坐标，第二个值是y坐标。 

5.背景图像固定（背景附着 background-attachment）

    background-attachment 属性设置背景图像是否固定或者随着页面其余部分滚动。

    background-attachment 后期可以制作视差滚动效果。

background-attachment : scroll | fixed 

 6.背景的复合写法

    background：transparent url (image.jpg) repeat-y fixed top;

    background：背景颜色 背景图像 背景平铺 背景图像滚动 背景图片位置

background: transparent url(image.jpg) repeat-y fixed top ;

    提倡的写法！！！！！

7.背景半透明

    css3 为我们提供了背景半透明的效果。

background：rgba（0,0,0,0.3）；

    最后一个参数是alpha 透明度，取值范围在0~1之间。

    我们习惯把0.3的0省略掉，写成background：rgba（0,0,0，.3）；

    注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

8.背景总结

     背景图片：实际开发常见于logo 或者一些装饰的小图片或者超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）