css样式——常用备忘录

电玩女神 2021-07-25 20:38 483阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]

--------------------

QQ 1285575001  
Wechat M010527  
技术交流 QQ群599020441  
纪年科技aming

--------------------

###### \# font ######

*  font-family —— 设置字体样式
 *  font-size: 14px; —— 字体大小

###### \# CSS 外边距 —— 围绕在元素边框的空白区域 ######

*  设置外边距 ——元素外创建额外的“空白”
 *  使用 margin 属性 —— 接受任何长度单位、百分数值甚至负值  
    margin-top —— 设置 元素的上外边距

###### \# linear-gradient() ——创建一个线性渐变的 “图像” ######

*  并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果
 *  background-image: linear-gradient(direction, color-stop1, color-stop2, …);![在这里插入图片描述][20191204102124542.png]

###### \# transform ——旋转 元素![在这里插入图片描述][20191204100321698.png] ######

###### \# rotate() \[旋转\] ######

*  可以为正数或者负数，正数是顺时针旋转，负数是逆时针旋转。

## \# 边框 (border) —— 围绕元素内容和内边距的一条或多条线 ##

*  允许你规定元素边框的 3 个方面：宽度、样式， 颜色
 *  使用表格来创建文本周围的边框
 *  但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素
 *  元素外边距内就是元素的的边框 (border)/元素的边框就是围绕元素内容和内边据的一条或多条线

![在这里插入图片描述][2019120412223378.png]

--------------------

*  border-radius 属性 —— 允许你为元素添加圆角边框！  
    JavaScript 语法: object object.style.borderRadius=“5px”  
    最多可指定四个 border -\*- radius 属性的复合属性  
    语法：border-radius: 1-4 length|% / 1-4 length|%;  
    ![在这里插入图片描述][20191204122111311.png]  
    注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。  
    如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。  
    如果省略右上角，左上角是相同的。
    
     *  display 属性——规定元素应该生成的框的类型  
        JavaScript 语法： object.style.display=“inline”![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 1]

--------------------

display: flex; 弹性布局 ——flexible box的缩写，意为弹性布局  
盒模型 灵活性 ——flex容器(flex container)  
容器中默认存在两个轴：水平方向的主轴（main axis）和 垂直方向上的交叉轴（cross axis）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 3]

###### \# z-index ——设置元素的堆叠顺序。 ######

*  拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

###### \# position ——规定元素的定位类型 ######

*  默认值： static
 *  JavaScript 语法： object.style.position=“absolute”

position 属性  
absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative生成相对定位的元素，相对于其正常位置进行定位。

因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

static默认值

没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index声明）。

inherit规定应该从父元素继承 position 属性的值。

font-weight:bold;

border-radius:100px;

![在这里插入图片描述][20191204114301115.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 4]

###### \# @-webkit-keyframes \[name\] /\* Safari and Chrome \*/ 规则 ——创建动画 ######

*  通过逐步改变从一个CSS样式设定到另一个
 *  在动画过程中，您可以更改CSS样式的设定多次
 *  指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同  
    0％是开头动画，100％是当动画完成
 *  为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
 *  注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 5]

# \# background #

*  background-image 属性  
    JavaScript 语法： object.style.backgroundImage=“url(stars.gif)”  
    ![在这里插入图片描述][20191204115911100.png]  
    提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果  
    ![在这里插入图片描述][20191204120539760.png]![在这里插入图片描述][20191204120556347.png]
 *  background-position 属性  
    JavaScript 语法： object.style.backgroundPosition=“center”  
    ![在这里插入图片描述][20191204120718992.png]  
    提示：  
    您需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 6]
 *  background-repeat 属性  
    JavaScript 语法： object.style.backgroundRepeat=“repeat-y”  
    ![在这里插入图片描述][20191204120906986.png]![在这里插入图片描述][20191204120924963.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 7]

###### \# flex-direction 属性 ——规定灵活项目的方向 ######

*  如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用
 *  JavaScript 语法： object.style.flexDirection=“column-reverse”  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 8]

###### \#height: 100vh; ######

![在这里插入图片描述][20191204143436364.png]

###### \# overflow 属性 ——规定当内容溢出元素框时发生的事情。 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 9]  
定义溢出元素内容区的内容会如何处理。  
如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。  
因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

*  overflow-x 属性 —— 规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话  
    JavaScript 语法： object.style.overflowX=“scroll”  
    overflow-x: visible|hidden|scroll|auto|no-display|no-content;![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 10]

position 属性  
absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative生成相对定位的元素，相对于其正常位置进行定位。

因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

static默认值

没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index声明）。

inherit规定应该从父元素继承 position 属性的值。

font-weight:bold;

border-radius:100px;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]: /images/20210725/80ec0715303a40eb834560e56891b009.png
[20191204102124542.png]: /images/20210725/4c86728cfc984f0caec0b886bd157f30.png
[20191204100321698.png]: /images/20210725/a1d018a5ee1c46d5b0aa328b44d1455f.png
[2019120412223378.png]: /images/20210725/7ebc247bf71044cc87d5d0cf06861427.png
[20191204122111311.png]: /images/20210725/815b73196fe640c398b07626a758f574.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 1]: /images/20210725/61ebdc5b01734ac4b6b5937891c04314.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191204143156592.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 3]: /images/20210725/0483d829998840bd95374426bda8285d.png
[20191204114301115.png]: https://img-blog.csdnimg.cn/20191204114301115.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 4]: /images/20210725/d311d6fcfbdd428f9f7fc7489483afe3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 5]: /images/20210725/8c30d7bd8262448590f31af2ad22ef07.png
[20191204115911100.png]: /images/20210725/1f94a97444af44ed8e18456b5cf5ecb6.png
[20191204120539760.png]: https://img-blog.csdnimg.cn/20191204120539760.png
[20191204120556347.png]: /images/20210725/0aea1540b90440d393bea374c44a52d6.png
[20191204120718992.png]: /images/20210725/1dff71dfccb446e89c65973ca3e3b448.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 6]: /images/20210725/5fcf062e553d447797277fd0147177f1.png
[20191204120906986.png]: https://img-blog.csdnimg.cn/20191204120906986.png
[20191204120924963.png]: https://img-blog.csdnimg.cn/20191204120924963.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 7]: /images/20210725/696f3df7b5d84298a202977564d69d90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 8]: /images/20210725/c81ad7312d704dbd98e3da58a260382e.png
[20191204143436364.png]: /images/20210725/1ccae0e4f35c4bdaab81379b6117e77a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 9]: /images/20210725/fa7868c320084ab1a6ee8eb82ab49304.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 10]: /images/20210725/85409a944fe14deaa7d054ad55933045.png