CSS

容器之间的边距

• 两个容器的margin相遇，会取较大的一个容器的margin作为两个容器之间的“间隔”
  可以使用BFC规范解除这种“重叠”
  可以触发BFC规范的属性有
  flex,position,overflow(除visible),float(除none)
  可以给盒子加上以上属性，解决margin重叠的问题

颜色的格式

• 设置透明色
  background:#00000060;
  设置背景颜色为#000000，透明度为60%。

• background:#ffffff00;
  设置背景颜色为白色，透明度为0，即和自己所在的块级元素背景色保持一致。

• background:transparent;
  背景透明（个人理解：就是跟自己的父元素背景色保持一致）

• 按钮居中，可以用text-align:center;
  对按钮所在的表单（块级元素）设置。

• 字体加粗:front-weight:700;

• letter-space:5px;文本之间的间距

• 在两个div盒子中
  内盒子设置position:absolute;
  外盒子设置position:rralitive;
  这样内盒子就可以相对于外盒子绝对定位，搭配left,right,top,bottom等，调整内盒子相对于外盒子的相对距离。（单独使用不会生效，必须搭配left,top等）
  transform:（-50%,-50%）
  搭配上面的绝对定位，可以实现块级元素的垂直水平居中。

• 实现输入框input在获得焦点时外边框不变蓝

input:focus{
    outline: none;
}

• 将输入到文本框中的小写字母转换成大写字母；

text-transform:uppercase;

输入框

input {
margin: 20px auto; /* 把左右边距设置为auto，就可以实现input框向两边伸展，如果确定了左右边距，则会固定左边距，向右侧伸展 */
width: 200px;
transition: 0.25s;/*转变过程所需要花费的时间（保证过渡效果的平滑） */
border: 2px solid #3498db;
}
input:focus {
width: 300px;
border-color: brown;
}
可以实现输入框在获得焦点时，width和border-color的转变（动画）

弹性布局

弹性布局实现居中
/不需要设置宽度和高度 ，是将一个div中多个子元素居中的最快方式。/
.div{
display:flex;
justify-content:center;
align-items:center;
}

/仅能在声名宽度，并且是块元素或者是表格布局的情况下使用/
.div{
margin:0 auto;
}

文本阴影

text-shadow:1px 2px 3px #fff;
文本阴影设置
1px:(必需)水平阴影的位置，允许负值
2px:(必需)垂直阴影的位置，允许负值
3px:(可选)模糊的距离
#fff:(可选)阴影的颜色

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset.
h-shadow: 阴影的水平位置 (必需) （阴影在（x轴）水平方向的位置，正值代表偏右，负值偏左）
v-shadow：阴影的垂直位置 (必需) （阴影在（y轴）垂直方向的位置，正值代表偏上，负值偏下）
blur：阴影的模糊半径 (可选) （模糊半径越大，模糊程度越高）
spread：阴影的半径 (可选) （阴影的半径越大，阴影所占的面积越大）
color：阴影的颜色 (可选)
inset：将外部阴影改成内部阴影【outset反过来】 (可选)
根据box-shadow的定义，我们可以为一个框设置一个阴影，也可以设置多个阴影。

链接状态

对链接的状态信息通过颜色来显示
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */

固定窗口页面，使之不能上下滚动
在body的css里面设置
overflow:hidden;

position的用法：

position:relative; /相对定位，相对于自己本来的位置移动/
left:-20px； /相对于自己本来的位置向左偏移20px/

position:absolute; /绝对定位，通过绝对定位，元素可以放置到页面上的任何位置/
left:100px; /自己在距离左侧边框100px，上边框150px的地方/
top:150px；

position:fixed; /固定定位/
left:5px; /自己在距离左侧边框5px，上边框5px的地方/
top:5px;

position:fixed;
top:30px; /自己在距离右侧边框5px，上边框30px的地方/
right:5px;

总结：相对定位是相对自己原来的位置偏移了多少
绝对定位和固定定位是距离上下左右边框有多少偏移量

width:150px;
height:150px;
overflow: scroll;
当文本超出所在边框的范围，添加overflow: scroll属性，可以提供一种滚动机制。
如果添加overflow: scroll属性，即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。

width:150px;
height:150px;
overflow: hidden；
如果元素中的内容超出了给定的宽度和高度属性，overflow hidden； 属性可以隐藏多出来的内容。

width:150px;
height:150px;
overflow: auto；
如果不确定元素中的内容是否超出了给定的宽度和高度属性，overflow auto；属性可以自动帮你调整。

图片剪裁

img
{
position:absolute;
clip:rect(0px 100px 20px 0px)；
}
clip 属性剪切绝对定位的图像，按照顺时针方向，上右下左，剪切并保留原图片的多少px。

vertical-align:text-top；/该元素的底边和其他元素的顶边对齐/
vertical-align:text-bottom； /该元素的顶边和其他元素的底边对齐/

定义行内元素的基线相对于该元素所在行的基线的垂直对齐.

页面层级

设置页面层级：
z-index:-1
默认的 z-index 是 0。
Z-index -1 拥有更低的优先级。

clear清除浮动

clear语法：
clear : none | left | right | both
取值：
none : 默认值。
left : 左侧抗浮动
right : 右侧抗浮动
both : 两侧抗浮动

表格

表格

Firstname	Lastname
Bill	Gates

是一行，是一列

background:url(图片) no-repeat right center;
可以实现文字的前后的图标。不用span并列。

display:inline-block
display的几个常用的属性值，inline ， block， inline-block

inline（行内元素）:
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
不能更改元素的height，width的值，大小由内容撑开.
可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）:
使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
能够改变元素的height，width的值.
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block（融合行内于块级）:
结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.