蓝桥杯web备赛---css篇

2、CSS

写在前面：css一定要掌握flex,grid以及position布局方式，另外之前考过文字溢出的问题，需要注意一下。

position:sticky 粘性定位

记住要设置top:定位在什么位置，不然是不起作用的

一些题目：

文字溢出的问题：文字很多导致文字溢出，我们如下列设置就可以达到：显示 2 行，剩余的内容用省略号（…）替代

  .more2_info_name{
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
        }

(1)、css背景

• background-color

• background-image

• background-repeat

  repeat-x，repeat-y, no-repeat

• background-attachment

  背景图像附着：属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

  fixed:固定背景图像

  scroll:背景图像应随页面的其余部分一起滚动

• background-position

  指定背景图像的位置

(2)、css外边距合并

当两个垂直外边距相遇时，它们将形成一个外边距。

(3)、css轮廓

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

• outline-style
• outline-color
• outline-width
• outline-offset：在元素的轮廓与边框之间添加空间
• outline

(4)、文字间距

text-indent 属性用于指定文本第一行的缩进：

letter-spacing 属性用于指定文本中字符之间的间距。

line-height 属性用于指定行之间的间距：

word-spacing 属性用于指定文本中单词之间的间距。

white-space 属性指定元素内部空白的处理方式(nowrap不允许换行)

(5)、阴影效果

• text-shadow

  h1 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  }
  

  text-shadow:水平阴影，垂直阴影，模糊，颜色

• box-shadow

  同上

Sofia Font
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

引入谷歌字体，感觉能用

(6)、css列表

list-style-type 属性指定列表项标记的类型

属性：circle、square、upper-roman、lower-alpha、url()

list-style-position 属性指定列表项标记（项目符号）的位置

outside、inside

(7)、css表格

属性	描述
border	简写属性。在一条声明中设置所有边框属性。
border-collapse	规定是否应折叠表格边框。
border-spacing	规定相邻单元格之间的边框的距离。
caption-side	规定表格标题的位置。
empty-cells	规定是否在表格中的空白单元格上显示边框和背景。
table-layout	设置用于表格的布局算法。

text-align:水平对齐

vertical-align:垂直对齐

(8)、清除浮动

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

变化代码：

  
With Clearfix
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

(9)、颜色渐变

线性渐变：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

默认从上到下，也可以从左到右(to right ),对角线(to bottm right)

径向渐变：径向渐变由其中心定义。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认地，shape 为椭圆形，size 为最远角，position 为中心

(10)、文本效果

• text-overflow：如何向用户呈现未显示的溢出内容

  clip:直接被剪裁

  ellipsis:省略号代替

• word-wrap

• word-break：强制对文本进行换行

  breakword:强制换行：keep-all:此行将连字符打断,break-all:全部打断

• writing-mode：书写方式

  horizontal-tb：水平

  vertical-rl：竖直

使用文本方式使表格怎么竖列

思路：表格竖直书写，里面的内容水平书写

    
    

        

            
单元格1
            
单元格2
            
单元格3
        
        

            
单元格4
            
单元格5
            
单元格6
        
    

(11)、2d转换

transform属性：

• translate()

  移动元素

• rotate()

  根据给定的角度顺时针或逆时针旋转元素

• scaleX()

  增加或减少元素的宽度

• scaleY()

  增加或减少元素的高度

• scale()

  增加或减少元素的大小

• skewX()

  使元素沿 X 轴倾斜给定角度

• skewY()

  元素沿 Y 轴倾斜给定角度

