HTML和CSS重点难点题目

本文主要和大家分享HTML和CSS重点难点问题，但愿能帮忙到大家。

1.如何让一个不定宽高的 p，垂直水平居中?

使用Flex

只需要在父盒子设定：display: flex; justify-content: center;align-items: center;
使用 CSS3 transform

父盒子设定:display:relative
p 设定: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;
使用 display:table-cell 办法

父盒子设定:display:table-cell; text-align:center;vertical-align:middle;
p 设定: display:inline-block;vertical-align:middle;
2.position 几个属性的作用

position 的常见四个属性值: relative，absolute，fixed，static。一样都要配合”left”、“top”、“right” 乃至 “bottom” 属性使用。

static:默许位置。在一样状况下，我们不需要特殊的去声明它，但有时候碰到继承的状况，我们不肯意见到元素所继承的属性影响本身，从而可以用Position:static取消继承，即复原元素定位的默许值。设定为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一样不常用。
relative:相对定位。相对定位是相关于元素默许的位置的定位，它偏移的 top，right，bottom，left 的值都以它本来的位置为基准偏移，而不管其他元素会如何 样。留意 relative 移动后的元素在本来的位置仍占据空间。
absolute:绝对定位。设定为 absolute 的元素，假如它的 父容器设定了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会根据父容器停止偏移。假如其父容器没有设定 position 属性，那么偏移是以 body 为根据。留意设定 absolute 属性的元素在标准流中不占位置。
fixed:牢固定位。位置被设定为 fixed 的元素，可定位于相关于阅读器窗口的指定坐标。不管窗口滚动与否，元素都会留在阿谁位置。它始终是以 body 为根据的。 留意设定 fixed 属性的元素在标准流中不占位置。
3.浮动与清除浮动

3.1 浮动相关知识

float属性的取值：

left：元素向左浮动。
right：元素向右浮动。
none：默许值。元素不浮动，并会显示在其在文本中显现的位置。
浮动的特性：

浮动元素会从一般文档流中离开，但浮动元素影响的不仅是本人，它会影响四周的元素对齐停止围绕。
不管一个元素是行内元素还是块级元素，假如被设定了浮动，那浮动元素会生成一个块级框，可以设定它的width和height，因此float常常用于制作横向配列的菜单，可以设定大小并且横向摆列。
浮动元素的展现在不一样状况下会有不一样的规则：

浮动元素在浮动的时候，其margin不会超越包括块的padding。PS：假如想要元素超出，可以设定margin属性
假如两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
假如有多个浮动元素，浮动元素会按次序排下来而不会发生重叠的现象。
假如有多个浮动元素，后面的元素高度不会超越前面的元素，并且不会超越包括块。
假如有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素
浮动元素会尽大概地向顶端对齐、向左或向右对齐
重叠问题

行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上
块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上
clear属性
clear属性：确保当前元素的摆布两侧不会有浮动元素。clear只对元素本身的规划起作用。
取值：left、right、both

3.2 父元素高度塌陷问题

为什么要清除浮动，父元素高度塌陷
解决父元素高度塌陷问题：一个块级元素假如没有设定height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会离开标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。

3.3 清除浮动的办法

办法1：给父级p定义 高度
道理：给父级p定义牢固高度（height），能解决父级p 没法猎取高度得问题。
长处：代码简约
缺陷：高度被牢固死了，是适合内容牢固不变的模块。（不引荐使用）

办法二：使用空元素，如

(.clear{clear:both})
道理：增加一对空的p标签，利用css的clear:both属性清除浮动，让父级p能够猎取高度。
长处：阅读器支撑好
缺陷：多出了许多空的p标签，假如页面中浮动模块多的话，就会显现许多的空置p了，这样感受视乎不是太令人中意。（不引荐使用）

办法三：让父级p 也一并浮起来
这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会发生新的浮动问题。 不引荐使用

办法四：父级p定义 display:table
道理：将p属性强迫变成表格
长处：不解
缺陷：会发生新的未知问题。（不引荐使用）

办法五：父元素设定 overflow：hidden、auto；
道理：这个办法的关键在于触发了BFC。在IE6中还需要触发 hasLayout（zoom：1）
长处：代码简介，不存在构造和语义化问题
缺陷：没法显示需要溢出的元素（亦不太引荐使用）

办法六：父级p定义 伪类:after 和 zoom

