css常用样式汇总记录

1 div盒子样式居中

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

1.1 div盒子水平居中

margin:0 auto;

2 清除浮动

2.1 标签法

简单，结构性差

clear: both;

部分浏览器支持flow-root属性

display:flow-root;

2.2 overflow属性
简单隐藏元素，如果使用hidden，溢出的元素无法显示

overflow:hidden;
/*hidden| auto| scroll  都可以实现。*/

2.3 after伪元素清除浮动

给需要去除浮动的盒子的父盒子添加clearfix属性
推荐使用

.clearfix:after { 
					content: "";
					display: block; 
					height: 0; 
					clear: both; 
					visibility: hidden;  
				}   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

.clearfix::after{
 	content:""；
	display:table；
	clear:both；
}

2.4 双伪元素清除浮动

给需要去除浮动的盒子的父盒子添加clearfix属性
推荐使用

.clearfix:before,
.clearfix:after { 
		  content:"";
		  display:table; 
		}
		.clearfix:after {
		 clear:both;
		}
		.clearfix {
		  *zoom:1;
		}

3 禁止手机端缩放

content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"

暂时写到这，更新ing 3.1

4 色相hsl(270,60%,70%)

a:hover悬停
a:active活跃
rgb相互转换十六进制

推荐网站
webfx.com/web-design/hex-to-rgb

5 字体font-family

Serif和sans-serif 衬线和无衬线 serif sans-serif
Script Fonts 斜线请柬cursive
Decorative Fonts 装饰字体cursive fantasy
Monospace Fonts 单行字体monospace
引入字体文件@font-face

字体网站fonts.google.com

6 清除浮动

.clearfix::after{
 	content:""；
	display:table；
	clear:both；
}
display:flow-root;

7 The Box Model Fix

html｛
	box-sizing : border-box;
｝
*,*:before,*:after{
	box-sizing:inherit;
}

position

static relative absolute fixed sticky

8 flex 轴

flex-container父元素 flex-item

<div class="container">
	<div>flex item</div>
</div>

.container{
	display:flex;//不会跨越盒子宽度
	display:inline-flex//跨越盒子宽度
}

flex-direction决定轴方向

row row-reverse column column-reverse

flex-wrap

wrap 拆行或拆列 no-wrap不拆行或拆列

flex-flow

设置flex-item大小

flex-basis初始大小

flex-grow项目将如何展开

flex-shrink 决定物品收缩方式

flex：grow shrink basis

flex:0 1 100px

flex对齐

justify-content space-between center
align-items

.box{
	display:flex;
	align-items:center;
	justify-content:center;
}

9 grid 行 列

grid container显式 隐式

grid-template-columns
grid-template-rows

grid-auto-columns
grid-auto-rows

grid-column
grid-row
单位 fr
repeat(3,1fr)
gap 间隙

高级选择器

p:first-child{}
p:last-child{}
first-of-type
last-of-type

响应式

max-width:800px;
width:85%;

图像铺满盒子不重复

.background{
	background-repeat:no-repeat;
	background-size:100% 100%;
	//background-size:cover;
	//background-position 显示图片位置，top right left 可以自己试试
}

10 媒体查询

@media screen and （max-width:800px）{
	h1{
		font-size:16px;
	}	
}

宽度断点
@media (width:360px){}
@media (min-width:360px) and (max-width:800px){}

/* Responsive

------------------------------------*/

@media screen and (min-width:750px){
  header, footer {
    text-align: center;
  }
  .project-item img {
    float: left;
    margin-right: 20px;
  }

  .job-item {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 20px;
  }
  .contact-list {
    display: flex;
    justify-content: center;
  }
}

@media screen and (max-width:749px){
  h1 {
    font-size: 75px;
    line-height: 0.9;
    margin-bottom: 20px;
  }
  h2 {
    line-height: 1;
  }
  .contact-list a {
    padding: 5px;
  }
}

先到这3.19

多行文本超出显示省略号

/* 多行文本超出显示省略号 */
  /* 溢出隐藏 */
  overflow: hidden; 
  /* 超出文本显示省略号 */
  text-overflow: ellipsis;
  /*文本需要显示的行数 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;

单行文本显示省略号

/* 单行文本显示省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;  //强制不换行