css-------

1、两行代码居中

HTML

​
<div class="hero">
    <div class="hero-wrapper">
        <h2>CSS is awesome</h2>
        <p>Yes, this is a hero section made for fun.</p>
        <a href="#">See more</a>
    </div>
</div>

​

css

.hero {
    display: grid;
    place-items: center;
}

place-items是将justify-items和align-items结合在一起的简写属性。上面的代码等同于下面代码：

.hero {
    display: grid;
    justify-items: center;
    align-items: center;
}

2、li标签的marker伪元素属性
用来重置li标签的小圆圈样式 

li { color : yellow;}
li::marker{ color:red;}

也可以用伪元素::before和::after来重置样式

ul {
    list-style: none;
    padding: 0;
}

li {
    color: #red;
}

li::before {
    content: "•";
    color: #yellow;
    margin-right: 0.5em;
}

background-repeat有一个值，可以防止背景裁剪。

div{background-repeat: round;}

3、object-fit 属性

img{
    width:100px;
    height:50px;
    object-fit:contain;
}

object-fit属性是相当神奇且有用的。 当我第一次了解它时，它改变了很多事情，使我作为前端开发人员的生活更加轻松。 最近，我正在研究显示徽标网格的部分。 由于徽标大小不一致，因此有时很难做到这一点。 其中一些具有水平形状，一些具有垂直形状。😒😵

通过使用object-fit:contain，我可以控制徽标的width和height，并强制将图像包含在定义的宽度和高度中。😱😱

HTML

<ul class="brands">
    <li class="brands__item">
        <a href="#">
            <img src="img/logo.png" alt="">
        </a>
    </li>
    <li> <!-- other logos --> </li>
</ul>

CSS

img {
    width: 130px;
    height: 75px;
    object-fit: contain;
}

通过定义width和height，强制限定图像的大小，这是一个巨大的好处。 更好的是，我们可以将以上内容包装在@supports中，以避免在不支持对象适配的浏览器中拉伸徽标图像。

@supports (object-fit: contain) {
  img {
    object-fit: contain;
    height: 75px;
  }
}

4、resize 属性 使元素变的可拉伸

CSS 属性 resize 用于设置元素是否可调整尺寸，以及可调整的方向。

resize 不适用于下列元素：

• 内联元素
• overflow 属性设置为 visible 的块元素

resize：none        //  默认值,元素不提供用户可控的调整其尺寸的方法。
resize: both        // 元素显示可让用户调整其尺寸的机制，可沿水平和竖直方向调整尺寸。
resize: horizontal  // 元素显示可让用户沿水平方向调整其尺寸的机制。
resize: vertical    //元素显示可让用户沿竖直方向调整其尺寸的机制
resize: block       // 元素显示可让用户沿块向（水平或竖直方向之一，取决于 writing-mode 和                             
                       direction 的值）调整其尺寸的机制。
resize: inline      // 元素显示可让用户沿行向（水平或竖直方向之一，取决于 writing-mode 和 
                       direction 的值）调整其尺寸的机制

5、CSS 属性： 字体样式(Font Style)

 字体样式 {font:font-style font-variant font-weight font-size font-family}

 字体类型 {font-family:"字体1","字体2","字体3",...}

 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

 字体风格 {font-style:inherit|italic|normal|oblique}

 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}

 字体颜色 {color:数值;}

 阴影颜色 {text-shadow:16位色值}

 字体行高 {line-height:数值|inherit|normal;}

 字 间 距 {letter-spacing:数值|inherit|normal}

 单词间距 {word-spacing:数值|inherit|normal}

 字体变形 {font-variant:inherit|normal|small-cps } // 个人觉得类似于设置文本的不同写法展示 详见  https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variant  

 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}// capitalize首字母大写,uppercase 全部大写,lowercase全部小写


 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

6、文本样式(Text Style)

 行 间 距 {line-height:数值|inherit|normal;}

 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink} // 文本装饰会覆盖子孙文本元素。这意味着如果一个元素指定了文本装饰，那么子元素无法去除这个装饰 

// underline下划线   line-through删除线 overline上划线 blink闪烁，具体取决于你使用的浏览器

 段首空格 {text-indent:数值|inherit}

 水平对齐 {text-align:left|right|center|justify}

 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

 书写方式 {writing-mode:horizontal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lr}

 //  writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置该属性时，应在根元素上设置它（对于 HTML 文档，应该在 html 元素上设置）（详见https://developer.mozilla.org/zh-CN/docs/Web/CSS/writing-mode）

7、文字属性

color : #999999; /*文字颜色*/

font-family : 宋体,sans-serif; /*文字字体*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜体*/

font-variant:small-caps; /*小字体*/

letter-spacing : 1pt; /*字间距离*/

line-height : 200%; /*设置行高*/

font-weight:bold; /*文字粗体*/

vertical-align:sub; /*下标字*/

vertical-align:super; /*上标字*/

text-decoration:line-through; /*加删除线*/

text-decoration: overline; /*加顶线*/

text-decoration:underline; /*加下划线*/

text-decoration:none; /*删除链接下划线*/

text-transform : capitalize; /*首字大写*/

text-transform : uppercase; /*英文大写*/

text-transform : lowercase; /*英文小写*/

text-align:right; /*文字右对齐*/

text-align:left; /*文字左对齐*/

text-align:center; /*文字居中对齐*/

text-align:justify; /*文字分散对齐*/

vertical-align属性

vertical-align:top; /*垂直向上对齐*/

vertical-align:bottom; /*垂直向下对齐*/

vertical-align:middle; /*垂直居中对齐*/

vertical-align:text-top; /*文字垂直向上对齐*/

vertical-align:text-bottom; /*文字垂直向下对齐*/