css基础（二）

Emmet语法

1.1快速生成HTML结构语法

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

1.2快速生成css样式 属性可缩写

css的符合选择器

1. 后代选择器：可以选择父元素里面的子元素

   语法：元素1 元素2 { 样式声明 } 表示选择元素1里面所有元素2（后代元素）

2. 子元素选择器：只能选择作为某元素的最近一级子元素

   语法：元素1>元素2{ 样式声明 }

3. 并集选择器：可以选择多组标签同事为他们定义相同的样式，适用于集体声明，通过英文,连接而成

   语法：元素1,元素2 { 样式声明 }

   约定的语法规范，并集选择器喜欢竖着写

4. 伪类选择器：用于向某些选择器添加特殊的效果，书写特点是用冒号（：）表示，比如：hover、：first child

   链接伪类选择器：

   • 未访问的链接:link

   • 点击过得链接:visited

   • 选择鼠标经过的链接:hover

   • 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接:active

   lvhv顺序不能改变

   :focus选择器：选择获得光标的表单，用法：input:focus

   html元素显示模式

   分为块元素和行内元素

   块元素特点：

   1. 比较霸道，自己独占一行
   2. 高度、宽度、内外边距都可以控制
   3. 宽度默认是容器的100%
   4. 是一个容器及盒子，里面可以放行内或者块级元素

   注意：文字类的元素内不能使用块级元素

   行内元素：

   • 相邻行内元素在一行上，一行可以显示多个
   • 高、宽直接设置是无效的
   • 默认宽度就是它本身内容的宽度
   • 行内元素只能容纳文本或其他行内元素

   注意：特殊情况里面可以放块级元素

   ​ 链接里面不能再放链接

   行内块元素：

   ​ 在行内元素中有几个特殊的标签（单元格）它们同事具有块元素和行内元素的特点，有些资料称它们为行内块元素

   1. 一行可以显示多个行内块元素
   2. 默认宽度就是它本身内容的宽度
   3. 高度、行高、行边距以及内边距都可以控制

   ​ 元素显示模式转换:

   1. 转换为块元素：display:block;
   2. 转换为行内元素：display:inline;
   3. 转换为行内块：display:inline-block;

   ​

   ​ css没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现，让文字的行高等于盒子的高度，就可以让文字再当前盒子内垂直居中。

   css的背景

   • 背景颜色：background-color默认值：transparent透明
   • 背景图片：background-image：url()，非常便于控制图片位置
   • 背景平铺：background-repeat：repeat、no-repeat、repeat-x、repeat-y。默认平铺
   • 背景图片位置：background-position：x y;可以使用方位名词或者精确值或者是混合单位，使用精确值时一定是第一个值是x坐标，第二个值是y坐标
   • 背景图像固定（背景附着）：background-attachment：scroll、fixed

   背景复合写法：没有特定的书写顺序，一般习惯约定顺序为：

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

   • 背景颜色半透明的效果：background：rgba(0,0,0,0.3)，最后一个参数是alpha透明度，取值范围在0-1之间

   css的三大特性

   ​ css有三个非常重要的三个特性：层叠性、继承性、优先级

   1. 层叠性：相同选择器给设置相同的样式哈哈哈，此时一个样式就会覆盖另一个冲突的样式，层叠性主要解决样式冲突的问题。样式冲突时就近原则，不冲突是不会层叠。
   2. 继承性：css中的继承，子标签会继承父标签的某些样式，如文本颜色和字号。
   3. 优先级：当同一个元素制定多个选择器，就会有优先级的产生
      • 选择器相同，则执行层叠性
      • 选择器不同，则根据选择器权重执行

盒子模型

看透网页布局的本质

网页布局过程：

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

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

盒子模型的组成

• border边框:border-width边框的粗细||border-style边框样式（solid）||border-color border-collapse:collapse合并相邻的边框，border会撑大盒子

• padding内边距：边框与内容之间的距离，padding会撑大盒子，如果盒子没有写width、height属性，则不会撑开盒子

  值的个数	表达意思
  padding:5px	1个值，代表上下左右各5边距
  padding:5px 10px	2，代表上下5边距，左右10边距
  padding:5px 10px 20px	3，上5，左右10 ，下20
  padding:5px 10px 20px 30px	4，上5，右10，下20，左30顺时针

• margin属性，控制盒子与盒子之间的距离，值的复合写法与padding一样，外边距可以让块级盒子水平居中，但是必须满足两个条件：1.盒子必须指定了宽度（width）2.盒子左右外边距都设置为auto。

  让块级元素水平居中margin: 0 auto;行内元素或者块内元素水平居中给其父元素添加text-align:center即可

嵌套块元素垂直外边距的塌陷：对于两个嵌套关系的块元素，父元素有上外边距同事子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：1.可以为父元素定义上边框2.可以为父元素定义上内边距3.可以为父元素添加overflow-hidden.

清除网页自带的默认的内外边距：

*{
	padding：0；/*清除内边距*/
	margin：0；/*清除外边距*/
}

行内元素只设置左右外边距