CSS备忘

Word count: 2.3k   |   Reading time≈ 8 min

CSS备忘（building）

属性相关

  • border-bottom：仅下边框

  • text-decoration：文字修饰

  • all：将选择器选中的部分设置为同一个样式(一般只能是共有的 inherit unset等)

  • background相关

    • background-size:
      • cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
      • contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。
    • background-positon：(根据坐标调整，默认(0,0)为左上角)
      • 设置规则为：先x轴后y轴
    • background-attachment：
      • scroll：使背景随页面滚动而滚动
      • fixed：固定
      • local：

  • inline-size：可自动根据书写模式调整内联文本宽度

  • overflow:（当溢出盒子时应怎样处理溢出的文本）

    • visible：默认属性，可视
    • hidden
    • scroll：添加滚动条，可与-x,-y配合使用

  • opacity:透明度

  • min-，max-属性：（设置最值）

    例如

    • min-height：最小高度

  • object-fit：（调整图像覆盖方式）

    • cover：比例不变，覆盖盒子
    • contain：比例不变，适应盒子
    • fill：比例变，覆盖盒子

字体

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

链接

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

列表

  • list-style-type：改变列表前的圆点
    • 可添加图片list-style-type: url()
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

边框

属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

轮廓:outline

outline包围在border旁边

outline: outline-color, outline-style, outline-width

值 描述
outline-color 规定边框的颜色。
outline-style 规定边框的样式。
outline-width 规定边框的宽度。
inherit 规定应该从父元素继承 outline 属性的设置。

隐藏与显示

  • display:none：占位和本体都消失
  • visibility:hidden：仅本体消失，占位还在

display

  • display:inline：将元素设置为内联元素
    • 不能修改width、height属性，大小由内容撑开
    • padding属性 top、right、bottom、left设置都有效；margin属性只有left、right设置有效
  • display:block：将元素设置为块级元素
  • display:inline-block：元素设置为行内块级元素
    • 共享行
    • 可修改width height

Position

  • static：遵循浏览器本身的规则

  • fixed：固定定位，即使滚动窗口也不动

  • relative：相对定位，相对其static的位置。在定义position:relative后进行位置移动会在其static位置的基础上移动

  • absolute：相对于最近已定位父元素，如果没有， 则相对于<html>元素

  • sticky：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

    它的行为就像 position:relative页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。

    超过某个阈值会变为fixed

重叠处理

  • z-index：赋一个数值，越大在z轴方向堆叠越高

float

  • clear：属性指定元素两侧不能出现浮动元素，避免元素混乱
    • both

@supports

1
2
3
4
/* 只会在浏览器支持supports（）内的内容时才应用样式*/
@supports(**){
	/*css code */
}

继承相关

不能继承的属性

  • width

控制继承

  • inherit：强制开启继承
  • initial：设置为浏览器默认
  • unset：设置为文档默认

选择器

选择器 示例 描述
[attr] a[title] 匹配带有一个名为attr的属性的元素——方括号里的值。
[attr=value] a[href="https://example.com"] 匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。
[attr~=value] p[class~="special"] 匹配带有一个名为attr的属性的元素 ，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。（即可以匹配class=”hello special”类似这样的)
`[attr =value]` `div[lang
选择器 示例 描述
[attr^=value] li[class^="box-"] 匹配带有一个名为attr的属性的元素，其值开头为value子字符串。
[attr$=value] li[class$="-box"] 匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
[attr*=value] li[class*="box"] 匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。
  • i 标记可让浏览器以大小写不敏感的方式检测选择器

单位制度

单位 名称 等价换算
cm 厘米 1cm = 96px/2.54
mm 毫米 1mm = 1/10th of 1cm
Q 四分之一毫米 1Q = 1/40th of 1cm
in 英寸 1in = 2.54cm = 96px
pc 十二点活字 1pc = 1/16th of 1in
pt 点 1pt = 1/72th of 1in
px 像素 1px = 1/96th of 1in
单位 相对于
em 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
ex 字符“x”的高度
ch 数字“0”的宽度
rem 根元素的字体大小
lh 元素的line-height
vw 视窗宽度的1%
vh 视窗高度的1%
vmin 视窗较小尺寸的1%
vmax 视图大尺寸的1%

布局相关

flex布局

总览

flex总览

  • 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
  • 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
  • 设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
  • 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）

属性

  • flex-direction:（指定主轴方向）
    • column
    • row
  • flex-wrap:
  • flex-flow=flex-direction flex-wrap
  • flex: num：为每个选项设置相对大小
  • flex-grow：设定多余部分分配比例（无单位）
  • flex-shrink：溢出调整？
  • align-item: 默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。center 值会使这些项保持其原有的高度，但是会在交叉轴居中。这就是那些按钮垂直居中的原因。也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。
  • justify-content：
    • flex-start：默认值，从主轴开始处排列
    • flex-end：排列到主轴末尾
    • center：在主轴居中
    • space-around：均匀分布在主轴
    • space-between：效果同space-around但左右无空隙

项排序

  • order：默认值为0，值越大排位越靠后

网格布局

属性

  • grid-template-columns:num1 ...numN：添加N个宽度为num的列

    • repeat(N,w)方法：创建N个w宽的列

  • grid-(column)-gap：调整格间隙

  • grid-auto-rows：隐式表格的高

    • minmax(min,max)方法：设置最小和最大值
Donate
  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 1970-2020 John Doe
  • Visitors: | Views:

请立刻给我钱

支付宝
微信