文末
逆水行舟不进则退,所以大家要有危机意识。
同样是干到35岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说35岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。
为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师核心知识笔记》电子稿文件。
内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。
269页《前端大厂面试宝典》
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
background:orange;
}
3、相邻的兄弟选择器 同辈
/相邻兄弟选择器:只选择一个,相邻(向下)/
p1
p2
4、通用选择器
p的话就是p标签有效,a的话就a标签有效
p1
p2
结构伪类选择器
伪类
p1
p2
p3
h3
- 1li1
- 1li2
- 1li3
- 2li1
- 2li2
- 2li3
-
属性选择器(常用)
id+class结合
Title 美化网页元素
=======
为什么要美化网页
1.有效的传递页面信息
2.美化网页,页面漂亮才能吸引客户
3.凸显页面的主题
4.提高用户的体验
span标签:重点要突出的字,使用span标签套起来
Title 学习语言JAVA
字体样式
font-family:字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
Title 你好
halo
龍弟
i love study java
常用写法:【字体风格】
font-weight:bolder;/也可以填px,但不能超过900,相当于bloder/
/常用写法:/
font:oblique bloder 12px “楷体” oblique:斜体
文本样式
1.颜色->color:agb / rgba()
2.文本对齐方式->text-align: center
3.首行缩进->text-indent: 2em
4.行高->line-height: 300px;
5.下划线>text-decoration
text-decoration:underline/下划线/
text-decoration:line-through/中划线/
text-decoration:overline/上划线/
text-decoration:none/超链接去下划线/
图片、文字水平对齐
img,span{vetical-align:middle}
文本,阴影和超链接伪类
阴影:
/* 第一个参数:表示水平偏移
第二个参数:表示垂直偏移
第三个参数:表示模糊半径
第四个参数:表示颜色
*/
text-shadow:5px 5px 5px 颜色
列表ul li
主页index.html代码:
Title 全部商品分类
-
css代码:
#nav{
width: 300px;
background: antiquewhite;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;/缩进/
line-height: 35px;
background: red;
}
/ul li/
/*
list-style:
non 去掉实心圆
circle 空心圆
square 正方形
*/
/*ul{!nav替换效果!
background: antiquewhite;
}*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: burlywood;
text-decoration: underline;
}
3.7、背景
1.背景颜色: background
2.背景图片
background-image:url(“”);/默认是全部平铺的/
background-repeat:repeat-x/水平平铺/
background-repeat:repeat-y/垂直平铺/
background-repeat:no-repeat/不平铺/
渐变
渐变背景网址:Grabient
径向渐变、圆形渐变
盒子模型
====
什么是盒子模型
- margin:外边距
2.padding:内边距
3. border:边框
边框:
border:粗细、样式、颜色
1.边框的粗细
2.边框的样式
3.边框的颜色
外边距----妙用:居中
margin-left/right/top/bottom->表示四边,可分别设置,也可以同时设置如下
margin:0 0 0 0/分别表示上、右、下、左;从上开始顺时针/
/例1:居中/
margin:0 auto /auto表示左右自动/
/例2:/
margin:4px/表示上、右、下、左都为4px/
/例3/
margin:10px 20px 30px/表示上为10px,左右为20px,下为30px/
盒子的计算方式:
margin+border+padding+内容的大小
总结:
body总有一个默认的外边距margin:0
常见操作:初始化
圆角边框----border-radius
盒子阴影
box-shadow: 10px 10px 1px black;
浮动:
标椎文档流
块级元素:独占一行 h1~h6 、p、div、 列表…
行内元素:不独占一行 span、a、img、strong
注: 行内元素可以包含在块级元素中,反之则不可以
display(重要)
-
block:块元素
-
inline:行内元素
-
inline-block:是块元素,但是可以内联,在一行
-
none:消失
Title div块元素span行内元素
float:left/right左右浮动
clear:both
overflow及父级边框塌陷问题
/*
clear:right;右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
clear:none;
*/
.layer04{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
clear: left;
}
解决塌陷问题方案:
方案一:增加父级元素的高度;
方案二:增加一个空的div标签,清除浮动
方案三:在父级元素中增加一个overflow属性
overflow:hidden/隐藏超出部分/
overflow:scoll/滚动/
方案四:父类添加一个伪类:after
#father:after{
content:‘’;
display:block;
clear:both;
}
小结:
-
浮动元素增加空div----》简单、代码尽量避免空div
-
设置父元素的高度-----》简单,元素假设没有了固定的高度,就会超出
-
overflow----》简单,下拉的一些场景避免使用
-
父类添加一个伪类:after(推荐)----》写法稍微复杂,但是没有副作用,推荐使用
display与float对比
-
display:方向不可以控制
-
float:浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题。
定位
相对定位
相对定位:positon:relstive;
相对于原来的位置,进行指定的偏移,相对定位的话,它仍然在标准文档流中!原来的位置会被保留
top:-20px;/向上偏移20px/
left:20px;/向右偏移20px/
bottom:10px;/向上偏移10px/
right:20px;/向左偏移20px/
代码
相对定位 第一个盒子第二个盒子文末
逆水行舟不进则退,所以大家要有危机意识。
同样是干到35岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说35岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。
为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师核心知识笔记》电子稿文件。
内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。
269页《前端大厂面试宝典》
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总