周末总结6

# 快捷键

保存：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;