css基础知识点 css的基础语法内容详情

本文目录一览：

• 1、CSS关于属性值是百分比的知识盘点
• 2、前端基础必备知识有哪些
• 3、web前端需要掌握的哪些知识
• 4、CSS——知识点补充(四)元素的浮动属性
• 5、CSS选择器、优先级以及!important知识总结

CSS关于属性值是百分比的知识盘点

1、从图上可以知道 top 就是和父元素 height 有关，其他的几个属性的百分比计算也是一样，都是通过父元素来确定自己的值的。

2、上述定义很清晰地指出，元素的 width 只是元素 content 内容区的宽度，不包括 padding ， border ， 与 margin ，即元素的 width 并不表示元素的 可视宽度 。

3、宽度：宽度的百分比是宽度相对于父框宽度内容的比率。没有父框是相对于浏览器的宽度。height：height的百分比是高度相对于父框的高度内容的比率。填充、边距。：填充和边距是父框宽度的比率，不考虑方向百分比。

4、display的属性值：block ，inline，inline-block，none；-webkit-box：弹性盒容器。例：书写：3个P，宽度比是1：2：3。

前端基础必备知识有哪些

1、简单后台语言作为一名前端开发者不仅需要掌握上面讲的有关前端的知识，还必须懂一点后台语言，比如java、php等等。因为前台界面的数据都是从后台来的，我们必须知道怎么跟后台交互数据。

2、DOM 知识要点：DOM模型、节点类型、节点的基本操作、 *** 操作样式表、克隆节点、获取坐标位置、获取元素尺寸、节点的各种属性和 *** 。

3、Vue作为现在前端的主流框架，在国内应用最为广泛，所以了解Vue原理必须要啃一本Vue的书籍。我之所以推荐这本，是因为这本书对于引导初用Vue的开发者有着质的提升。

4、熟练掌握vue.js、webpack、elementui等前端框技术。 熟练运用Node.js开发后台应用程序。 对Restful，Ajax， *** ON，开发过程有深入的理解，掌握git的基本技能。

web前端需要掌握的哪些知识

1、每个人学习进度可能不同，这个阶段主要是多仿站，熟悉基础，试试用CSS写响应式页面，了解 *** 深入性的知识，比如原型链、闭包、 设计模式 等需要更多的积累，逐渐理解并实践掌握。

2、⑤浏览器兼容。懂web标准，熟练手写xhtml css3并符合 符合w3c标准。代码能兼容主流浏览器Firfox，Chrome、Safari、IE、Opera。虽然IE6很多都不兼容，但现在还使用的人还是有的。

3、学习html。这是最简单最基本的。掌握div、formtable、ulli、p、span、font等标签是最常用的，尤其是div和table，div用于布局，table也可以用于布局，但不灵活，基本table用于处理数据。学习css。这里的css不包括css3。

CSS——知识点补充(四)元素的浮动属性

1、通过浮动可以使一个元素向其父元素的左侧或右侧移动，我们使用float属性来设置于元素的浮动 注意，元素设置浮动以后，水平布局的等式便不需要强制成立 。

2、left元素向左浮动。right元素向右浮动。定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。

3、两者是有绝对的区别的，float是时元素浮动，而position是用来给一个元素定位的。float的定义和常见用法：float属性定义元素在哪个方向浮动。

4、CSS浮动是一种常用于布局的属性，它可以让HTML元素相对于其他元素脱离文档流，并根据指定的方向“浮动”。例如，设置元素为左浮动时，它将会出现在其左侧的最近的可用空间内。

5、在CSS里float是浮动的意思，position是定位的意思。float：浮动，故名思议，就是让HTML元素（标签）从标准文档流里浮动起来。从而不受标准文档流的约束，变成了非标准流。

CSS选择器、优先级以及!important知识总结

通配符选择器 浏览器自定义 选择器的特殊性值表述为4个部分，用0，0，0，0表示。

创作者规则优先级高于浏览者规则 浏览器允许浏览者创建样式规则以覆盖系统缺省值。在此情况下，由网页创作者明确设定得样式优先级较高，而浏览者设置得样式规则优先级较低。

important （1）数值计算法 0级--优先级为0； 1级--优先级为1； 2级--优先级为10； 3级--优先级为100。 （2）后来居上 优先级数值相同情况下，越后面优先级越高。

行内样式：在HTML元素的style属性中设置的样式规则，优先级仅次于！important。 ID选择器：以#开头的选择器，例如#id，优先级较高。

CSS 优先规则2：直接样式比祖先样式优先级高。例2：！-- 类名为 son 的 div 的 color 为 blue -- 选择器的优先级 上面讨论了一个标签从祖先继承来的属性，现在讨论标签自有的属性。