# 快捷键
保存:ctrl +s
QQ截图:打开QQ后,ctrl+alt+a
按住ctrl+点击一个地方,会打开一个新的窗口,或者直接点击鼠标中间
ctrl+f:可以搜索该网页内容
ctrl+shift+r:页面强制刷新
alt+shift+f:可以让代码对齐
Ctrl+d:选中下一个相同的部分
Ctrl+shift+L:选中全部相同的部分
ctrl+加号键:放大视图
ctrl+减号键:缩小视图
ctrl+shift+下(上)箭头 或者 ctrl+c然后ctrl+v:快速复制一行
ctrl+h:全局替换某个词
ctrl+g:快速定位到某一行
shift+alt:快速选中某一区块
line-height值如果是相对值,最终换算是该值乘以该元素font-size
头文件中的base标签可以设置文件体中所有a标签的url 或target的基础,一个文件只能出现一个base标签
空白折叠的空白之间的距离是font-size的大小
去掉空白折叠的方法:
1.直接在html文件中让标签不换行
2.让设置其父元素font-size值为零
渐变色: background-image:linear-gradient(to right,#fff,#fac)
to right 表示渐变的方向 可以不写。默认值为从上到下 to right除了该格式还有135deg格式,表示135º从上到下(默认向右为零度,逆时针旋转)
后变为渐变的起始颜色和末尾颜色
calc函数使用 (可以用来计算 加减乘除 数值)
eg:width:calc(100% -190px); (注:在-号前后一定要有空格) 100%是指父元素内容盒的100%
时间过度
transition
eg: transition:background-color:0.3s;
垂直居中
display:table_cell;
vertical_align:middle;
居中:
***
display:flex;
justify-content:space-around;(水平)
align-items:center;(垂直)
***
以图换字:
text-indent:-9999px;
overflow:hidden;
善于运用相对定位
word-break:keep-all; 在有空格的位置断行
## 标签效果:(每个都是第一个语义更强烈)
加粗:strong标签、b标签
倾斜:em标签、i标签
删除线:del标签、s标签
下划线:ins标签、u标签
## 目录文件夹和根目录
目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需的相关素材,比如html文件、图片等。
根目录:打开目录文件夹的第一层就是目录文件夹
## table的属性:
属性名: align (规定表格相对周围元素的对齐方式)
属性值:left 、 center、 right
border(规定表格单元是否拥有边框,默认为" s",表示没有边框)
1或“ ”
cellpadding(规定单元边沿与其内容之间的空白,默认1像素)
像素值
cellspacing(规定单元格之间的空白,默认为2像素)
像素值
width(规定表格的宽度)
像素值或百分比
table元素
*** border-collapse:collapse; *** (边框模式为合并模式)
table-layout:fixed; (定义列宽的算法,fixed表示根据列表的宽度自动计算宽度,每列的宽度为均分整个表格的宽度)
## 复合属性
有些可以省略
1. font
*** font: font-style font-weight font-size/line-height font-family; ***
font-size font-family 必须要有,顺序不能变
2. background 顺序没有要求
习惯约定顺序: background: 背景颜色 背景地址 背景平铺(background-repeat) 背景图像滚动 背景图片位置
3. border 顺序没有要求
习惯约定: border:border-size border-style border-color
border-collapse:collapse;(相邻边框合并)
4.padding 有顺序
padding: 5px; 上下左右都为5px
padding: 5px 10px; 上下为5px,左右为10px
padding: 5px 10px 20px; 上为5px,左右为10px;下为20px
paddding: 5px 10px 20px 30px;上为5px,右为10px,下为20px,左为30px
5.border-radius 有顺序
border-radius: 左上角 右上角 右下角 左下角;
分开写为:
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
## 背景图像固定
background-attchment属性设置背景图是否固定或随着页面其余部分滚动
属性值:scroll(背景图像随对象内容滚动) fixed(背景图像固定)
# 盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: 必需,水平阴影的位置,允许为负值
v-shadow: 必需,垂直阴影的位置,允许为负值
blur: 可选,模糊距离
spread:可选,阴影的尺寸
color: 可选,阴影的颜色
inset: 可选,将外部阴影(outset)改为内部阴影(inset) (默认为外部阴影,但不能书写outset)
注:盒子阴影是不占用空间的
# 文字阴影
text-shadow:h-shadow v-shadow blur color;