css

[uniquejava]

Books:

CSS Mastery-Advanced Web Standards Solutions CSS3实用指南

来自: https://www.zhihu.com/question/19834302

学习css布局: http://zh.learnlayout.com/

Links: HTML5: Section or Article? What is divitis?

CSS Tricks(必读)

Centering in CSS: A Complete Guide Photoshop投影和CSS box-shadow转换

How to align the absolute position to center? 方法一

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;

方法二

*{
  margin:0;
  padding:0;
}
section{
  background:red;
  height: 100vh;
  width: 100vw;
}
div{  
  width: 80vw;
  height: 80vh;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<section>
  <div>
    <h1>Popup</h1>
  </div>
</section>

[uniquejava]

css triangle

https://css-tricks.com/snippets/css/css-triangle/ 一个高宽均为0的div, 定义三个border, 其中两个border为transparent, 链接中的动画完美演示了为什么要这么做?

HTML

You can make them with a single div. It's nice to have classes for each direction possibility.

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

# CSS

The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f00;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 

  border-right:10px solid blue; 
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;

  border-left: 60px solid green;
}

等边三角形: For an equilateral triangle it's worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width

[uniquejava]

css outline

在border之外, 不占据任何空间(可以理解outline是贴在border之外的一层边), 他不属于box model, 不参与页面内任何元素的大小计算, 不会对页面中的任何元素位置产生任何影响.

为了突显某个元素(比如鼠标划过, 可以使用outline, 好处是相比border它不会让元素位置发生移动)

在chrome中设置textarea/input的outline为0, 可以去掉focus后的蓝色高亮效果.

https://css-tricks.com/almanac/properties/o/outline/ http://w3school.com.cn/cssref/pr_outline.asp

css star

“Our StarRating component uses CSS to construct and display a star. Specifically, using a clip path, we can clip the area of our div to look like a star. The clip path is collection of points that make up a polygon:”

Excerpt From: Alex Banks. “Learning React.” iBooks.

.star {
    cursor: pointer;
    height: 25px;
    width: 25px;
    margin: 2px;
    float: left;
    background-color: grey;
    clip-path: polygon(
        50% 0%, 
        63% 38%,
        100% 38%, 
        69% 59%, 
        82% 100%,
        50% 75%, 
        18% 100%, 
        31% 59%,
        0% 38%, 
        37% 38%
    );
}

.star.selected {
  background-color: red;
}

[uniquejava]

box shadow

CSS3 Box Shadow on Top, Left, and Right Only

no wrap

white-space: nowrap;

或者使用bootstrap自带的text-nowrap样式.

文本溢出自动截断

overflow: hidden;  // 重要
white-space: nowrap;  // 重要
text-overflow: ellipsis;  // 重要
display: block | inline-block // 重要
width|max-width: 250px    // 重要

还要设置其max-width:100%、看情况设定其父元素的max-width:100%

sticker footer

Sticky Footer, Five Ways

border length

见Any way to limit border length?

方法一

#mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  border-bottom: 2px solid #f51c40;
  background: #3beadc;
}

#borderLeft {
  border-left: 2px solid #f51c40;
  position: absolute;
  top: 50%;
  bottom: 0;
}

<div id="mainDiv">
  <div id="borderLeft"></div>
</div>

方法二

div {
  position: relative;
} 
/* Main div for border to extend to 50% from bottom left corner */
div:after {
  content:""; 
  background: black; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  height: 50%; 
  width: 1px;
}

(note - the content: ""; declaration is necessary in order for the pseudo-element to render)

[uniquejava]

Flex

Always equal flexbox columns

Assigning equal flex-grow values to flex-items will ensure those items are of equal width up to the point that their inner text content is larger than that width.

It’s pretty easy to get an equal-width column grid layout going using flexbox:

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

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1;
  margin-right: 10px;

  &:last-child {
    margin-right: 0;
  }
}

However, the preferred width of a flex-item containing text seems to be the text without line breaks, so one long word can ruin your whole day.

