Предварительное интервью и ответы в конце 2019 года — html/css

Обновление html/css в первый день, а последующие обновления JavaScript, vue, es6 продолжат обновляться.
(Как и прежде, чтобы развить хорошую привычку хахаха)
CSS Box Model, BFC, CSS Float, CSS Classic Layout, CSS-совместимые, CSS Hack, Основы HTML / CSS

Адрес вопроса на собеседовании JavaScript (очень внимательный)
es6 адрес вопроса интервью
Vue адрес вопроса интервью
css блочная модель

Основная концепция модели css box?
1. поле, граница, отступы, содержимое. На веб-странице размер пространства, занимаемого элементом, состоит из нескольких частей, включая содержимое элемента, отступ элемента, границу элемента и поля элемента. В пространстве, занимаемом этими четырьмя частями, некоторые части могут отображать соответствующий контент, а некоторые части используются только для разделения смежных областей. Четыре части вместе составляют блочную модель элемента в CSS.
2. Классификация: Стандартная модель, модель IE
Разница между стандартной моделью и моделью IE: разница между высотой и шириной расчета, в чем разница и как рассчитывается высота и ширина?
1. стандартная модель
```
div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化
box-sizing:content-box;  /*设置标准盒子*/
```
1. Странная модель | Модель IE
```
div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化
box-sizing:border-box; /*IE模型*/
```
BFC (решение перекрытия маржи)

Основная концепция BFC?

BFC（Block Formatting Context ）:块级格式化上下文
IFC(CSS2.1)：Inline Formating Contexts，内联元素格式化上下文  
GFC(CSS3):GridLayout Formating Contexts，网格布局格式化上下文  
FFC(CSS3):Flex Formatting Contexts，自适应格式化上下文

Принцип BFC / правила рендеринга BFC?

1、BFC元素垂直方向的边距会发生重叠
2、BFC的区域不会与浮动元素的box重叠（可用于清除浮动）
3、BFC为一个独立的元素，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。
4、计算BFC高度的时候，浮动元素也会参与计算。

Как создать БФУ?

1、float值不为none，即为left, right
2、position的值不为static(默认值),relative，即为absolute,fixed
3、display为inline-block, flex, inline-flex, table-cell,table-caption
4、overflow不为visible，overflow为auto,hidden，scroll ;
5、使用fieldset元素（可以给表单元素设置环绕边框的html元素）

Сценарии использования BFC?

1、BFC垂直方向边距重叠
2、BFC不与float重叠
3、清除浮动：子元素是浮动元素的时候，把外层元素设置成BFC的时候，子元素的浮动元素也会参与到父级元素的高度计算上来。

css поплавок

Проблемы, вызванные плавающими элементами?

1、父元素的高度无法被撑开，影响与父元素同级的元素
2、与浮动元素同级的非浮动元素（内联元素）会跟随其后
3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

css способ очистить поплавок?

1、使用空标签
给所有浮动标签后面添加一个空标签，定义CSS clear:both.
但是这种方法会增加一个无意义的标签。
2、设置父级元素为BFC元素
3、使用after伪元素清除浮动
这个方法只适用于非IE浏览器。该方法必须为需要清除浮动元素的伪对象中设置height:0,不然该元素会比实际元素高出若干像素。
#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

css классический макет

Трехколоночный макет: по 300 пикселей слева и справа, адаптивный посередине?

плаватьплавать

<style>
   html * {
     padding:0;
     margin:0;
   }
   .layout{
     margin-top:20px;
   }
   .layout article div{
     min-height:100px;
   }
 </style>
</head>
<body>
<!--浮动解决方案-->
<section class="layout float">
 <style media="screen">
   .layout.float .left{
     float:left;
     width:300px;
     background:red;
   }
   .layout.float .right{
     float:right;
     width:300px;
     background:blue;
   }
   .layout.float .center{ /*块元素自动撑开*/
     background:yellow;
   }
 </style>
 <article class="left-right-center">
   <div class="left"></div>
   <div class="right"></div>
   <div class="center">
     <h1>浮动解决方案</h1>
     1.这是三蓝布局中间部分
     2.这是三蓝布局中间部分
   </div>
 </article>
</section>

Абсолютное положение позиционирования: абсолютное

