常用 css 样式集合

2019/09/13 css

说一说最近在工作中常用的 css

以前很少写 css 样式,如今大批量的写,从最初的不适应到现在的习惯了。慢慢的我的 css 会越来越好的,只有在业务中我才知道自己哪些不会哪些不懂,结合业务学习才是检验真理最好的检验。块级元素负责结构,内联元素负责样式

样式

1.超出一行显示…

width: 200px;
word-break: keep-all; /* 不换行 */
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis;

这个有兼容性问题

2.超出指定高度滚动

overflow-y:scroll;

3.旋转 180 度

display: block; // 如果是行内元素,旋转会失效
transform: rotate(180deg);

4.通过text-align-last:justify设置文本两端对齐

<div class="bruce flex-ct-x">
	<ul class="justify-text">
		<li>账号</li>
		<li>密码</li>
		<li>通讯地址通讯地址</li>
		<li>通讯地址</li>
	</ul>
</div>

.justify-text {
	li {
		margin-top: 5px;
		padding: 0 20px;
		width: 100px;
		height: 40px;
		background-color: $red;
		line-height: 40px;
		text-align-last: justify;
		color: #fff;
		&:first-child {
			margin-top: 0;
		}
	}
}

画图

1.css 画一个倒三角

width: 0px;
height: 0px;
margin-left: 4px;
border-top: 5px solid #222222;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
width: 0;
border: 10px solid;
border-color: #222 transparent transparent;

2.伪元素画横线

    .title::before {
      content: "";
      display: inline-block; //不能是行内元素,否则会失效
      width: 30px;
      height: 1px;
      background: rgba(51, 51, 51, 1);
      margin-right: 10px;
      position: relative;
      bottom: 5px;
    }
    .title::after {
      content: "";
      display: inline-block; //不能是行内元素,否则会失效
      width: 30px;
      height: 1px;
      background: rgba(51, 51, 51, 1);
      margin-left: 10px;
      position: relative;
      bottom: 5px;
    }
  1. 实现内部虚线边框
.dash-border{
  width: 200px;
  height: 100px;
  line-height: 100px;
  outline: 1px dashed #fff;
  outline-offset: -10px;
}

outlineborder 的区别:outline 不占据空间,outline-raduis 很多浏览器不支持

flex 布局(常用)

作用在父元素身上

1.子元素水平方向对齐方式

justify-content:space-between; //两端对齐
justify-content:center; //中间对齐
justify-content:flex-end; //右对齐

2.子元素垂直方向对齐方式

align-items:center; // 垂直居中
align-items:flex-end; // bottom 对齐
align-items:flex-start; // top 对齐

3.子元素换行方式

flex-wrap: wrap; // 第一行在上

4.子元素的排列

flex-direction:column; //水平方向

作用在字元素身上的属性,子元素内部布局

1.当空间不足的时候,子元素内部表现方式

flex-shrink:1; // 等比例缩小,默认
flex-shrink:0; // 其他项目都是1,空间不足,不缩小

2.空间不足或者充裕时,子元素的大小

flex-basis: xxxpx; // 子元素占固定空间
flex-basis: auto; // 根据剩余空间来算

3.不受父组件垂直方向上控制布局(属性值一样)

align-self:center; //居中

注意了: 有一次同事用 flex 进行布局,剩余空间元素等比例缩小,理论上没有问题,但是有一个元素是 img 标签,并且有 border-raduis: 50% ,然后问题就来了,空间不足的时候,原来是圆形图片被压缩成椭圆了。这时候我们就需要用 flex-shrink:0;flex-basis: xxxpx 来设置了。这个坑踩了半天

css 实现布局问题

1.页面文字内容是动态的,可能是几个字,也可能是是一句话,然后希望文字少的时候居中显示,文字超过一行的时候局左显示

<div class="box">
  <p id="conMore" class="content">文字内容-新增文字-新增文字-新增文字-新增文字-新增文字-新增文字-新增文字</p>
</div>
<!-- 按钮 -->
<p><button id="btnMore">更多文字</button></p>
CSS:
.box {
  padding: 10px;
  background-color: #cd0000;
  text-align: center;
}
.content {
  display: inline-block;
  text-align: left;
}

原理是利用元素的包裹性:元素的尺寸由内部元素决定,但永远小于包含块容器的尺寸。也就是说实际上 p 元素的宽度一直都是由文字的大小撑开的,最大宽度不超过 div 的宽度。所以最后表现就是这样了

2.width:100%; 是什么意思??

继承父元素的宽度;如果父元素是 200px;子元素也就是200px;相当于限制了元素的宽度

3.max-width 有什么用?

除了限制元素的最大宽度,还可能模拟 iscroll 平滑的滚动

4.height: 100% 为何会失效? 有时候我们想要一张背景图片默认撑满全屏,可是有时候因为高度不够,总是撑不满,height: 100% 没有用,除非设置 html bodyheight: 100% 才有用。因为浏览器先渲染父元素在渲染子元素,父元素的高度没有设置的具体的值,子元素会撑开父元素的高度,即子元素高度就是父元素高度。

5.min-width>max-width>!important 优先级关系,没想到吧,哈哈哈

6.内联元素的 padding 在垂直方向是有影响的,只是我们眼睛看不出,如果用 border: 1px red solid 是能看出效果的

7.一层元素实现三道杠 利用 background-clip

.icon-menu {
    display: inline-block;
    width: 140px; height: 10px;
    padding: 35px 0;
    border-top: 10px solid;
    border-bottom: 10px solid;
    background-color: currentColor;
    background-clip: content-box;
}

8.花一个带加号的上传按钮

 .add {
   border: 2px dashed;
   position: relatie;
   overflow:hidden;
   width: 75px;
   height: 75px;
   color: #ccc;
   transition: color .25s
   display: inline-block;
 }
 .add:hover {
    color: #34538b;
}
.add::before, .add::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
}
.add::before {
    width: 20px;
    border-top: 4px solid;
    margin: -2px 0 0 -10px;
}
.add::after {
    height: 20px;
    border-left: 4px solid;
    margin: -10px 0 0 -2px;
}

未完待续~~~


一名伪程序猿——sunseekers,曾被bug虐的体无完肤,却依旧待他如初恋。

如果我改过的某一个bug,吐槽过的某一个需求,写过的某一行代码

曾在你的心里荡起涟漪,那至少说明在逝去的岁月里,我们在某一刻,共同经历着一样的情愫。

有时候,虽然素未谋面。却已相识很久,很微妙也很知足。


如果你喜欢我写过的某一个文字,请支持我,鼓励我,你的鼓励是我最大的动力来源

当然恰好你也喜欢我的话,我们可以互相关注,相互学习的哟!

sunseekers

Search

    Table of Contents