To prevent this from happening, just add width: 0 to the flex-items. It’s then obviously up to you to handle how the text should flow, but at least the layout behaves consistently.

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1;
  width: 0; // Force equal-width columns
  margin-right: 10px;

  &:last-child {
    margin-right: 0;
  }
}

[uniquejava]

媒体查询 css3 media query

mq

@media (max-width: $var$px) {
  $END$
}

象素单位 px, em and rem 比较

I have two simple rules:

1. Size in em if the property scales according to it’s font-size
2. Size everything else in rem.

详见:

1. REM vs EM – The Great Debate
2. PX, EM or REM Media Queries?

自定义字体 Custom Fonts

Defining Custom Fonts in CSS With @font-face and font-display

1. SourceHanSans 下载
2. otf转ttf: https://convertio.co/otf-ttf/
3. npm install -g ttf2eot && ttf2eot IBMPlexSans-Light-V01.1.ttf IBMPlexSans-Light-V01.1.eot
4. 定义css

@font-face {
  font-family: IBMPlexSans Light;
  src: url(/assets/fonts/IBMPlexSans-Light-V01.1.ttf), url(/assets/fonts/IBMPlexSans-Light-V01.1.eot);
  font-display: swap;
}

使用font-spider压缩字体文件(将字体文件中不使用的文字全部删除)

前端：使用第三方字体的缺点以及折中的优化

[uniquejava]

vertical-align

仅用于上下对齐 同一行 中的元素. https://css-tricks.com/almanac/properties/v/vertical-align/

配合ghost-element技术也能用于元素的垂直居中.

给flex子元素加固定间距

下拉框自适应宽度，间距为10px

Better way to set distance between flexbox items

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbox > * {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns
  */
  box-sizing: border-box;
  width: calc(1 / 3 * 100% - (1 - 1 / 3) * 10px);
}

[uniquejava]

给background-image加滤镜

How to apply a CSS filter to a background image 注意：需要从结构上拆分成两个Element， 将image放在一层， text放在image之上。如果不分层直接用filter文字也会变暗.

<div class="members">
  <a-avatar v-for="i in memberCount" :key="i" :src="require('@/assets/boy.jpeg')" />
  <span class="last-avatar-container">
    <div class="last-avatar-image" :style="{ backgroundImage: 'url(' + img + ')' }"></div>
    <div class="plus-text">+10</div>
  </span>
  <span class="total">共有 {{ team.member }}个</span>
</div>
<script>
export default {
  props: ['team'],
  data() {
    return {
      img: require('@/assets/boy.jpeg'),
    }
  },
  computed: {
    memberCount() {
      return this.team.member > 5 ? 4 : this.team.member - 1
    },
  },
}
</script>

.last-avatar-container {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: bottom;

  margin-left: -11px;

  .last-avatar-image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: cover;
    border-radius: 50%;
    border: solid #fff 1px;
    filter: brightness(0.47);
  }

  .plus-text {
    position: absolute;
    left: 50%;
    top: 50%;

    font-family: PingFangSC-Medium;
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 0;

    transform: translate(-50%, -50%);
  }
}

[uniquejava]

选中第一个后代

:not(.example) .example

see https://stackoverflow.com/a/12922863

vue深度选择器 less + ant design

可以加scoped

  .workarea ::v-deep .piggy.ant-tabs {
    background: #f6f6f8;

  >>> .piggy.ant-tabs {
    background: #f6f6f8;

vue深度选择器 scss + element_ui

不能加scoped

.parentCssName /deep/ .libCssName{}

使用::before设置背景图片

.with-semitrans-bg {
    position: relative;
    height: 10rem;
    padding: 1rem;
    font-size: 2rem;
    color: #000;
    z-index: 1;
}

.with-semitrans-bg:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(https://wpshout.com/media/2016/04/converse-fields-768x574.jpg);
    background-position: center;
    background-size: cover;
    opacity: .5;
    z-index: -1;
}

<div class="with-semitrans-bg">This <em>is</em> what we want.</div

原文：Three Practical Uses of the :before and :after CSS Pseudoselectors