<!--绝对定位解决方案-->
<section class="layout absolute">
  <style>
    .layout.absolute .left-center-right>div{
      position:absolute;
    }
    .layout.absolute .left{
      left:0;
      width:300px;
      background:red;
    }
    .layout.absolute .center{
      left:300px;
      right:300px;
      background:yellow;
    }
    .layout.absolute .right{
      right:0;
      width:300px;
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>绝对定位解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

гибкий макет

<!--flexbox解决方案-->
<section class="layout flexbox">
 <style>
   .layout.flexbox{
     margin-top:140px;
   }
   .layout.flexbox .left-center-right{
     display:flex;
   }
   .layout.flexbox .left{
     width:300px;
     background:red;
   }
   .layout.flexbox .center{
     flex:1; /*中间自适应原理*/
     background:yellow;
   }
   .layout.flexbox .right{
     width:300px;
     background:blue;
   }
 </style>
 <article class="left-center-right">
   <div class="left"></div>
   <div class="center">
     <h2>flexbox解决方案</h2>
     1.这是三蓝布局中间部分
     2.这是三蓝布局中间部分
   </div>
   <div class="right"></div>
 </article>
</section>

макет таблицы ячейка таблицы

<!--表格布局解决方案-->
<section class="layout table">
  <style>
    .layout.table .left-center-right{
      width:100%;
      display:table;
      height:100px;
    }
    .layout.table .left-center-right>div{
      display:table-cell;
    }
    .layout.table .left{
      width:300px;
      background:red;
    }
    .layout.table .center{
      background:yellow;
    }
    .layout.table .right{
      width:300px;
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>表格布局解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
  </article>
</section>

сетка компоновка сетки

<!--网格布局解决方案-->
<section class="layout grid">
  <style media="screen">
    .layout.grid .left-center-right{
      display:grid;
      width:100%;
      grid-template-rows:100px;
      grid-template-columns:300px auto 300px;
    }
    .layout.grid .left{
      background:red;
    }
    .layout.grid .center{
      background:yellow;
    }
    .layout.grid .right{
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>网格布局解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

продлевать
Плюсы и минусы этих 5 вариантов
①Поплавок: очистить поплавок, совместимость лучше.
②Абсолютное позиционирование: быстрое, макет отделен от потока документов, в результате чего следующие элементы также отделены от потока документов, а удобство использования оставляет желать лучшего.
③Гибкая компоновка устраняет недостатки плавающего и абсолютного позиционирования, а мобильный терминал в основном поддерживает совместимость.
④Макет таблицы: Совместимость макета таблицы очень хорошая
⑤Сетка: новая
Если «известная высота» удалена, средняя высота содержимого растягивается, а левая и правая высоты должны растягиваться автоматически. Какие решения все еще подходят?
① можно использовать гибкий стол
②Левая сторона изгиба перекрыта, поэтому она отображается справа.Если перекрытия нет, она будет отображаться в крайнем левом углу. создать bfc
Макет с тремя колонками
① Левая и правая ширина фиксированы, а средняя адаптивна.
②Верхняя и нижняя высоты фиксированы, а средняя является адаптивной.
макет в два столбца
①Ширина слева фиксированная, а ширина справа адаптивная.
②Правая ширина фиксированная, а левая адаптивная.
③Верхняя высота фиксирована, а нижняя самоадаптируется
④Нижняя высота фиксированная, верхняя самоадаптирующаяся

Макет Святого Грааля?

Суть макета Holy Grail заключается в том, что левый, средний и правый столбцы плавают с плавающей запятой, а затем настраиваются на отрицательное поле.
Отступ слева от .left, .right должен сделать .main .left .right на той же строке.
.container padding-left, padding-right, .left position и left, right position и left предназначены для предотвращения перекрытия текста.

<style>
    .main{
      float:left;
      width:100%;
    }
    .content{
      height:200px;
      margin-left:100px;
      margin-right:200px;
      background-color:green;
    }
    .main::after{
      display:block;
      content: '';
      font-size: 0;
      height:0;
      clear: both;
      zoom:1;
    }
    .left{
      float:left;
      width:100px;
      height:200px;
      margin-left:-100%; /*左栏移到第一行的首部*/
      background-color:red;
    }
    .right{
      float:left;
      width:200px;
      height:200px;
      margin-left:-200px; /*右栏移到和左中一行*/
      background-color:yellow;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="content"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>

css-совместимый

Каковы часто встречающиеся проблемы совместимости CSS? Как это решить?

本都是ie8及以前的版本会遇到css兼容问题。一般是图片透明、圆角、字体大小，新出的css3样式。
aSuncat：如此老旧浏览器终究会被市场放弃，不花时间在这上面。

css hack

Что такое CSS-хак?

针对不同的浏览器或浏览器不同版本写相应的CSS的过程，就是CSS hack

Классификация взлома CSS?
3 типа: условные хаки, хаки на уровне атрибутов и хаки с селекторами.

// 1、条件hack
<!--[if IE]>
<style>
	.test{color:red;}
</style>
<![endif]-->

// 2、属性hack（类内部hack）
.test{
	color:#090\9; /*For IE8*/
	*color:#f00; /*For IE7 and earlier*/
	_color:#ff0; /*For IE6 and earlier*/
}

// 3、选择符hack（选择器属性前缀法）
* htm .test{color:#0f90;} /*For IE6 and earlier*/
* + html .test{color:#ff0;} /*For IE7*/

Порядок написания взлома CSS?

CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。

html, основы css

Разница между ссылкой и @import?

1、从属关系区别：
link属于html标签，而@import是css提供的。
2、加载顺序区别：
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。
3、兼容性区别：
import只在IE5以上才能识别，而link是html标签，无兼容问题。
4、dom可操作性区别：
可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式
5、权重区别：
如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link方式的样式权重高于@import的权重这样的直观效果。
（aSuncat：简而言之，link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）

Как понять семантику тегов и в чем ее преимущества?

1、语义元素清楚地向浏览器和开发者描述其意义。
2、好处：
（1）html结构清晰，代码可读性较好。
（2）有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
（3）无障碍阅读，样式丢失的时候能让页面呈现清晰的结构。
（4）方便其他设备解析，如盲人阅读器根据语义渲染网页
（5）便于团队维护和开发，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

Что такое селекторы CSS, как рассчитывается приоритет и какие свойства можно наследовать?

css тип селектора

1、通用选择器：*
2、类别选择器：.class
3、id选择器：#id
4、标签选择器：p
5、后代选择器：div p
6、子选择器：div > p
7、群组选择器：div , p
8、相邻同胞选择器：div +p
9、伪类选择器：:link :visited :active :hover :focus :first-child
10、伪元素选择器：:first-letter :first-line:before :after :lang(language)
11、属性选择器：[attribute] [attribute=value] [attribute~=value] [attribute|=value]

расчет приоритета

!important > 内联样式 > id > class > tag
3、属性继承
（1）所有元素可继承：visibility、cursor
（2）块级元素可继承：text-indent、text-align
（3）内联元素可继承：
①字体系列属性：font、font-family、font-size、font-style、font-variant、font-weight、font-stretch、font-size-adjust
②除text-indent、text-align之外的文本系列属性：
letter-spacing、word-spacing、white-space、line-height、color、text-transform、direction

扩展：
一、不可继承的样式属性：
1、display
2、文本属性：vertical-align、text-decoration、text-shadow、unicode-bidi
3、盒子模型属性：border、padding、margin、width、height
4、背景属性：background
5、定位属性：float、clear、position
6、生成内容属性：content
7、轮廓样式属性：outlien-style
8、页面样式属性：size
9、声音样式属性：pause-before

Каковы некоторые примеры встроенных и блочных элементов?

行内元素：span,a,var ,em,input,img,img,textarea,var,em,strong,select,lable
块级标签：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr

Псевдоклассы и псевдоэлементы?

伪类：:active :focus :hover :link :visited :first-child
伪元素：:before :after :first-letter :first-line

Разница между svg и холстом?

1、canvas时h5提供的新的绘图方法 ；svg已经有了十多年的历史
2、canvas画图基于像素点，是位图，如果进行放大或缩小会失真 ；svg基于图形，用html标签描绘形状，放大缩小不会失真
3、canvas需要在js中绘制 ；svg在html绘制
4、canvas支持颜色比svg多
5、canvas无法对已经绘制的图像进行修改、操作 ；svg可以获取到标签进行操作

Принцип реализации Flex?

1、容器上有主轴和纵轴的概念，默认主轴（main-axis）是横向，从左到右，纵轴是竖向，从上到下。
2、其中所有的孩子的布局都会受到这两个轴的影响。
3、有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的。

В чем разница между src и href?

1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
2、src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

Адрес вопроса на собеседовании JavaScript (очень внимательный)
es6 адрес вопроса интервью
Vue адрес вопроса интервью
Последующие действия и JavaScript vue es6 сосредоточены на непрерывных обновлениях.....

Собрать не просто, если вам интересна эта статья, ставьте лайк и подписывайтесь

Адрес вопроса на собеседовании JavaScript (очень внимательный)

es6 адрес вопроса интервью

Vue адрес вопроса интервью

css блочная модель

BFC (решение перекрытия маржи)

css поплавок

css классический макет

css-совместимый

css hack

html, основы css

Адрес вопроса на собеседовании JavaScript (очень внимательный)

es6 адрес вопроса интервью

Vue адрес вопроса интервью

Последующие действия и JavaScript vue es6 сосредоточены на непрерывных обновлениях.....