这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
html
什么是html?
官话来讲:就是**超文本标记语言**,我们平常浏览的网页页面就是由html来编写的,它包括一系列的标签,并通过这些标签的配合使其组合成描述性文本,并且html极其好学,入门极其简单。
html的语义化
在编写html代码时,在开始时我们通常用很多div标签进行布局,不管是头部,底部还是中间的主题区域,这种在文章关键位置使用div的方式显然是不符合语义化的,于是html5的更新用时带来了语义化标签,现在编写头部可以使用header
标签,编写底部可以使用footer
标签,等等...这种每一种标签都有其符合的语义,这就是html的语义化。
css
首先要了解的: css的选择器权重
很多新手在开始写css代码时遇到最多的一个问题就是我的css样式为什么不起作用,当排除拼写错误等低级错误后,**css的选择器权重**是我们必须要关心的一个方面
- !important -> 无穷大
- 内联样式 -> 1000
- id选择器 -> 100
- 类,伪类,属性选择器 -> 10
- 标签,伪元素选择器 -> 1
如果两个属性发生了冲突,name选择器对应的数字相加,所得数字最大的那个选择器对应的属性才会起作用,数字较小的会被覆盖
flex布局
css中最重要的一个布局方式
项目的属性
- order属性: 数值越小,排的越靠前,默认为0,且可以为负数。
- align-self属性:设置当前项目的对齐方式。
- flex属性:(为
flex-grow
、flex-shrink
、flex-basis
的缩写,默认为0 1 auto
)
flex: 0, 对应的是0 1 0%, 相当于不可扩大,可缩小
flex: 1, 对应的是1 1 0%, 相当于可扩大,可缩小
flex: auto, 对应的是1 1 auto, 相当于可扩大,可缩小