html+css知识点梳理

前端知识点梳理

HTML+CSS部分

1. 怎么将元素水平垂直居中

1. 使用css方法父盒子设置

    .father{ 父元素
        background-color:#222; 
        width: 600px;
        height: 600px;

        display: table-cell; 此元素会作为一个表格单元格显示（类似  )
        text-align: center;
        vertical-align:middle;  设置元素的垂直对齐方式，middle指将此元素放在父元素中部
    }
    .son{
        background-color:#555; 
        width: 300px;
        height: 300px;

        display: inline-block; 准换为行内快元素
        vertical-align: middle; 
    }

2. 使用css3的transform
   原理，向将子元素相对于夫元素进移动，然后将元素相对于自己进行移动。
   那左上角来看，假如一个夫元素（10,8），子元素（6,4）从左上角来看，先变为5,4然后变为（2,2）

    .father{
        background-color:#222; 
        width: 600px;
        height: 600px;

        position: relative;  /*规定元素的定位类型，生成相对定位的元素（子绝父相）,相对于其正常位置进行的定位*/
        
    }
    .son{
        background-color:#555; 
        width: 300px;
        height: 300px;
        
        transform: translate(-50%,-50%); /*css3属性，向属性应用2d或3d转换，该属性允许我们对元素进行旋转，缩放，移动或倾斜。translate(x,y),将元素相对于自己的长和宽进行相应的移动*/
        position: absolute; /*生成绝对定位，生成相对于static定位的第一个元素进行定位*/
        top: 50%;
        left: 50%;
    }

2.实现元素水平居中

1. margin和width实现水平居中

给需要居中的元素设置宽度，然后设置margin:0 auto;
优点：简单，方便，浏览器兼容性强
缺点，需要知道当前元素的宽度。扩展性差

.son{
    width:300px;
    margin:0 auto;
}

2. inline-block 实现水平居中的方法

给子元素设display:inline-block; 将元素设置为行内快元素，然后给夫元素设置 text-align:center; 行内元素居中
优点：简单，拓展性强
缺点：需要处理inline-block的浏览器兼容性

.fater{
    text-align:center;
}
.son{
    display:inline-block;
}

3. 绝对定位实现水平居中

缺点：需要知道元素的宽度。

.son{
    position:absolute; /*绝对定位*/
    width:300px;
    left:50%;
    margin-left:-150px;
}

4. css3的flex实现水平居中

为父元素设置 display:flex;justify-content:center;

优点：方便，快捷
缺点：兼容性差

.fater{
    dispay:flex;
    justify-content:center;  //设置内容对齐方式为居中
}
.son{

}

5. css3的fit-content实现水平居中

优点：简单，方便
缺点：兼容性差

.fa5{
    width: fit-content;
    margin:0 auto;
}

1. position几个属性的作用？

position的常见的四个属性值：relative,absolute,fixed,static.一般都要配合left,top,right,bottom属性使用。

1. static:默认位置，设置static之后，他始终会处于页面流给予的位置（static会忽略top,right,left,bottom）
2. relative:位置设置为relation之后，相对定位，给它设置top,left,right,bottom.将会相对于它原来应该的位置发生相应的变化。
3. absolute:绝对定位，如果它的父元素有position属性，并且属性值为absolute或者relative时，它会依据父容器进行偏移。如果父元素没有设置position属性的话，那么偏移量将会以body为准。，
4. fixed:位置被设置为fixed的元素，可定为与相对于浏览器窗口的指定坐标。不论窗口是否滚动，都将固定。
5. 设置position的元素将不会在标准流中不占位置。

3.px,em,rem的区别

1. px,像素，绝对单位。是相对于显示器分辨路来说的
2. em,是相对长度，是相对于当前对象内文本的字体尺寸，如果当前对象内字体的大小没有没设置，将会以浏览器的默认字体为准。它会继承夫级元素的字体大小，因此不是一个固定的值
3. rem,是css3新增的一个相对单位（root em ，跟 em），使用rem为元素设置字体大小时，仍然是相对大小，但相对的是html跟元素。
4. 区别：rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响。rem 单位可以从浏览器字体设置中继承字体大小。

4.BFC

1. 定义：快级上下执行文，他是一个独立的渲染区域，只有Block-level box 参与，它规定了内部的Block-level box如何布局，并且于这个区域外部毫不相干。
2. 那些元素会生成BFC;
   只要满足已上一点，将将会创建一个BFC

