前端面试题之html,css部分(包含h5,c3)

前端面试题之html,css部分(包含h5,c3)

1：常见的块级元素，行内块元素，行内元素，空元素

1. 块级元素：div ， p ， table ， ul ， ol ，li ， h1-h6

   特点：独占一行，宽高内外边距可以修改，宽度默认100%，里面可以放块级元素和行内元素，p与h不可以放块级元素

2. 行内元素： a ， strong ， b ， em ， del ，s ，ins ，u ，span

   特点：一行多个，宽高设置无效，默认宽度是内容宽度，行内元素内只能放文本和行内元素，链接里不能放链接

3. 行内块元素：img ，input ， td ，button

   特点：一行多个，宽高设置有效可以进行修改

4. 空元素：br、hr、img、link、meta

5. 相互之间的转换：display:属性值；

   1. block 元素转化为块级元素
   2. inline 元素转化为行内元素
   3. inline_block 元素转化问行内块元素

2：如何让一个盒子垂直居中

1. 利用绝对定位+transform 子绝父相

   //父元素
   position:relative ;  //父元素相对定位
   //需要居中的元素设置
   position：absolute;  //子元素绝对定位
   top：50%；   //走父亲宽高的一半
   right：50%；
   transform:translate(-50%,-50%);
   

2. 给父使用flex布局，通过给父元素设置：align-items:center（垂直布局）和justify-content:center（水平布局）设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中

   //给父元素设置
   display:flex;
   justify-content:center;
   align-items:center;
   

3. 通过父元素display:table-cell 。子盒子必须设置为display：inline-block

   //父元素
   display:table-cell;
   vertical-align:middle;
   text-align:center;
    
   //需要居中的子元素
   display：inline-block;
   

4. 给定宽度和高度的情况 绝对定位+margin负，子绝父相

   //父元素
   position:relative ;  //父元素相对定位
   //需要居中的元素设置
   position：absolute;  //子元素绝对定位
   width:200px;
   height:200px;
   top:50%;
   left:50%;
   margin-top:-100px;  //负自己高一半
   margin-left:-100px;  //负自己宽一半
   

3：定位的几种方式

1. 静态定位：static 默认值不脱离文档流，top，right，bottom，left 等属性不生效

2. 绝对定位：absolute

绝对定位的关键是找对参照物：找到最近的一级带有带定位的父级元素进行位置移动如果找不到，那么相对于浏览器窗口进行定位

注：设置了 position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左右 margin

为 auto 将会失效；我们通过 left、top、bottom、right 来决定元素位置

3. 相对定位：relative

   参照物：元素偏移前位置

   注：设置了相对定位，左右 margin 为 auto 仍然有效、并且不会脱离文档流。

4. 固定定位：fixed

   参照物：浏览器窗口；注：固定定位会脱离文档流；

   当绝对定位和固定定位参照物都是浏览器窗口时的区别： 当出现滚动条时，固定定位的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动

4：什么是盒子模型

1. W3C 标准的盒子模型（标准盒模型）：width与height属性只包含了content
2. IE 标准的盒子模型（怪异盒模型）：width与height属性的范围包含了border、padding和content
3. 相互转换：box-sizing：content-box 标准盒模型 box-sizing：border-box IE盒模型

5：如何解决盒子塌陷问题

1. 为父元素添加 overflow：hidden
2. 为父盒子设置 border，添加 border 后父子盒子就不是真正意义上的贴合（可以设置成透明：border：1px solid transparent）；
3. 为父盒子设定 padding 值；
4. 为父盒子添加 position：fixed；

6：清除浮动的方法

1. 使用 CSS 中的 clear:both（; 放一个空的标签，并设置上述 css，注意该标签必须是块元素）属性来清除元素的浮动

2. 给父级元素设置 overflow：hidden；或 overflow：auto；本质是构建一个 BFC

3. 给父元素添加 clearfix 样式

   .clearfix:after {
   	content: ".";
   	display: block;
    	  height: 0; 
   	 clear: both;
   	 overflow：hidden;
   }
   /*  IE */
   .clearfix{ *zoom:1; }
   

7：css选择器的优先级

1. ！Important>行内样式>ID 选择器>类选择器>标签>通配符>继承>浏览器默认属性

8：css隐藏元素的方法

1. z-index：-值，把元素的层数调为负数，其他元素覆盖就可以隐藏
2. opacity：0；把元素透明度设置为0 ，也可以达到隐藏的效果
3. 使用定位position：absolute；将元素定位到看不见的区域
4. 使用tranform：scale（0、0）；把元素缩放为0，实现元素隐藏

9：HTML5新增属性

1. 自定义属性 data-id
2. 语义化标签：header头部标签 ，nav 导航标签，article内容标签，section定义文档某个区域，aside侧边栏标签，footer尾部标签
3. 新增型表单：input 的多个 type
   1. email：用于输入电子邮件地址。
   2. url：用于输入URL地址。
   3. number：用于输入数值。
   4. date：用于选择日期（包括年、月、日）。
