前端技术点整理html和css

1、块级元素有哪些？行内元素有哪些？

块级元素：div、p、h1-h6、ul、li、ol、form、address（定义地址）、article（定义文章）、aside（定义页面内容之外的内容）、audio（声音）、blockquote（定义长的引用）、canvas、caption（定义表格标题）、dd（定义列表中项目的描述）、dl（定义列表）、dt（定义列表中的项目）、details（定义元素的细节）、filedset（定义围绕表单中元素的边框）、figcaption（定义figure的标题）、figure（定义媒介内容的分组，以及他们的标题）、footer（定义页脚）、header（页眉）、hr（定义水平线）、legend（定义fieldset元素的标题）、menu（菜单）、meter（定义范围内的度量）等。。。

行内元素：a、abbr(定义缩写)、b、big、button、i、img、input、small、progress、span、video等

详细见：https://www.cnblogs.com/yanqiu/p/8987126.html（待整理）

2、块级元素和行内元素的区别？

块级元素：

宽度默认100%（宽度自动填满其父元素宽度）
各占据一行，垂直排列，可以包含行内元素

行内元素：

水平方向排列，不能包含块级元素
设置宽度、高度无效，但可以设置line-height
margin、padding上下无效
宽度根据其自身内容或子元素来决定其宽度

3、html中p标签内能写div标签吗？为什么

块级元素可以包含内联元素和某些块元素，内联元素不能包含块元素
p元素不能嵌套块级元素
不可自由嵌套的元素就是里面只能放内联元素：h1-h6、caption、p、hr、
一个特别的元素dt，它只存在于列表元素dl的子一级

4、css盒子模型

css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

5、box-sizing有几个值？默认值是？区别是？

content-box、border-box、inherit
content-box（默认值）：总宽度=margin+border+padding+width，盒子的宽度只包含内容
border-box ：总宽度=margin+width，盒子的width包含border+padding+内容
inherit , 规定应从父元素继承 box-sizing 属性的值

6、css选择器的权值与优先规则

权值：继承0.1、标签1 、类选择符10、ID选择符100、内联1000

7、css可以继承的属性有哪些？不可以继承的属性有哪些？

可继承：font、font-family、font-weight、font-size、font-style、text-indent、text-align、line-height、color、visibility、cursor等常见
不可继承：width、height、margin、padding、border、background、display、text-shadow、white-space、text-decoration、float、z-index、overflow、position等常见
详细见：https://blog.csdn.net/lbPro0412/article/details/81202744

8、css属性继承了能取消吗？

css属性一旦继承了不能被取消，只能重新定义样式。

9、text-align有几个值？

left：把文本排列到左边，左对齐，默认值：由浏览器决定
right：右对齐
center：居中
justify：实现两端对齐文本效果
inherit：规定应该从父元素继承text-align熟悉的值

10、未知宽度水平垂直居中

第一种：

    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      background: #FD0C70;
    }

    .parent .child {
      color: #fff;
    }

第二种：

.parent{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}

第三种：

    .parent {
      display: table;
      height: 300px;
      width: 300px;
      background-color: #FD0C70;
    }

    .parent .child {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      color: #fff;
      font-size: 16px;
    }

11、css伪元素:after和:before怎么理解的？

::after和::before的使用很简单，可以认为其所在元素上存在一前一后的两个的元素，这两个元素默认是内联元素，但我们可以为其增添样式。::after和::before使用的时候一定要注意，必须设置content，否则这两个伪元素是无法显示出来的。而content属性，会作为这两个伪元素的内容嵌入他们中。如：

  <style>
    p:before{
        content: "H";
    p:after{
        content: "d";
    }
  </style>
  <p>ello Worl</p>