• float 属性不为none
• position为absolute或fixed
• display 为inline-block, table-cell,table-caption,flex,inline-flex
• overflow 不为 visible

3. BFC中盒子对齐

• 在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列
• 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）

4. 外边距折叠

• 常规流布局时，盒子都是垂直排列，两者之间的间距由各自的外边距所决定，但不是二者外边距之和

外边距折叠规则

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
• 两个外边距一正一负时，折叠结果是两者的相加的和。

5. 利用BFC避免外边距折叠
   BFC可能造成外边距折叠，也可以利用它来避免这种情况。BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。所以，若两个相邻元素在不同的BFC中，就能避免外边距折叠

    
Sibling 1
    
Sibling 2
    

        
Sibling 3
    

对应的CSS：
.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    margin: 10px 0;
    background-color: lightgreen;
}
.newBFC {
    overflow: hidden;  /* creates new block formatting context */
}

6. BFC包含浮动

如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。我们通常会利用伪元素(:after或者:before)来解决这个问题。BFC能包含浮动，也能解决容器高度不会被撑开的问题。

    
Sibling
    
Sibling


.container {
    overflow: hidden; /* 创建一个bfc */
    background-color: green;
}
.container div {
    float: left;
    background-color: lightgreen;
    margin: 10px;
}

5.box-sizing, transition, translate 分别是什么

1. box-sizing:用来指定盒模型的大小计算方式；boreder-box(从边框固定盒子大小)，content-box(从内容互动盒子大小) 两种计算方式
2. transition:当前元素只要“属性”发生变化的时候，可以平滑等等进行过度。
3. translate:通过移动改变元素的位置，有x,y,z三个属性

6.选择器的优先级？

!import>行内样式>id选择器>类选择器>标签选择器>通配符>继承

• 权重算法：
  (0,0,0,0)==>第一个0对应的是important的个数，第二个0是对应id选择器的个数，第三个0对应类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重
• 比较
  从第一个0开始比较，如果第一个0比较大，那么说明这个选择器的权重高，如果第一个一样，将看第二个，依次列推。

7.css3选择器有那些？

• 属性选择器
• 伪类选择器
• 伪元素选择器

8.iframe的作用？

1. 用法：
   ifram用于向页面中插入另外一个页面
2. 优点：
   便于修改，模块分离，
3. 缺点：

• 创建速度慢
• iframe 会阻塞页面的加载，
• 对SEO不好

9.导航栏在chrome中完好，在IE中有问题。

• 使用了display:flex;属性，在ie 10以下都是无效的

10.CSS3新特性有那些？

1. 颜色：新增RGBA,HSLA模式
2. 文字阴影（text-shadow）
3. 边框：圆角（border-radius）边框阴影（box-shadow）
4. 盒子模型：box-sizing
5. 背景：bacground-size 设置图片的尺寸 background-origin 设置图片的原点
   background-clip 设置背景图片的剪裁区域，以“，”分割可以设置多背景，用于自适应布局
6. 渐变：linear-gradient,radial-gradient
7. 过度：transition,可以实现动画
8. 自定义动画
9. 在css3中唯一引入的伪元素是 ::selection
10. 媒体查询，多栏布局
11. border-image
12. 2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
13. 3D转换

11.xhtml和html的区别

• html是一种基本的web网页设计语言，XHTML是一个基于xml的置标语言
• 不同
  XHTML元素必须被正确的嵌套
  XHTML元素必须被关闭
  标签名必须小写
  XHTML文档必须要有根元素

12.css引入方式有哪些，link和@import的区别是?

• 内联 内嵌 外链 导入
• 区别 ：同事加载
• link 支持使用javascript改变样式，后者不可以。

13.标签上的title于alt属性的区别是什么？

• alt当图片无法加载的时候，用文字代表
• title为该属性提供信息。

14.css reset的作用和用途？

reset重置浏览器的css默认样式，李兰奇的品种不同，样式不同，然后重置，然他们统一

15.css sprites，如何使用？

css精灵图，它一堆小的图片整合到一张大的图片上，减轻服务器对图拍呢的请求数量

16.清除浮动的几种方式

1. 父级div定义height

• 原理：手动给父级元素定义height,就解决了父级元素无法自动获取到高度的问题，
• 优点：简单
• 缺点：只适合高度固定的布局。

