build up__css

最新推荐文章于 2021-01-19 23:41:03 发布

Geek_d

最新推荐文章于 2021-01-19 23:41:03 发布

阅读量692

点赞数

本文链接：https://blog.csdn.net/qq_41591784/article/details/108530933

版权

文章目录

浏览器内核

内核	css前缀	浏览器
Trident内核	css前缀为"-ms-"	IE
Gecko内核	css前缀为"-moz-"	火狐浏览器
WebKit内核	css前缀为"-webkit-"	safari chrome
Presto内核	css前缀为"-o-"	Opera（欧朋）

rem、em、px、vw、vh、百分比布局

em相对于父元素，rem相对于根元素。

vw、vh相对于视口的宽高

【margin和padding设置百分比】:margin 设置成百分比的时候，只跟父容器宽度有关

amfe-flexible：移动端适配解决方案

弹性布局

关于盒模型的理解

怪异模式（IE）：box-sizing:border-box;

标准模式（W3C）：box-sizing:content-box;

content-box:不包括border, margin, padding
padding-box:width和height属性包括padding的大小，不包括border和margin
border-box:width和height属性包括padding和border，不包括margin。

BFC

直译为块级格式化上下文

内部的box会在垂直方向一个接一个的放置，但相邻的box margin会重叠

【注】:可以包裹一层使其成为两个BFC

是一个独立的容器，容器内的元素不会影响到外部的元素

计算BFC的高度时，浮动元素也参与计算（设置overflow:hidden，使其成为BFC，清除浮动）。

BFC的区域不会与float box重叠

float的值不是none。
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible

伪元素（::）和伪类(: )

伪类：用于向某些选择器添加特殊的效果

伪元素：用于将特殊的效果添加到某些选择器

【区别】:有没有生成新的元素

display的属性

flex, table, gird（网格布局）

【flex的兼容】

【grid】:grid-template-columns:定义每一列的列宽；grid-template-rows:每行的行高

【display:none 与 visibility:hidden 的区别】:两者都会看不见，前者宽高等信息会消失，后者会占据空间

背景

背景一个长图，如何设置背景为图片中间一部分

 .page {
      background-image:url(...);
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
    }
    
 //或者
 .page {
    background:url(...) no-repeat center center ;
    background-size: 100%;

首页的大背景图，以防图片缩放变形

background: #111228 url("../images/home.png") center no-repeat;
background-size: auto 100%;

背景色渐变

线性渐变

   background: -webkit-linear-gradient(top,red,white,blue);     
    background: -moz-linear-gradient(top,red,white,blue);

使用css3滤镜写模糊背景

#blur{
	filter:blur(10px);
	-webkit-filter:blur(10px);
	-moz-filter:blur(10px);
	-ms-filter:blur(10px);
	-o-filter:blur(10px);
}

商品图片

商品的图片有的可能会很大，那我们显示时不能被压缩
解决方法：
1.写背景图

<div class="goods-image" :style="{backgroundImage:'url('+ item.mainPhoto + ')' }" v-if="item.mainPhoto"></div>

2.使用object-fit

对图片进行剪切，保留原始比例：

object-fit: cover;

文字

文字竖向显示

writing-mode: vertical-lr;/*文字从左向右*/ 
writing-mode: tb-lr;

文字超出显示省略号

单行

