html、css常考的知识点

阳光穿透心脏的1/2处 2022-06-08 06:38 214阅读 0赞

# 1.CSS中绝对定位和相对定位的文档流是怎样的 以及他们是如何使用的？ #

CSS的相对定位和绝对定位。通常情况下，我们的元素的position属性的值默认为static就是没有定位，元素出现在正常的文档流中，这个时候你给这个元素设置的left、right、bottom、top这些偏移属性都是没有效果的，不会生效（但是padding、margin是生效的）。还有z-index属性在这时不会生效。

##    position: relative，相对定位 ##

如果对某个元素设置了相对定位，那么这个元素它就会跟其他的元素一样，出现在文档流中它该出现的位置。然后，我们可以设置它的水平或垂直偏移量，让这个元素相对它在文档流中的位置的起始点进行移动。注意：在使用相对定位时，就算元素被偏移了，但是它仍然占据着它没有偏移前的空间。同时，它的偏移也不会把别的块从文档中原来的位置挤开，如果有重叠的地方它会在其他文档流元素之上，而不是把它们挤开，我们可以设置z-index属性来调整它的堆叠顺序。

##     position:absolute，绝对定位 ##

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，这个元素就浮起来了，其实设置了相对定位relative时也会让该元素浮起来，但是它们的不同点在于，相对定位不会删除它本身在文档流中占据的那块空间，而绝对定位则会删除该元素在文档流中的位置，完全从文档流中抽了出来，我们也可以通过z-index来设置它们的堆叠顺序。

### 那么绝对定位是如何定位的呢？ ###

首先，如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）

常用的块状元素有：

常用的内联元素有：

常用的内联块状元素有：

设置`display:block`就是将元素显示为块级元素

通过代码`display:inline`将元素设置为内联元素

关于元素分类和块级元素，内联元素的具体差别可以看前面的博客：CSS盒模型

补充：

1.块级元素

![213669_1469934373582_04341C4C965D57F74167CCE72D2EAF7B][]

2.行内元素

![213669_1469934384802_F3CB514AAFC503A1BCD00D1B81F87ED1][]

3.块级元素与行内元素的区别

（1）块级元素会独占一行，其宽度自动填满其父元素宽度；

行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化。

（2）块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。

（3）行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。

4.  块级元素与行内元素的转换

display:inline-block;

display:inline;

display:block;

5.可变元素

![213669_1469934417678_1857554C0F0C54914B8DA215A3BD971D][]

#     #

# 2.margin、padding属性值存在一个 两个 三个 四个的情况下分别对应是什么意思？ #

##  Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的, 对于Fig. 2所示的上右下左margin值均为40px, 因此代码为: ##

# margin-top: 40px;   margin-right: 40px;   margin-bottom: 40px;   margin-left: 40px; #

# 根据上, 右, 下, 左的顺时针规则, 简写为 #

# margin: 40px 40px 40px 40px; #

# 为便于记忆, 请参考下图: #

# ![1.jpg][] #

# 并且规范还提供了省略的数值写法，基本如下： #

1、如果margin只有一个值，表示上右下左的margin同为这个值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;

2、如果 margin 只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

4、如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如：margin:10px 20px 30px 40px;

## Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离, 其代码, 简写请参考margin属性的写法 ##

#     #

# 3. 盒模型你的理解是什么？ 还有他们存在的位置分别是哪里？ #

# 在盒模型中，一个盒子由内容、内边距、边框和外边距共同构成，其尺寸也是这四部分的尺寸之和。 #

![543b4cae0001b34304300350.jpg][]

## ![Image 1][] ##

## ![Image 1][]  在上面这个例子中：   内容区域是最内部的浅蓝色方框部分，是由`width: 200px; height: 18px;`定义的，即高为200`px`，宽为18`px`    内边距区域由`padding`属性定义   边框区域由`border`属性定义    外边距区域由`margin`属性定义  `margin`和`padding`都有上、右、下、左四个方向的宽度，四个方向的宽度大小可以分别设置。比如对于`padding`对应有`padding-top`, `padding-right`, `padding-bottom`, `padding-left`，`margin`同理。  注意，例子中`width`属性定义的是内容的宽度，不包含边距、边框。然而在IE中`width`定义的是内容+内边距+边框的宽度。 IE的做法相对更加符合直观的感觉。`width`的计算方式是由`box-sizing`属性来定义的，如果设置一个元素为`box-sizing: border-box;` ，元素的内边距和边框就会包含在`width`宽度内 ##

#     #

