css项目总结

少用的css代码

盒子阴影

语法

box-shadow: h-shadow v-shadow blur spread color inset;

说明

值	描述
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

实例

.top {
    box-shadow: 0 5px 5px #CCCCCC;
}

清除元素的默认轮廓

 outline: none;

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline其他属性

outline-color	规定边框的颜色
outline-style	规定边框的样式
outline-width	规定边框的宽度
inherit	规定应该从父元素继承 outline 属性的设置。

outline-style
说明

值	描述
none	默认。定义无轮廓
dotted	定义点状的轮廓
dashed	定义虚线轮廓
solid	定义实线轮廓
double	定义双线轮廓。双线的宽度等同于 outline-width 的值
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值
inherit	规定应该从父元素继承轮廓样式的设置

outline连写样式

outline-color, outline-style, outline-width

注意

请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
轮廓线不会占据空间，也不一定是矩形。
默认值： none 

扩展

outline的层级顺序：

1、outline在不同的格式化上下文呈现是不一样的，在块级元素里面是可以覆盖上下两边的内容的。在内联元素之可以覆盖上面的内容。

2、通常情况下outline会按照后面覆盖前面的顺序正常显示（同等情况下，如同在文档流里面都没有浮动，或者都是浮动，定位的有z-index不算）

3、如果页面有浮动元素，则先显示浮动元素的outline，再显示正常文档流的outline（浮动元素的outline被没有浮动元素的outline覆盖）

background

语法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

连写

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

说明

值	描述
background-color	规定要使用的背景颜色
background-position	规定背景图像的位置
background-size	规定背景图片的尺寸
background-repeat	规定如何重复背景图像
background-origin	规定背景图片的定位区域
background-clip	规定背景的绘制区域
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动
background-image	规定要使用的背景图像
inherit	规定应该从父元素继承 background 属性的设置

图文对齐

语法

vertical-align: middle;

说明

值	描述
baseline	默认。元素放置在父元素的基线上
sub	垂直对齐文本的下标
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐
length
%	使用 “line-height” 属性的百分比值来排列此元素。允许使用负值
inherit	规定应该从父元素继承 vertical-align 属性的值

input对齐

第一种 直接用input写
这种不太好对齐 可能用&nbsp去对齐，但是太麻烦。

第二种 用table去布局
这种比较好对齐，可以采用

<table >
        <tr><td>登录名</td><td><input type="text"></td></tr>
        <tr><td>密码</td><td><input type="text"></td></tr>
    </table>

效果是这样的

第三种 用label标签来对齐

<label for="inputs">登录名</label><input type="text" id="inputs"></input>
    <br />
    <label for="input2">密码</label><input type="text" id="input2"></input>

这样只需要在css中设定

label{
            display: inline-block;
            min-width: 100px;/*或者 width: 100px;*/
        }

背景颜色渐变，只换颜色，不渐变

	 background: linear-gradient(to right, red 0%,red 50%,white 51%,white 100%);

清除浮动

代码

.product-details .w1200::after {
    content: "";
    display: block;
    clear: both;
}

font样式连写

连写顺序

font-style font-variant font-weight font-size/line-height font-family

说明

值	描述
font-style	规定字体样式
font-variant	规定字体异体
font-weight	规定字体粗细
font-size/line-height	规定字体尺寸和行高
font-family	规定字体系列
caption	定义被标题控件（比如按钮、下拉列表等）使用的字体
icon	定义被图标标记使用的字体
menu	定义被下拉列表使用的字体
message-box	定义被对话框使用的字体
small-caption	caption 字体的小型版本
status-bar	定义被窗口状态栏使用的字体

background连写

连写顺序

background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image

语法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

说明

值	描述
background-color	指定要使用的背景颜色
background-position	指定背景图像的位置
background-size	指定背景图片的大小
background-repeat	指定如何重复背景图像
background-origin	指定背景图像的定位区域
background-clip	指定背景图像的绘画区域
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动
background-image	指定要使用的一个或多个背景图像