.single-ellipsis{
   width: 500px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

多行

.multiline-ellipsis {
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; //需要显示的行数
  overflow: hidden;
  text-overflow: ellipsis;
 }

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本

文字渐变

 background-image: -webkit-linear-gradient(bottom, #e86932, #ea412e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

滚动条

隐藏滚动条（滚轮写在对应的盒子里）

overflow-y: scroll;
scrollbar-width: none; /* Firefox */

&::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

或者

::-webkit-scrollbar {
      display: none;
      width: 0 !important;
      height: 0 !important;
      -webkit-appearance: none;
      background: transparent;
    }

写滚动条样式

.scroll-container {
  height: 250px;
  border: 1px solid #ddd;
  padding: 15px;
  overflow: auto;
  .row {
    margin: 0;
    line-height: 1.5;
  }
 
  &::-webkit-scrollbar {/*滚动条整体部分*/
    width: 8px;
    background: white;
  }
  &::-webkit-scrollbar-corner, /* 滚动条角落（边角） */
  &::-webkit-scrollbar-thumb,/*滚动条里的小块*/
  &::-webkit-scrollbar-track/* 滚动轨道*/ {
    border-radius: 4px;
  }
  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track {
    /* 滚动条轨道 */
    background-color: rgba(180, 160, 120, 0.1);
    box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
  }
  &::-webkit-scrollbar-thumb {
    /* 滚动条手柄 */
    background-color: #00adb5;
  }
 }

input

鼠标点击去掉input自带边框

{ outline: none }

修改placeholder样式

input {
	width: 100%;
	height: .84rem;
	line-height: .84rem;
	background: #F8F8F8;
	border-radius: .08rem;
	border: none;
	font-size: .32rem;
	padding: 0 .2rem;
	box-sizing: border-box;
	color: #666;
	&::-webkit-input-placeholder {
	 	/* WebKit browsers */
		color: #666;
	}
	&:-moz-placeholder {
	  	/* Mozilla Firefox 4 to 18 */
		color: #666;
	}
	&::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: #666;
	}
	&:-ms-input-placeholder {
		/* Internet Explorer 10+ */
		color: #666;
	}
}

垂直居中的方法

写三角形

/** 正三角 */
 .triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 25px 40px 25px;
   border-color: transparent transparent rgb(245, 129, 127) transparent;
 }
 
 /** 倒三角 */
 .triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 40px 25px 0 25px;
   border-color:  rgb(245, 129, 127) transparent transparent transparent;
 }

写遮罩层

.dialog {
   position: fixed;
   z-index: 10;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-color: rgba(0, 0, 0, 0.8);
   .content {
     position: absolute;
     width: 400rpx;
     height: 300rpx;
     background-color: red;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
   }
 }
}

清除浮动

参考
方法1：

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

float之后，元素会居顶，如何居中显示
想要垂直居中，可以设置position

方法2：
添加 clear：both
方法3：
父元素添加overflow：hidden；

全屏灰色

使用滤镜filter的grayscale函数。

 <style>
 .filter {
   -webkit-filter: grayscale(100%); /* webkit */
   -moz-filter: grayscale(100%); /*firefox*/
   -ms-filter: grayscale(100%); /*ie9*/
   -o-filter: grayscale(100%); /*opera*/
   filter: grayscale(100%);
   filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /*ie*/
   filter: gray; /*ie9- */
 }
 </style>
 <html class="filter">
 </html>

设置个别组件灰色

filter: grayscale(100%);//写入对应的组件css中

CSS实现自适应分隔线的方法

table

等宽表格单元格

.calendar {    
	table-layout: fixed;  
}

test

1.商品主图放在一个盒子中。请编写样式，使得盒子宽200px,高200px，商品主图在盒子中居中显示，主图有可能很大，也有可能很小。不管是很大或者很大，使图片等比缩放以保证长边缩放到200px，短的一边在盒子里面居中显示。

object-fit属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

如果是背景

.img{
    width: 200px;
    height: 200px;
    background: url(./img/test4.png) no-repeat center;
    background-size: contain;
}

2.页面在iPhone手机中底部空白导致按钮被隐藏

解决：

 	padding-bottom:  constant(safe-area-inset-bottom);//兼容IOS<11.2
    padding-bottom:  env(safe-area-inset-bottom);//兼容iOS>=11.2
    //相当于在iphonex情况下，会自动加个padding-bottom的高度，不是的话就不生效，margin也行的哦

修改meta

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> //重点是红色部分