css常用的布局效果

一、css

去掉 li 的点：

list-style: none;

绝对布局，定住导航栏:

position: fixed; //生成绝对定位的元素，相对于浏览器窗口进行定位。
top: 0;
z-index: 999;

设置宽度包含 padding border content :

box-sizing: content-box; //width = width
box-sizing: border-box; //width= padding+border+content,

input 去掉蓝色线:

outline:none; 

在大图中用一小块图：

background:url('../img/search.png') no-repeat -20 -20; 

去掉框样式：

border: 0;       

行高30,文字大小18：

font:18px/30px; 

下划线：

text-decoration: none;   //去掉
text-decoration: underline;  //显示下划线

浮动:

float: left;

清除浮动：

.clear-fix::after{   /*清除浮动*/
	content: "";
	display:block;
	height: 0;
	clear: both;
}

设置高度，行高，并且据中：

height: 34px;
line-height: 34px;

底部有一条线：

border-bottom: 1px solid #e5e5e5;

行内块级：

display: inline-block;

弹性布局（css3）：

display: flex;
flex-direction: row; 方向

儿子：

:first-child   
:nth-child(2)
:last-child

将段落缩进:

text-indent: 24px;

内容居中：

text-align: center;

显示省略号来隐藏一行文字

white-space: nowrap; //不换行
text-overflow: ellipsis; //显示省略号
overflow: hidden; //隐藏

伪类制作边框线 +

&:after{     //边框线
     content: " ";
      width: 1px;
      height: 136px;
      display: block;
      position: absolute;
      top: 50%;
      right: 0;
      margin-top: -68px;
      border-right: 1px solid #eee;
 }
&:nth-child(2n){ // 移除
    &:after{
        display: none;
    }
}

对齐，一行

vertical-align:1px;

进度条

数据绑定方式：传入值 product.progress
<article>
 	<div class=".wrapper">   // 外边框
 		 <div class="inner" :style="{width:product.progress+'%'}"/> //内边框条
 	</div>
 	<p>{{product.progress}}%</p>  //百分比
  </article>

.wrapper{
    width: 144px;
      height: 10px;
      background: #f6e6e6;
      border-radius: 22px;
  }
 .inner{
    max-width: 100%;
    width: 40%;
    height: 10px;
    border-radius: 22px;
    background-image: linear-gradient(270deg,#F55 1%,#FF9C31 100%);
}

线性渐变颜色：

 background-image: linear-gradient(270deg,#F55 1%,#FF9C31 100%);