我的前端知识梳理-HTML,CSS篇

·  阅读 1331

前言:由于最近在梳理一下我自己的知识体系,为了更好的记录,现在把整理好的资料分享出来,也希望能够发现错误的地方能够予以指点。谢谢。

======================相关文章和开源库=======================

系列文章

1.前端知识梳理-HTML,CSS篇

2.前端知识梳理-ES5篇

3.前端知识梳理-ES6篇

4.前端知识梳理-VUE篇

个人维护的开源组件库

1.bin-ui,一个基于vue的pc端组件库

2.树形组织结构组件

3.bin-admin ,基于bin-ui的后台管理系统集成方案

4.bin-data ,基于bin-ui和echarts的数据可视化框架

5.其余生态链接

========================================================

(1)dom选择器优先级是什么,以及权重值计算

1.行内样式 1000

2.id 0100

3.类选择器、伪类选择器、属性选择器[type="text"] 0010

4.标签选择器、伪元素选择器(::first-line) 0001

5.通配符*、子选择器、相邻选择器 0000

(2)css3新特性简述

1、颜色:新增RGBA、HSLA模式

2、文字阴影(text-shadow)

3、边框:圆角(border-radius)边框阴影:box-shadow

4、盒子模型:box-sizing

5、背景:background-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转换

(3)有几种定位方式,有什么区别

`static` 是默认值

`relative` 相对定位 相对于自身原有位置进行偏移,仍处于标准文档流中

`absolute` 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指`position`不是`static`的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以`body`元素为偏移参照基准, 完全脱离了标准文档流。

`fixed` 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

(4)重排和重绘,什么情况下会触发

部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。 由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素背景色时,屏幕上的部分内容需要更新。这样的更新被称为重绘。

添加、删除、更新 DOM 节点 通过 display: none 隐藏一个 DOM 节点-触发重排和重绘 通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘,因为没有几何变化 移动或者给页面中的 DOM 节点添加动画 添加一个样式表,调整样式属性 用户行为,例如调整窗口大小,改变字号,或者滚动。

(5)css清除浮动的几种方法

清除浮动: 核心:clear:both;

1.使用额外标签法(不推荐使用)

在浮动的盒子下面再放一个标签,使用 clear:both;来清除浮动

a 内部标签:会将父盒子的高度重新撑开

b 外部标签:只能将浮动盒子的影响清除,但是不会撑开盒子

2.使用 overflow 清除浮动(不推荐使用)

先找到浮动盒子的父元素,给父元素添加一个属性:overflow:hidden;就会清除子元素对页面的影响

3.使用伪元素清除浮动(用的最多)

伪元素:在页面上不存在的元素,但是可以通过 css 添加上去

种类:

:after(在。。。之后)

:before(在。。。之前)

注意:每个元素都有自己的伪元素

.clearfix:after {  content:"";  height:0;  line-height:0;  display:block;  clear:both;  visibility:hidden; /_将元素隐藏起来_/  在页面的 clearfix 元素后面添加了一个空的块级元素 (这个元素的高为 0 行高也为 0 并且这个元素清除了浮动)}.clearfix {  zoom:1;/_为了兼容 IE6_/}复制代码

(6)行内元素和块级元素的区别

块级元素(block)特性:

总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性:

1和相邻的内联元素在同一行;

2宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变(也就是 padding 和 margin 的 left 和 right 是可以设置的),就是里面文字或图片的大小。

那么问题来了,浏览器还有默认的天生 inline-block 元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些?

答案:<input> 、<img> 、<button> 、<texterea> 、<label>。

(7)如何水平垂直居中一个元素

方法一:绝对定位居中(原始版之已知元素的高宽)

.content {  
    width: 200px;  
    height: 200px;  
    background-color: #6699ff;  
    position: absolute; /*父元素需要相对定位*/  
    top: 50%;  
    left: 50%;  
    margin-top: -100px; /*设为高度的1/2*/  
    margin-left: -100px; /*设为宽度的1/2*/
}复制代码

方法二:绝对定位居中(改进版之一未知元素的高宽)

.content {  
    width: 200px;  
    height: 200px;  
    background-color: #6699ff;  
    position: absolute; /*父元素需要相对定位*/  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/
}复制代码

方法三:绝对定位居中(改进版之二未知元素的高宽)

.content {  
    width: 200px;  
    height: 200px;  
    background-color: #6699ff;  
    margin: auto; /*很关键的一步*/  
    position: absolute; /*父元素需要相对定位*/  
    left: 0; 
    top: 0;  
    right: 0; 
    bottom: 0; /*让四个定位属性都为0*/
}复制代码

方法四:flex 布局居中

body {  
    display: flex; /*设置外层盒子display为flex*/  
    align-items: center; /*设置内层盒子的垂直居中*/  
    justify-content: center; /*设置内层盒子的水平居中*/  
    .content {    
        width: 200px;    
        height: 200px;    
        background-color: #6699ff;  
    }
}复制代码

那么问题来了,如何垂直居中一个 img(用更简便的方法。)

.content {  
    //img的容器设置如下  
    display: table-cell;  
    text-align: center;  
    vertical-align: middle;
}复制代码

(8)display:inline-block 为什么会显示间隙

间隙产生的原因是因为,换行或空格会占据一定的位置

推荐解决方法:

父元素中设置 font-size:0;letter-spaceing:-4px;

(9)你了解 CSS Flex 和 Grid 吗

Flex 主要用于一维布局,而 Grid 则用于二维布局。

解析:

Flex

flex 容器中存在两条轴, 横轴和纵轴, 容器中的每个单元称为 flex item。

在容器上可以设置 6 个属性:

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

注意:当设置 flex 布局之后,子元素的 float、clear、vertical-align 的属性将会失效。

Flex 项目属性

有六种属性可运用在 item 项目上:

order

flex-basis

flex-grow

flex-shrink

flex

align-self

Grid

CSS 网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。

像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用 CSS 网格可能还是比 CSS 表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像 CSS 定位的元素一样,真正的有重叠和层次。


分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改