7.17 HTML/CSS

1.行级元素、块级元素及区别

行级元素

<a> <span> <i> <strong> <img> <input>

• 多个元素占⼀行 不能设置宽高
• 不可以嵌套块级元素
• 浮动后可以设置宽高

块级元素

<div>  <p>  <ul> <li> <ol> <h1~h6> <table>

• 一个元素占一行 垂直排列列 可以设置宽高

• 块级元素可以嵌套行级元素、行级块元素、块级元素

  特例： P 不可以嵌套块级元素

行级块元素

• 多个元素占一行 可以设置宽高
• 行级块元素 默认的html结构中的回车换行间距问题
  1. 删除html中的回车换行
  2. 给父元素设置font-size：0
  3. 子元素浮动

2. 使元素居中展示

• 行级元素的水平居中div{text-align:center}
• 单行文本的垂直居中height=line-height
• 水平居中margin:0 auto; 被包裹的元素不能有浮动的属性
• 水平居中text-align：center;在没有浮动的情况下，我们可以将其转换为inline/inline-block然后其父元素加上text-align:center属性
• 水平垂直居中 子元素相对于父元素绝对定位div{top:50%; left:50%;}并且margin值减去自己宽高的一半
• 水平垂直居中 子元素相对于父元素绝对定位，并且margin:auto

    .father{
            width: 400px;
            height: 400px;
            position: relative;
        }
    .son{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top:0;
            margin: auto;
            width: 100px;
            height: 100x;
    }

3.常见css选择器

选择器：

• id选择器器
• class选择器
• 伪类选择器
• 标签选择器
• 后代选择器
• 子代选择器
• 伪元素选择器

优先级：

• id > class / 伪类 > 标签 / 伪元素

4.标准盒模型、怪异盒模型

标准盒模型 width=content

怪异盒模型 width=content+padding+border这三个部分的宽度

• box-sizing 控制元素是 标准、怪异盒模型
• 以特定的方式定义匹配某个区域的特定元素
• content-box（标准盒模型）border-box（怪异盒模型）
• border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
• button本身是怪异盒模型

5.外边距合并及解决办法

外边距合并

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

解决办法

• 嵌套关系

  1. 父元素overflow:hidden
  2. 父元素或子元素设置绝对定位 position:absolute
  3. 父元素或子元素浮动 float:left
  4. 给父元素设置边框

• 并列关系

  外边距设置在一个元素上即可

6.元素浮动会造成什么，怎么解决

元素浮动后会脱离⽂档流 造成父元素塌陷

• 父元素设置高度
• 父元素设置溢出隐藏 overflow:hidden
• 在父元素内添加最后⼀个子元素，并且在子元素上设置清楚浮动clear：both
• clearfix

    .clearfix::after{
        content:'';
        display:block;
        clear:both;
    }

7.常见position及特点

• relative 相对定位 相对于元素本身进行定位 定位后空间不会释放
• absolute 绝对定位 相对于最近已定位的祖先元素进行定位 定位后空间释放
• fixed 固定定位 相对于浏览器定位 定位后空间释放
• sticky 粘性定位 将要脱离浏览器后相对于浏览器 定位后空间不释放

8.js基本数据类型

number  string  boolean  undefined  null 

9.基本数据类型和引用数据类型区别

1. 基本数据（原始数据）类型指的是简单的数据段，而引用数据类型则指的是由多个值构成的对象。

2. 基本数据存储在栈（stack）中，是按值访问的，因为可以直接操作保存在变量中的实际值

3. 引用数据类型是保存在堆（heap）中的对象与其他语言不同，不能直接访问堆内存中的位置和操作堆内存空间，只能操作对象在栈内存中的引用地址.

4. 复制变量时的不同

   原始值： 在将一个保存着原始值的变量复制给另一个变量时，会将原始值的副本赋值给新变量，此后这两个变量是完全独立的，他们只是拥有相同的value而已。

   引用值： 在将一个保存着对象内存地址的变量复制给另一个变量时，会把这个内存地址赋值给新变量，也就是说这两个变量都指向了堆内存中的同一个对象，他们中任何一个作出的改变都会反映在另一个身上。（这里要理解的一点就是，复制对象时并不会在堆内存中新生成一个一模一样的对象，只是多了一个保存指向这个对象指针的变量罢了）。

   

10. position、display

1. position

• 定位类型

• absolute

  绝对定位，相对于最近的除static定位以外的元素定位，若没有，则相对于html定位；

  脱离了文档流，不占据文档空间；

  若设置absolute，但没有设置top、left等值，其位置不变，会影响未定义宽度的块级元素，使其变为包裹元素内容的宽度。

• fixed

  固定定位 相对于浏览器窗口定位，脱离文档流，不会随页面滚动而变化。

• relative

  相对定位，相对自身位置定位，可通过设置left、top、right、bottom的值来设置位置；

  并且它原本所占的空间不变，即不会影响其他元素布局；

  经常被用来作绝对元素的容器块。

2. display

• 盒子模型

• none

  表示该元素不会显示，并且该元素的空间也不存在，可理解为已删除

  visibility：hidden只是将元素隐藏，但不会改变页面布局，但也不会触发该元素已经绑定的事件

  opacity：0，将元素隐藏，不会改变页面布局，但会触发该元素绑定的事件

• block

    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>

• inline-block

  行内块元素，即是内联元素，又可设置宽高以及行高及顶和底边距；

    <img>、<input>

• inline (默认)

  内联元素，与其他元素在一行

  不可设置宽高

  margin-top与margin-bottom无效，但margin-left与margin-right有效

  padding-left与padding-right同样有效，但是padding-top与padding-bottom不会影响元素高度，会影响背景高度

    <a>、<span>、<br>、<i>、<em>、<strong>