css学习笔记（二）

一、emmet语法

1、简介

    Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。

    快速生成HTML结构语法

    快速生成CSS样式语法

2、快速生成HTML结构语法

• 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
• 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
• 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
• 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
• 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
• 如果生成的div 类名是有顺序的， 可以用 自增符号 $
• 如果想要在生成的标签内部写内容可以用 { } 表示

3、快速生成CSS样式语法

CSS 基本采取简写形式即可

    比如 w200   按tab  可以 生成  width: 200px;

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

4、快速格式化代码

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

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

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

2）搜索emmet.include;

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

    "editor.formatOnType": true,

    "editor.formatOnSave": true

二、css的显示模式

1、什么是元素的显示模式

定义：

    元素显示模式就是元素（标签）以什么方式进行显示，比如
自己占一行，比如一行可以放多个。

作用：

    网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

2、元素显示模式的分类

2.1、块元素

常见的块元素：

~
、
、
、
、
、

    
 标签是最典型的块元素。

块级元素的特点：

• 自己独占一行。
• 高度，宽度、外边距以及内边距都可以控制。
• 宽度默认是容器（父级宽度）的100%。
• 是一个容器及盒子，里面可以放行内或者块级元素。

注意：

    文字类的元素内不能放块级元素

 标签主要用于存放文字，因此 
 里面不能放块级元素，特别是不能放
 
同理， 
~
等都是文字类块级标签，里面也不能放其他块级元素

2.2、行内元素

常见的行内元素：

、、、、、、、、、

     标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

• 相邻行内元素在一行上，一行可以显示多个。

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

• 默认宽度就是它本身内容的宽度。

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

注意：
链接里面不能再放链接
特殊情况链接 里面可以放块级元素，但是给 转换一下块级模式最安全

2.3、行内块元素

常见的行内块标签：

、、

    它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
• 一行可以显示多个（行内元素特点）。
• 默认宽度就是它本身内容的宽度（行内元素特点）。
• 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

3、元素显示模式的转换

简单理解:

    一个模式的元素需要另外一种模式的特性
    比如想要增加链接  的触发范围。   

转换方式

• 转换为块元素：display:block;
• 转换为行内元素：display:inline;
• 转换为行内块：display: inline-block;

三、css三大特性

1、层叠性

    相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

    层叠性原则:

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

2、继承性

    CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

子元素可以继承父元素的样式：
（text-，font-，line-这些元素开头的可以继承，以及color属性）

3、优先级

当同一个元素指定多个选择器，就会有优先级的产生。

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器优先级计算表格：

image.png

二、盒子模型

1、网页布局的本质

网页布局的核心本质： 就是利用 CSS 摆盒子。

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。
3. 往盒子里面装内容

2、盒子模型（Box Model）组成

    盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

    CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：**边框**、**外边距**、**内边距**、和 **实际内容**

image.png

3、边框（border）

3.1、边框的使用

1、border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；

2、语法：

 border : border-width || border-style || border-color;   

image.png

边框样式 border-style 可以设置如下值：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线

3、边框的合写分写

边框简写：

 border: 1px solid red;  

边框分开写法：

 border-top: 1px solid red;  /* 只设定上边框， 其余同理 */   

3.2、边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

• 测量盒子大小的时候,不量边框。
• 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

4、内边距（padding）

4.1、内边距的使用方式

1、padding 属性用于设置内边距，即边框与内容之间的距离。

2、语法：

合写属性：

image.png

分写属性：

image.png

5、外边距（margin）

5.1、外边距的使用方式

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

image.png

5.2、外边距典型应用

外边距可以让块级盒子水平居中的两个条件：

• 盒子必须指定了宽度（width）。
• 盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

5.3、清除内外边距

    网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

 * {
    padding:0;   /* 清除内边距 */
    margin:0;    /* 清除外边距 */
  }

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了