前端学习笔记

╰半橙微兮° 2024-04-19 15:36 63阅读 0赞

环境搭建：

先安装node.js 和 npm

node -v

npm -v

安装VSCODE

安装vscode的插件，参考：[https://blog.csdn.net/weixin\_43595461/article/details/89506231][https_blog.csdn.net_weixin_43595461_article_details_89506231]

css常见样式:

position定位：[http://www.ruanyifeng.com/blog/2019/11/css-position.html][http_www.ruanyifeng.com_blog_2019_11_css-position.html]

display:flex布局：[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]

display设置为其他值时，目的是设置其展示的方式/是否展示等：[https://www.runoob.com/cssref/pr-class-display.html][https_www.runoob.com_cssref_pr-class-display.html]

background背景相关配置：[https://www.w3school.com.cn/cssref/pr\_background.asp][https_www.w3school.com.cn_cssref_pr_background.asp]

外边距(上右下左)：padding： 1px 1px 1px 1px

内边距(上右下左)：margin： 1px 1px 1px 1px

top/bottom/left/right

float浮动：使用了之后，display:flex的相关属性会失效

height和line-height的区别

height是元素自身的高度，line-height则是元素内部文字的行高，比如：  
height:100px; line-height:20px; padding:0  
表示具有这个样式的元素的高度为100像素，里面的文字行高为20像素（换句话说就是可以排5行文字），内边距为0（如果不为0则元素的高度会被撑大）。

text-align:center 属性指定元素文本的水平对齐方式。

opacity(不透明的)：1  
visibility（可见性）: hidden  
overflow（溢出）：hidden

边框：

border(边框的宽度/边框的样式/边框的颜色/样式的层级 !important表示其层级最高): 0px solid \#EBEEF5 !important;

[https_blog.csdn.net_weixin_43595461_article_details_89506231]: https://blog.csdn.net/weixin_43595461/article/details/89506231
[http_www.ruanyifeng.com_blog_2019_11_css-position.html]: http://www.ruanyifeng.com/blog/2019/11/css-position.html
[http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[https_www.runoob.com_cssref_pr-class-display.html]: https://www.runoob.com/cssref/pr-class-display.html
[https_www.w3school.com.cn_cssref_pr_background.asp]: https://www.w3school.com.cn/cssref/pr_background.asp