HTML+CSS问题

目录

一、position属性值的描述

二、元素alt和title有什么异同

三、表格合并单元格之间的空间的属性是：cellspacing

四、CSS中的display属性的属性值不包括 hidden

五、display:none 和visibility:hidden 的区别是什么

六、说明px、em、rem三者的关系

七、如何实现响应式布局

八、简述浮动布局以及其工作方式

九、简述HTTP协议

十、简述伸缩盒布局中的核心概念、常用规则、使用技巧

十一、块级元素与行内元素的区别：

十二、W3C盒子和IE盒子的区别

十三、嵌套元素水平垂直居中

十四、清除浮动

十五、简述CSS3中如何计算同一个规则的优先级

十六、简述CSS3选择器有哪些

十七、块级元素父子级，子元素浮动时，为什么父元素会受到影响

---

一、position属性值的描述

        1.static：没有定位，元素出现在正常的流中

        2.absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

        3.fixed：生成绝对定位的元素，相对于浏览器窗口进行定位

        4.relative：生成相对行为，相对于其正常位置进行定位

二、元素alt和title有什么异同

        alt作为图片的代替文字出现，title是图片的解释文字

三、表格合并单元格之间的空间的属性是：cellspacing

四、CSS中的display属性的属性值不包括 hidden

五、display:none 和visibility:hidden 的区别是什么

        1.display:none 隐藏对应的元素且不挤占该元素原来的空间

        2.visibility:none 隐藏对应元素且挤占该元素原来的空间

六、说明px、em、rem三者的关系

        1.px为长度单位，表示一个像素点

        2.em为相对长度单位，表示当前元素上的字体大小

        3.rem为相对长度单位，表示根元素上声明的字体大小

七、如何实现响应式布局

        1.通过媒体查询@media来进行媒体查询，当网页显示在不同的网页中加载执行不同的CSS代码

        2.通过浮动布局，定位布局，flex布局

八、简述浮动布局以及其工作方式

        1.浮动布局用来解决块元素在x轴上的排序问题

        2.浮动布局经常出现在父子结构中，为子元素添加浮动特性

        3.当一个元素成为浮动元素，那么该元素会脱离文档流；宽度如果没有指定由内容决定；不占据屏幕空间，同一级别的浮动元素会在一行排列，若一行无法显示则换行显示；浮动元素会失去对父元素内容的支撑

九、简述HTTP协议

        1.HTTP协议是超文本传输协议

        2.HTTP报文分为两种：请求报文和响应报文；请求报文是客户端向服务器发送请求的信号，响应报文是服务端响应处理后回传给客户端的信号

十、简述伸缩盒布局中的核心概念、常用规则、使用技巧

        1.核心概念：主轴、交叉轴、伸缩盒容器、伸缩盒元素

        2.常用规则：

        （1）伸缩盒容器相关规则：display、flex-wrap、flex-direction、align-items、justify-content

        （2）伸缩盒元素相关规则：flex-basic、flex-shrink、flex-grow

        3.使用技巧：伸缩盒容器常用与列级布局，与浮动布局类似可以将多个块元素在同一行中显示，伸缩盒更简单一点，只需为容器盒子添加display:flex属性，这个容器就变成了伸缩盒容器，其伸缩盒元素就会沿着主轴排列，默认主轴是x轴，可通过flex-direction来改变主轴

十一、块级元素与行内元素的区别：

        1.块级元素独占一行，行内元素共享一行

        2.块级元素可以直接设置宽高，而行内元素不可以直接设置宽高，但其可以通过CSS属性的display：inline-block来设置行高

        3.块级元素可以包含行内元素，行内元素不可以包含块级元素

十二、W3C盒子和IE盒子的区别

        1.W3C盒子所占屏幕宽度是盒子的宽 + 左右margin；所占屏幕的高是盒子的高 + 上下margin；而IE盒子所占屏幕的宽就是盒子的宽；所占屏幕的高就是盒子的高

        2.W3C盒子的width就是内容盒子的宽度，当margin和padding变大时，内容宽度不变，盒子总体宽度及所占屏幕宽度变大；而IE盒子的width实际上包含了border和padding的宽度，当padding变大，且其他部分不变时，内容区域盒子变小

十三、嵌套元素水平垂直居中

        1.使用margin计算宽高，进行移动

        2.父元素相对定位，子元素相对定位，使top、left均为50%，然后再将设置绝对定位元素的margin-top、margin-left为-元素宽度的一半px

        3.父元素相对定位，子元素绝对定位，设置top、bottom、left、right为0，margin为auto

        4.通过flex布局，给父元素设置align-items为center；justify-content为center

十四、清除浮动

        1.父子级：

        （1）先找到浮动盒子的父元素，在给父元素中添加一个属性：overflow:hidden，即可清除这个父元素中的子元素浮动对页面的影响

        （2）在浮动元素下方添加一个标签，再为这个标签添加clear:both，即可清除浮动对页面的影响

        （3）给父元素容器添加伪元素清除浮动

.clearfix::after{
    //添加内容
    content:'';
    //转换为一个块级元素
    display:block;
    //清除两遍的浮动
    clear:both
}

        2.兄弟级：

                给当前元素设置css属性clear，值可为left、right、center

十五、简述CSS3中如何计算同一个规则的优先级

        1.内联样式>ID选择器>类选择器>标签选择器

        2.内联样式的权值为1000；ID选择器的权值为100；类选择器的权值为10；标签选择器的权值为1；

        3.!important的优先级最高

十六、简述CSS3选择器有哪些

        1.后代选择器：父标签 空格 子标签

        2.子元素选择器：父标签>子元素

        3.交集选择器：标签1标签2

        4.并集选择器：标签1，标签2

        5.兄弟选择器： （CSS2）标签1+标签2        （CSS3）标签1~标签2

十七、块级元素父子级，子元素浮动时，为什么父元素会受到影响

        1.块级元素默认宽度为100%，高度由本身或子元素高度撑起

        2.若父元素高度由子元素高度撑起时，子元素浮动，脱离文档流，子元素高度无法被撑起