• skew()

  使元素沿 X 和 Y 轴倾斜给定角度`

(12)、3d转换

transform:

• rotateX()

  元素绕其 X 轴旋转给定角度

• rotateY()

  使元素绕其 Y 轴旋转给定角度

• rotateZ()

  元素绕其 Z 轴旋转给定角度

  ​

transform-origin:允许你改变被转换元素的位置

transform-style:规定被嵌套元素如何在 3D 空间中显示

perspective:规定 3D 元素的透视效果

perspective-origin:规定 3D 元素的底部位置

backface-visibility:定义元素在不面对屏幕时是否可见

(13)、css过渡

允许您在给定的时间内平滑地改变属性值

• transition：改变的属性值，持续时间，速度
• transition-delay：延迟过度效果
• transition-duration：过渡效果要持续多少秒或毫秒
• transition-timing-function：定义过渡的速度曲线
  • ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
  • linear - 规定从开始到结束具有相同速度的过渡效果
  • ease-in -规定缓慢开始的过渡效果
  • ease-out - 规定缓慢结束的过渡效果
  • ease-in-out - 规定开始和结束较慢的过渡效果

(14)、css动画

• @keyframes：规定css样式

  @keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
  }
  

• animation-name：动画名称

• animation-duration：动画持续时间

• animation-delay：动画的延迟时间

• animation-iteration-count:运行多少次

  infinite：一直运行下去

• animation-direction:向前播放、向后播放还是交替播放动画

  • normal - 动画正常播放（向前）。默认值
  • reverse - 动画以反方向播放（向后）
  • alternate - 动画先向前播放，然后向后
  • alternate-reverse - 动画先向后播放，然后向前

• animation-timing-function:速度曲线，见上

• animation-fill-mode:动画的填充方式

  • none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
  • forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
  • backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
  • both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

• animation：简写：动画名称，持续时间，速度曲线，延迟时间，进行多少次，方向

(15)、object-fit

当我们改变图片的大小破坏了原始宽高比的时候，我们就可以使用这个，会剪切图像的侧面，保留长宽比

object-fit: cover;"，因此如果我们调整浏览器窗口大小，图像的高宽比会被保留：

• fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
• contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
• cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
• none - 不对替换的内容调整大小。
• scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）

(16)、object-position

用于指定 或 在其容器中的位置

object-fit: cover; 来保持宽高比并填充给定的尺寸

(17)、遮罩层

mask-image:指定遮罩层图像

mask-image 属性指定用作元素遮罩层的图像。

mask-repeat 属性指定遮罩图像是否重复或如何重复。no-repeat 值表示遮罩图像不会重复

-webkit-mask-image: linear-gradient(black, transparent);

在使用之前我们可以添加一句-webkit-mask-image，内容和我们想要的内容是相同的

(18)、css多列属性

• column-count：创建多列
• column-gap：间隙
• column-rule-style：列的规则
• column-rule-width：列之间的规则宽度
• column-rule-color：列之间的规则颜色
• column-rule：联合
• column-span：跨越多少列
• column-width：列指定建议的最佳宽度

(19)、变量

全局作用域的变量，请在 :root 选择器中声明它

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

使用：

background-color: var(--white);
  color: var(--blue);

(20)、flex

属性	描述
display	规定用于 HTML 元素的盒类型。
flex-direction	规定弹性容器内的弹性项目的方向。
justify-content	当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。
align-items	当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。
flex-wrap	规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。
align-content	修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。
flex-flow	flex-direction 和 flex-wrap 的简写属性。
order	规定弹性项目相对于同一容器内其余弹性项目的顺序。
align-self	用于弹性项目。覆盖容器的 align-items 属性。
flex	flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。

(21)、grid布局

是一种二维布局系统，用于在网页上创建复杂的布局设计。它允许你将页面划分为多个行和列，并可以自由地放置元素在想要的网格区域中。

• display: grid | inline-grid;
• • 将元素定义为一个网格容器。
  • grid：块级网格。
  • inline-grid：行内网格。
• grid-template-columns 和 grid-template-rows
• • 定义网格的列和行的大小。
  • 可以使用像素、百分比、fr单位（fractional unit，表示可用空间的一部分）等。
• grid-column-gap 和 grid-row-gap （或简写为 grid-gap）
• • 设置网格线之间的间隔。
• grid-template-areas
• • 通过引用具名网格区域来定义网格布局。
  • 使用网格区域名称来指定网格布局。

项目属性：

• grid-column-start、grid-column-end、grid-row-start、grid-row-end （或简写为 grid-column 和 grid-row）
• grid-area
• • 是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写。
  • 也可以用于引用 grid-template-areas 中定义的网格区域名称。
• justify-self 和 align-self
• • 分别用于覆盖网格项的默认水平对齐和垂直对齐。
  • 取值与 justify-items 和 align-items 相同。

示例：

创造一个网格布局，6 个纵列（column）：前后两列两等分（可用 fr 代表一份），中间 4 列均为 25px 宽度；4 个横行（row）：上下均为 50px，中间两等分。

display: grid;
  grid-template-columns: 1fr 25px 25px 25px 25px 1fr;
  grid-template-rows: 50px 1fr 1fr 50px;

.eye.left {
  /* 按照图示选取 grid-area */
  grid-area:2/2/3/3;
}

(22)、媒体查询

@media screen and (max-width : 800px) {}

当响应到宽度小于900px的时候执行

小tips:

.menu-btn:hover~ .collapse{
    display: block;
  }

• ~：这是一个通用兄弟选择器，用于选择.menu-btn之后的所有.collapse兄弟元素。