# 4.清除浮动的方法 你知道有几种？` ` #

##         ##

## 方法一：添加新的元素 、应用 clear：both； ##

HTML：

CSS：

.clear{clear:both; height: 0; line-height: 0; font-size: 0}
    result： （纠正： padding不会受影响）

## 方法二：父级div定义 overflow: auto（注意：是父级div也就是这里的 div.outer） ##

HTML：

<div class="outer over-flow"> //这里添加了一个class
        <div class="div1">1</div>
       <div class="div2">2</div>
        <div class="div3">3</div>
        
    </div>

CSS：

.over-flow{
       overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
    }

原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，其区据说在于一个对seo比较友好，另个hidden对seo不是太友好，其他区别我就说不上了，也不浪费时间。

## 方法三： 据说是最高大上的方法 :after 方法：（注意：作用于浮动元素的父亲） ##

原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法：

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
     .outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/

其中clear:both;指清除所有浮动；content: '.';  
display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮 动。

#     #

# 5.在 CSS 中，用 float 和 position 的区别是什么？ #

只有position才是定位，float不能说是定位，不过你可以说这两种布局方式有什么不同。  
float和position这两者并没有孰好孰不好的问题，两者按需使用，各得所需的效果。  
float从字面上的意思就是浮动，这种在印刷排版之类中可能解释的更加贴切。float能让元素从文档流中抽出，它并不占文档流的空间，典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到古老的IE6之类的还会有一些bug诸如双边距等等问题。  
而position顾名思义就是定位。他有以下这几种属性：static(默认)，relative(相对定位)，absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间，他们并不是脱离文档的。absolute和fixed是脱离文档流的，不会占据文档流空间。

比较可以发现，float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性，但是这两个并不适合被用来给整个网页做布局。为什么？因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。

float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位，当父级元素是relative的时候，absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。

如果说到性能问题reflow问题，将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间。所以如果是制作js动画等，用absolute或者fixed定位会更好。

说得不好的地方请大家补充。总结一句就是不推荐用position来布局整个页面的大框架，而推荐用float或者文档流的默认方式。

# 6.block、inline、和inline-block的概念和区别 #

(1). block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。  
  (2). 大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：

*           常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
 *           常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

(3). block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。  
  (4). 一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。

# block，inline和inlinke-block细节对比 #

*  display:block

1.  1.  block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
    2.  block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
    3.  block元素可以设置margin和padding属性。

*  display:inline

1.  1.  inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
    2.  inline元素设置width,height属性无效。
    3.  inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

*  display:inline-block

1.  1.  简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

# 7.水平居中，垂直水平居中你知道有几种方法？ #

## (1)让文字居中显示在图片下 ##

## html代码：  `<div class="div"> <dl > <dt><img src="images/tya.jpg" alt=""></dt> <dd>成都市市"优秀民营企业"</dd> </dl> </div>`        css代码： ##

.div .dl{display: inline-block;overflow: hidden;width: 240px;text-align:center;}
    .div dl dt{overflow: hidden;}
    .div dl dd{font-size: 16px; height: 40px;width: 240px;}

8. 实现划过一个div标签元素，让隐藏的标签div显示出来

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>梯形形状</title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .div{float: left;width: 48px;position: relative; text-align: center;cursor: pointer;line-height: 23px;height: 30px; }
            .div div{position: absolute;top: 30px;left: -24px;display: none;}
            .div:hover div{display: block;}
        </style>
    </head>
    <body>
    <div class="div">
        <img src="images/webac.png" alt="">            
        <div><img src="images/er.jpg" alt=""></div>    
    </div>
    </body>
    </html>

注意隐藏div的祖先元素的overflow不能设置为hidden；不然可能隐藏的div不会出现效果。

(持续更新...)

##     ##

##  ##

#  #

#     #

##     ##

[213669_1469934373582_04341C4C965D57F74167CCE72D2EAF7B]: /images/20220608/87f7df209bf4467f81d3e154ff7e71be.png
[213669_1469934384802_F3CB514AAFC503A1BCD00D1B81F87ED1]: /images/20220608/d2bfd75d4d244e5e960eb56b3c61f1ff.png
[213669_1469934417678_1857554C0F0C54914B8DA215A3BD971D]: /images/20220608/3b0cb326e75841b0b58204d4721d8054.png
[1.jpg]: /images/20220608/3740cc21ef9a4760aff2cd123d727b27.png
[543b4cae0001b34304300350.jpg]: /images/20220608/a0ea264e306c4311b6dfe2583c07d3b7.png
[Image 1]: