html+css知识点梳理

作者: 不吃鱼的猫_8e95 | 来源:发表于2018-10-24 01:46 被阅读0次

前端知识点梳理

HTML+CSS部分

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

使用css方法父盒子设置

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

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

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

使用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.实现元素水平居中

margin和width实现水平居中

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

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

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

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

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

绝对定位实现水平居中

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

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

css3的flex实现水平居中

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

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

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

}

css3的fit-content实现水平居中

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

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

1. position几个属性的作用？

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

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

3.px,em,rem的区别

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

4.BFC

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

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

BFC中盒子对齐

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

外边距折叠

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

外边距折叠规则

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

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

<div class="container">
    <p>Sibling 1</p>
    <p>Sibling 2</p>
    <div class="newBFC">
        <p>Sibling 3</p>
    </div>
</div>
对应的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 */
}

BFC包含浮动

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

<div class="container">
    <div>Sibling</div>
    <div>Sibling</div>
</div>

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

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

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

6.选择器的优先级？

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

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

7.css3选择器有那些？

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

8.iframe的作用？

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

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

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

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

10.CSS3新特性有那些？

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

父级div定义height

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

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

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

    <div class="fa1" style="float: left; width: 300px;height: 300px;">
        浮动元素
    </div> 
    <!-- 2使用css3的属性 clear:both; -->
    <div style="clear: both;">

    </div>

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

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

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

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

双伪元素法

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

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

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

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

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

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

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

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

移动web和响应式的区别

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

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

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

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

外边距用margin
内填充用paddding

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

target:_blank

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

结构是html
表现是css

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

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

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

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

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

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

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

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