资讯专栏INFORMATION COLUMN

前端基础知识学习记录(一)

liuchengxu / 406人阅读

摘要:前端基础知识学习记录一属性通过使用属性,可以选择四种不同类型的定位,会影响元素框生成的方式。相对于元素的原始位置进行定位。举例相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素。

前端基础知识学习记录(一)

1、CSS position 属性

通过使用 position 属性,可以选择四种不同类型的定位,会影响元素框生成的方式。
position 属性值的含义:

static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative:相对定位。相对于元素的原始位置进行定位。元素框偏移某个距离,它原本所占的空间仍保留。
absolute:绝对定位。相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块;也可说相对于除static定位以外的第一个父元素进行定位。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed:相对于浏览器窗口进行定位。

2、CSS display 属性
block、inline、inlinke-block

display:block;
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度,可以自行设置宽高以及margin、padding属性。
display:inline;
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化,不可以自行设置宽高,可以设置水平方向的margin和padding属性,但不可以设置竖直方向的margin与padding属性。
display:inline-block;
将对象呈现为inline对象,但对象的内容作为block对象呈现。即之后的对象会被排列在同一行内,亦可自行设置宽高以及margin、padding属性。

3、CSS 选择器

CSS元素选择器:又称类型选择器,它匹配文档树中该元素类型的每一个实例。
举例:

类选择器:类选择器允许以一种独立于文档元素的方式来指定样式,该选择器可以多带带使用,也可以与其他元素结合使用。 举例:

ID选择器:ID 选择器允许以一种独立于文档元素的方式来指定样式。只能在文档中使用一次;且ID 选择器不能结合使用(ID 属性不允许有以空格分隔的词列表)。 举例:
属性选择器:属性选择器可以根据元素的属性及属性值来选择元素。 举例: 后代选择器:又称包含选择器,可以选择作为某元素后代的元素。 举例:

子元素选择器:选择作为某元素子元素的元素。 举例:

相邻兄弟选择器:可选择紧接在另一元素后的元素,且二者有相同父元素。 举例:

伪类:用于向某些选择器添加特殊的效果。 举例:a:hover{} 伪元素:用于向某些选择器设置特殊效果。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111834.html

相关文章

  • 前端开发学习-网址记录

    摘要:不是一下子能看完综合使用编程是一番怎样的体验学习笔记网站前端开发基础算法题如何优雅地使用如何优雅地使用零度博客码农网伯乐在线什么是页面渲染国外先更到这,还有太多网址,先归类一下再补充。 最近在复习JavaScript知识时遇到以前就不懂的闭包、上下文,虽然比以前理解深了一点,但还是懵,想缓一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...

    CatalpaFlat 评论0 收藏0
  • 前端开发学习-网址记录

    摘要:不是一下子能看完综合使用编程是一番怎样的体验学习笔记网站前端开发基础算法题如何优雅地使用如何优雅地使用零度博客码农网伯乐在线什么是页面渲染国外先更到这,还有太多网址,先归类一下再补充。 最近在复习JavaScript知识时遇到以前就不懂的闭包、上下文,虽然比以前理解深了一点,但还是懵,想缓一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...

    anonymoussf 评论0 收藏0
  • 前端开发学习-网址记录

    摘要:不是一下子能看完综合使用编程是一番怎样的体验学习笔记网站前端开发基础算法题如何优雅地使用如何优雅地使用零度博客码农网伯乐在线什么是页面渲染国外先更到这,还有太多网址,先归类一下再补充。 最近在复习JavaScript知识时遇到以前就不懂的闭包、上下文,虽然比以前理解深了一点,但还是懵,想缓一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...

    zhigoo 评论0 收藏0
  • 前端学习开篇

    摘要:写在前边从去年一直陆续学习前端的知识,起初学习和写页面。自学前端主要还是有一个明确的目标,这样才能有效的学习和容易坚持。通过这次任务的实现能够系统的了解前端的开发流程,以及一些工具的使用。 写在前边 从去年一直陆续学习前端的知识,起初学习HTML和CSS写页面。但是觉得自己对这方面没有太好的天赋,学着忘着,很是痛苦。在接触前端过程中,发现应用javascript实现一些功能,自己比较...

    kohoh_ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<