- CSS 属性的优先级
!important
> 内联样式 > id > class、属性、伪类 > 标签(元素)、伪元素 > 通用(*)
- CSS 属性使用总结
列表
-
有序列表 ol、li
-
无序列表 ul、li
-
定义列表 dl、dt、dd
-
列表相关的 CSS 属性:list-style-type、list-style-image、list-style-position、list-style
表格
-
table 的常用属性
-
tr 的常用属性
-
th、td 的常用属性
-
细线表格的实现 border-collapse
-
表格的其他元素 tbody、caption、thead、tfoot、th
-
单元格的合并
-
CSS 属性 - border-spacing
表单
- input 常用属性
布尔属性的概念
-
按钮 - input 和 button
-
label 绑定 input
-
radio
-
checkbox
-
隐藏域 (type=hidden)
-
select 和 option
-
fieldset 和 legend
-
form 的常用属性
-
get 和 post
-
表单练习 - 集成各种搜索引擎
【重识 HTML + CSS】元素类型、display、visibility、overflow
代码:元素类型
元素类型
-
块级、行内级元素
-
替换、非替换元素
-
元素的分类总结
CSS 属性 - display
-
inline-block
-
练习 - 邮箱显示与选择
-
练习 - 分页跳转栏
-
display 的其他取值
CSS 属性 - visibility
CSS 属性 - overflow
细节:元素之间的空格
代码:https://gitee.com/szluyu99/html_css_note/tree/master/day07/02-盒子模型
盒子模型 (Box Model)
宽度、高度相关 CSS 属性 - width
、height
内边距相关 CSS 属性 - padding
外边距相关 CSS 属性 - margin
-
【常见问题】上下 margin 传递
-
【常见问题】上下 margin 折叠
border 边框
-
CSS 属性 -
border-width
、border-color
、border-style
-
CSS 属性 -
border-top
、border-right
、border-bottom
、border-left
、border
-
边框的形状 - 三角形、双色平分
-
行内级非替换元素的注意点
-
CSS 属性 -
border-radius
圆角
CSS 属性 - outline
CSS 属性 - box-shadow
CSS 属性 - text-shadow
CSS 属性 - box-sizing
元素的水平居中显示(行内级、块级、inline-block)
Photoshop 简介
-
常用功能、面板、设置
-
常用快捷键
-
矩形选框工具 (D)
-
裁剪工具、切片工具 ©
-
吸管工具 (I)
-
参考线
-
文字工具 (T)
-
移动工具 (V)
Photoshop 操作 - 切图
-
规则图形:矩形选择框工具
-
规则图形:切片工具
-
不规则图形:利用魔棒工具 + 矩形选择框
Photoshop 操作 - 测量
-
盒子模型属性:矩形选框工具
-
盒子模型属性:切片工具
-
文字测量:参考线 + 矩形选框工具
Photoshop 文件格式 - psd
代码:https://gitee.com/szluyu99/html_css_note/tree/master/day08/02-背景
-
CSS 属性 -
background-image
设置元素背景图片 -
CSS 属性 -
background-repeat
设置背景图片是否平铺 -
CSS 属性 -
background-size
设置背景图片大小 -
CSS 属性 -
background-position
设置背景图片具体位置 -
练习 - 滑动门技术
-
练习 - 大图适配
-
CSS Sprite(精灵图)
-
CSS 属性 -
background-attachment
-
CSS 属性 -
background
background-image
元素 和 img 标签 的选择
代码:https://gitee.com/szluyu99/html_css_note/tree/master/day09/01-定位
标准流 (Normal Flow)
CSS 属性 - position
-
relative
- 相对定位 -
static
- 静态定位 -
fixed
- 固定定位
画布 (Canvas) 和视口 (Viewport)
脱标元素的特点
-
absolute
- 绝对定位 -
子绝父相
-
练习 - 蒙版
-
绝对定位技巧
元素的层叠
- CSS属性 - z-index
代码:https://gitee.com/szluyu99/html_css_note/tree/master/day10/01-浮动
CSS 属性 - float
-
浮动的规则
-
浮动的应用
-
浮动存在的问题:高度坍塌
-
清浮动的常见方法
-
CSS 属性 - clear
-
各种定位方案对比
CSS 属性的描述
CSS 属性的取值
-
组合 (combinators)
-
出现次数 (multipliers)
-
类型 (types)
< number >、< integer >
< length >
< time >
< angle >
< percentage >
< string >
< url >
项目 git 网址:https://gitee.com/szluyu99/html_css_note/tree/master/yanxuan
项目整体页面:项目预览图
-
常见项目目录
-
CSS Reset
-
CSS 编码规范
-
浏览器私有前缀
-
CSS 知识补充
CSS 属性 - white-space
CSS 属性 - text-overflow
image-set
inline-level box 和 line box
基线 - baseline
CSS 属性 - vertical-align
- 代码相关
去除空格的js函数
单行文字显示省略号
- 项目界面
HTML 元素
-
脱标元素
-
非脱标元素
CSS属性
-
盒子模型
-
定位
-
文字
-
字体
-
背景
-
动画
=================================================================================
慢慢积累…
文本编辑相关快捷键:
| 作用 | 快捷键 |
| — | — |
| 使用特定代码包裹选中的内容 | Ctrl + Alt + T |
其他快捷键:
| 作用 | 快捷键 |
| — | — |
| 重命名文件 | Shift + F6 |
| 展开项目结构 | Alt + 1 |
==========================================================================
flex 简介
flex container 相关属性
-
flex 模块布局
-
flex-direction:设置 main axis 的方向
-
justify-content:设置 flex items 在 main axis 对齐方式
-
align-items:设置 flex items 在 cross axis 对齐方式
-
flex-wrap:设置 flex container 单行还是多行
-
flex-flow:简写属性 (flex-direction || flex-wrap)
-
align-content:多行 flex items 在 cross axis 上的对齐方式
-
总结
flex items 相关属性
-
order:决定 flex items 的排布顺序
-
align-self:覆盖 flex container 设置的 align-items
-
flex-grow:决定了 flex items 如何拓展
-
flex-shrink:决定了 flex items 如何收缩
-
flex-basic:设置 flex items 在 main axis 上的 base size
-
flex:简写属性 (flew-grow flew-shrink? || flex-basis)
-
总结
=================================================================================
-
Auto Rename Tag:自动完成另一侧标签的同步修改
-
HTML CSS Support:智能提示 CSS 类名以及id
-
Bracket Pair Colorizer:给括号加上不同的颜色
结束
一次完整的面试流程就是这样啦,小编综合了腾讯的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析,分享给小伙伴们,有没有需要的小伙伴们都去领取!