.clearfix:after{
content:’.’;
display:block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {zoom:1;}
道理：IE8以上和非IE阅读器才支撑:after，道理和办法2有点相似，zoom(IE转有属性)可解决ie6,ie7浮动问题
长处：构造和语义化完全准确,代码量也适中，可反复利用率（倡议定义公共类）
缺陷：代码不是非常简约（竭力引荐使用）

经益求精写法

.clearfix:after {
content:”\200B”;
display:block;
height:0;
clear:both;
}
.clearfix { *zoom:1; } 照料IE6，IE7就可以了
具体关于浮动的知识请参看这篇文章：
http://luopq.com/2015/11/08/C…

4.BFC相关知识

定义：BFC(Block formatting context)直译为”块级格局化上下文”。它是一个独立的渲染区域，只要 Block-level box 参 与， 它规定了内部的 Block-level Box 怎样规划，并且与这个区域外部毫不相关。

BFC规划规则
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC这个元素的垂直标的目的的边距会发生重叠，垂直标的目的的间隔由margin决议，取最大值
BFC 的区域不会与浮动盒子重叠（清除浮动道理）。
运算 BFC 的高度时，浮动元素也参与运算。
哪些元素会生成 BFC

根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不为 visible
5.box-sizing是啥

设定CSS盒模型为标准模型或IE模型。标准模型的宽度只包罗content，二IE模型包罗border和padding
box-sizing属性可认为三个值之一：

content-box，默许值，只运算内容的宽度，border和padding不运算入width之内
padding-box，padding运算入宽度内
border-box，border和padding运算入宽度之内
6.px，em，rem 的不同

px 像素(Pixel)。绝对单位。像素 px 是相关于显示器屏幕辨论率而言的，是一个虚拟长度单位，是运算 机系统的数字化图像长度单位，假如 px 要换算成物理长度，需要指定精度 DPI。
em 是相对长度单位，相关于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设定， 则相关于阅读器的默许字体尺寸。它会继承父级元素的字体大小，因此并不是一个牢固的值。
rem 是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，依然是相对大小， 但相对的只是 HTML 根元素。

7.CSS 引入的方式是什么? link 和@import 的不同是?

有四种：内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(@import)
link和@import的不同：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范围，只能加载CSS。
link援用CSS时，在页面载入时同时加载；@import需要页面网页完全载入今后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的阅读器不支撑。
link支撑使用Javascript操纵DOM去改动样式；而@import不支撑。
8.流式规划与响应式规划的不同

流式规划
使用非牢固像从来定义网页内容，也就是百分比规划，通过盒子的宽度设定成百分比来按照屏幕的宽度来进
行伸缩，不受牢固像素的限制，内容向两侧填充。

响应式开发
利用CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页规划。

超小屏幕(移动设备) 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上
由于响应式开发显得繁琐些，一样使用第三方响应式框架来完成，比方 bootstrap 来完成一部分工作，当然也 可以本人写响应式。

不同

• 流式规划 响应式开发
  开发方式 移动Web开发+PC开发 响应式开发
  利用场景 一样在已经有PC端网站，开发移动的的时候只需要独自开发移动端 针对一些创建的网站，此刻要求适配移动端，所以就一套页面兼容各种终端
  开发 正对性强，开发效力高 兼容各种终端，效力低
  适配 只适配移动设备，pad上体验相对较差 可以适配各种终端
  效力 代码简约，加载快 代码相对复杂，加载慢
  9.渐进增强和文雅落级

关键的不同是他们所侧重的内容，乃至这种不一样造成的工作流程的差别

文雅落级观念认为应当针对那些最高级、最完美的阅读器来设计网站。
渐进增强观念则认为应关注于内容本身，优先思考低版本。
10.CSS潜藏元素的几种方式及不同

display:none

元素在页面上将彻底消逝，元素原本占有的空间就会被其他元素占有，也就是说它会致使阅读器的重排和重绘。
不会触发其点击事件
visibility:hidden

和display:none的不同在于，元素在页面消逝后，其占据的空间照旧会保存着，所以它只会致使阅读重视绘而不会重排。
没法触发其点击事件
适用于那些元素潜藏后不但愿页面规划会发生转变的场景
opacity:0

将元素的透亮度设定为0后，在我们会员眼中，元素也是潜藏的，这算是一种潜藏元素的办法。
和visibility:hidden的一个共同点是元素潜藏后照旧占据着空间，但我们都知道，设定透亮度为0后，元素只是隐形了，它照旧存在页面中。
可以触发点击事件
设定height，width等盒模型属性为0

简便说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设定成0，假如元素内有子元素或内容，还应当设定其overflow:hidden来潜藏其子元素，这算是一种奇技淫巧。
假如元素设定了border，padding等属性不为0，很明显，页面上还是能看到这个元素的，触发元素的点击事件完全没有问题。假如全部属性都设定为0，很明显，这个元素相当于消逝了，即没法触发点击事件。
这种方式既不有用，也大概存在着着一些问题。但平常我们用到的一些页面结果大概就是采纳这种方式来完成的，比方jquery的slideUp动画，它就是设定元素的overflow:hidden后，接着通过按时器，不竭地设定元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom为0，从而到达slideUp的结果。
其他脑洞办法

设定元素的position与left，top，bottom，right等，将元素移出至屏幕外
设定元素的position与z-index，将z-index设定成尽量小的负数。

以上就是HTML和CSS重点难点问题的具体内容，更多请关注百分百源码网其它相关文章！