4. 本地离线存储 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除
5. sessionStorage 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

10：对HTML语义化标签的理解

• 更有利于用户体验
• 在没有css样式的情况下，页面整体也会呈现出很好的结构效果
• 更有利于搜索引擎优化
• 代码结构清晰，方便团队开发与维护

11：css新特性

1. 文字阴影(text-shadow)
2. 边框: 圆角(border-radius) 边框阴影 : box-shadow
3. 背景:background-size background-origin background-clip
4. 渐变: linear-gradient , radial-gradient
5. 过渡 : transition 可实现属性的渐变
6. 自定义动画 animate @keyfrom等等。

12：说一下什么是BFC

1. 为"块级格式化上下文"。它是一个独立的渲染区域，规定了内部如何布局，并且这个区域的子元素不会影响到外面的元素
2. 布局规则：
   1. 垂直方向的边距折叠：在同一个 BFC 中的相邻的块级元素的垂直方向的边距会发生折叠，从而只取其中的最大值作为最终显示的边距。
   2. 内部元素的布局不受外部元素的影响：BFC 内部的元素会在垂直方向上一个接一个地排列，自上而下布局。这意味着内部元素的布局不会受到外部元素的影响。
   3. 阻止浮动元素的重叠：当元素浮动时，会脱离普通文档流，但在一个 BFC 中，浮动元素会受到 BFC 的约束，不会和其他元素重叠。
   4. 清除浮动：当一个元素的子元素都浮动时，该元素会坍塌为零高度。但是在一个 BFC 中，可以通过触发 BFC 的清除浮动机制来避免这种情况。
3. 那些元素回产生BFC：
   1. 根元素
   2. float 属性不为 none
   3. position 为 absolute 或 fixed
   4. display 为 inline-block， table-cell， table-caption， flex， inline-flex
   5. overflow 不为 visible

13：display:none和visibility:hidden的区别？

​ 1、display：none/block 隐藏后不占有位置

​ 2、visibility：visible/hidden 隐藏后占有位置

​ 3、overflow：visible/hidden 溢出部分隐藏

14:弹性布局

1. 主要用于创建响应式和自适应的网页布局，使得页面在不同屏幕尺寸和设备上都能良好地展示

2. 容器：使用 display: flex; 或 display: inline-flex; 属性来定义一个元素作为容器。容器内的子元素即为项目。

3. 项目：容器内的每个子元素都是一个项目。项目通过 flex 属性来设置自身在容器内的伸缩性。

4. 使用弹性布局有以下几个常用的方法：

   1. 定义主轴方向和对齐方式：通过设置容器的 flex-direction 属性来定义主轴方向，可以是水平方向（row）或垂直方向（column）。

   2. 通过设置容器的 justify-content 属性来定义项目在主轴上的对齐方式，常用的有居中对齐（center）、两端对齐（space-between）和平均分布对齐（space-around）等。

      例如主轴从左到右：

      例如：

   3. 调整项目的对齐方式：通过设置项目的 align-items 属性来调整项目在垂直轴上的对齐方式，常用的有居中对齐（center）、顶部对齐（flex-start）和底部对齐（flex-end）等。

      例如：

   4. 控制项目在换行时的表现：默认情况下，项目会尽可能地占满容器的一行，可以使用 flex-wrap 属性来设置是否允许项目换行。如果设置为 wrap，当空间不足时，项目会换行显示。

      例如：

15：扩展：

1. 如何画一条0.5px的线

   <style>
       .single-border {
         position: relative;
         width: 200px;
         height: 200px;
       }
   
       .single-border::after {
         content: '';
         position: absolute;
         width: 200%;
         height: 200%;
         border: 1px solid black;
         transform: scale(0.5, 0.5);
         transform-origin: 0 0;
       }
     </style>
   

2. 如何画一个三角形

   三角形原理：边框的均分原理
   div {
   width:0px;
   height:0px;
    
   border-top:10px solid red;
   border-right:10px solid transparent;
   border-bottom:10px solid transparent;
   border-left:10px solid transparent;
   }
   

3. 多行文字截断，显示省略号

   .box {
       /* 将对象作为弹性伸缩盒子模型显示 */
       display: -webkit-box;
       /* 超出限定的宽度就隐藏内容 */
       overflow: hidden;
       /* 规定当文本溢出时显示省略符号来代表被修剪的文本 */
       text-overflow: ellipsis;
       /* 设置或检索伸缩盒对象的子元素的排列方式 */
       -webkit-box-orient: vertical;
       /* 用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果，它需要组合其他的WebKit属性 */
       -webkit-line-clamp: 2;
   }
   /*限制装文字的盒子的宽度，文字过多才会有此效果*/
   /*html 文本超过 3 行将被截断，显示省略号... */
   <p class="box">
     展示多行文本，超过 3 行将被截断，显示省略号...
   </p>
   

   ​