2. 结尾处加空的div标签 clear:both

• 原理：在浮动元素后边加一个空的div，然后利用css提供的clear:both;清除浮动。会让父级div自动获取到高度，
• 优点：不用确定父元素的高度
• 缺点，如果浮动元素过多的话，会出现太多的div

    

        浮动元素
    
 
    
    


    

3. 父级div定义伪类：after和zoom； 最适合的，兼容各种情况，可以复用

    /* 伪类:after是指在.fa选择的元素后边加元素 */
    .fa:after{  
        /* 加入元素的内容 */
        content: "";
        /* 将元素设置为块元素 */
        display: block;
        /* 将元素本身隐藏 */
        visibility: hidden;
        /* 设置元素的高度，如果没有内容可以不设置 */
        height: 0px;
        /* 清除浮动 */
        clear: both;
        /* 超出部分隐藏 */
        overflow: hidden; 
    }
    /* 不支持伪类的元素，使用zoom缩放属性让div远离浮动的破坏 */
    .fa{
        zoom: 1;
    }

4. 父元素设置overflow:hidden;可以清除浮动

• 缺点：超出盒子的部分会被隐藏

5. 双伪元素法

• 最好用。
• 在要浮动的元素的前边和后边设置

    .fa:before, .fa:after{
        content: "";
        display: block;
        clear: both;
    }
    .fa{
        zoom: 1;
    }

17.z-index的工作原理及适用范围

1. z-index这个属性控制着元素在z轴上的表现形式。
2. 适用范围:仅适用于定位元素，即拥有relative,absolute,fixed属性的position元素。
3. 堆叠顺序是当前元素位于z轴上的值，数值越大说明元素的堆叠1顺序越高，越靠近屏幕。
4. 未定义时，后来居上，未定义z-index的属性，元素的堆叠顺序基于它所在的文档树。默认情况下，后来的元素的z-index的值越大。
5. 使用范围：

• 网页两侧的浮动窗口（播放器，指定按钮，广告等）
• 导航栏浮动值顶
• 隐藏div实现弹窗功能（通过设置div定位和z-index控制div的位置和出现隐藏）

18.设计一套方案，适应不同的分辨率，有那些方法可以实现？

1. 流式布局：使用百分比像素来定义网页内容。通过设置盒子的宽度设置为百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两边填充。
2. 响应式开发：使用css3的媒体查询（Media Query），通过查询screen的宽度来指定某个宽度范围区间的网页布局。

• 超小屏幕(移动设备) 768px一下
• 下屏设备768px-992px;
• 中等屏幕 992px-1200px;
• 宽屏设备 1200px已上

3. 移动web和响应式的区别

• 移动web:一般在已经有的pc端的网站，开发移动网站的时候，只需要单独开发移动端。只适配移动端。
• 响应式开发：需要一套页面，兼容各个页面，可以适配各种终端，代码复杂。

19.渐渐增强和优雅降级的区别

• 优雅降级认为，应该真对那些最高级，最完善的浏览器来设计网站。
• 渐渐增强认为，刚应该关注内容本身

20.改变元素的外边距用什么属性？改变元素的内填充用什么属性？

• 外边距用margin
• 内填充用paddding

21.在新窗口打开连接的方法是

• target:_blank

22.页面布局中得而结构和表现分离，结构是什么？表现是什么？

• 结构是html
• 表现是css

23.简述对web语义化的理解

• 为了让浏览器更好的读懂你的代码
• 尽量使用语义化的标签，是程序代码简介明了，易于进行web操作和SEO，
• 方便团队协作开发。

24.html文件中的DOCTYPE是什么？有什么用？

1. DOCTYPE是一种标准调剂语言的文档类型声明，他的目的是告诉标准通用标记语言解析器，他们应该使用什么样的文档类型进行解析文档。

25.css选择器的种类有几种？css选择器的优先级是怎么定义的？

1. ！important>行内样式>ID>类>标签>伪类>属性选择>伪对象>继承>通配符。

26.display:none;与visibility:hidden;的区别是什么？

1. display:node;使用该属性之后，HTML元素的宽度，高度等属性值都将“丢失”；
2. visibility:hidden;使用该属性之后，HTML元素仅仅是视觉上看不到（完全透明），而它所占据的空间位置仍然存在，也就是说他仍具高度，宽度等属性值。