CSS深度学习

最新推荐文章于 2024-07-12 14:38:32 发布

源曦语

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量96

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43547784/article/details/129701484

版权

CSS深度学习

弹性布局

自适配flex

当两个 div 宽度固定且大小不一样的,在弹性布局下，个体有flex: 1 1 auto;属性,此时两个div的宽度是自己本身的宽度加上剩余空间的宽度（按1比1的分配）

<style>
    .anger1{
        border: 1px solid red;
        width: 500px;
        height: 80px;
        display: flex;
    }
    // 两个子元素都设置了 flex: 1 1 auto;属性，他们的宽度会在原有的宽度下，平分剩余空间
    .ange2{
        width: 120px;
        height: 60px;
        background-color: lime;
        flex: 1 1 auto;
    }
    .ange3{
        width: 220px;
        height: 60px;
        background-color: darkcyan;
        flex: 1 1 auto;
    }
</style>
<body>
    <div class="anger1">
        <div class="ange2"></div><!-- 宽度200 -->
        <div class="ange3"></div><!-- 宽度300 -->
    </div>
</body>

水平垂直居中

  // 父元素
  display: flex;
  // 子元素 - 需要有内容或宽高
  margin: auto;

选择器

属性选择器:
- [attr] 属性名
- [attr=value] 属性名=属性值
- [attr~=blue] 包含这个blue整个单词就可以
- [attr^=c] 以这个字母c开头的
- [attr$=b] 以这个字母b结尾的
- [attr*=a] 只要包含a这个字母就行
- [attr|=z] 只要以字母z-开头的或者就是字母z的

伪类选择器:

结构性

  /*第n个子节点*/
  div:nth-child(n)
  /*奇数行*/
  div:nth-child(odd)
  /*偶数行*/
  div:nth-child(even)
  /*2的倍数 - 偶数*/ 
  div:nth-child(2n)
  /*倒数第n个*/
  div:nth-last-child(n)
  /*第一个子节点、和 E:nth-child(1)等价*/
  div:first-child
  /*倒数第一个、和 E:nth-last-child(1)等价*/
  div:last-child

动态

/*未访*/
a:link
/*已访*/
a:visited
/*滑过*/
a:hover
/*选中*/
a:active

伪元素

/*第一行*/
E:first-line
/*第一个字*/
E:first-letter
/*选中文本的时候*/
E::selection
/*E标签前面添加东西,需要配合content来用*/
E::before 
/*E标签后面添加东西*/
E::after

其他:

后代选择器：空格
子代选择器：>
相邻选择器：+
后续选择器：~

/*空元素*/
:empty
/*锚点元素的样式*/
:target
/*只要锚点有#div1那上面的target样式就会生效*/
div:target{width:100px;}
<div id=”div1″></div>
/*表单元素设置disabled*/
E:disabled
/*可点击的表单元素*/
E:enabled
/*表示已经选中的checkbox或者radio*/
E:checked

E:not(s) 不包括s
h1:not(.red) 排除有class为red的h1元素
E~F E后面的F兄弟节点

选择器 - 扩展

伪元素选择器以child和type结尾的选择器区别
- 以child结尾的选择原理是先定位，再匹配
  - 标签选择：先定位到兄弟元素中的指定位置，若与指定标签匹配则有效果，否则无效果
  - 类名选择：先定位到兄弟元素中的指定位置，若与指定类名匹配则有效果，否则无效果
- 以type结尾的选择原理是先分组，再定位，后匹配
  - 标签选择：定位到此元素的第一个/最后一个，
  - 类名选择：若兄弟元素包含多种，则先按标签分组，再定位到元素的第一个/最后一个，进行匹配
- only-of-type
  - 标签选择：在兄弟元素中，指定元素的标签只有一个时，被选中
  - 类名选择：在兄弟元素中，拥有此类名的标签只有一个时，被选中

CSS3新特性

边框:
- border-radius: 圆角边框
- border-image: 边框图片
- box-shadow: 边框阴影
  - box-shadow: 水平阴影, 垂直阴影, 模糊距离, 阴影尺寸, 阴影颜色, 内/外阴影;
背景:
- background-size: 定背景图片尺寸
- background-origin: 背景图片定位区域
- background-clip: 背景绘制区域
文字效果:
- hanging-punctuation: 标点字符是否位于线框之外
- punctuation-trim: 是否对标点字符进行修剪
- text-align- last:设置如何对齐最后一行或紧挨着强制换行符之前的行
- text-indent: 文本缩进
- text-emphasis: 向元素的文本应用重点标记以及重点标记的前景色
- text-justify: 规定当 text-align 设置为 “justify” 时所使用的对齐方法
- text-outline: 规定文本的轮廓
- text-overflow: 当文本溢出包含元素时发生的事情
- text-shadow: 向文本添加阴影
- text-wrap: 文本的换行规则
- word-break: 非中日韩文本的换行规则
- word-wrap: 允许对长的不可分割的单词进行分割并换行到下一行
转换:
- transform: 向元素应用 2D 或 3D 转换
- transform-origin: 允许你改变被转换元素的位置
- transform-style: 规定被嵌套元素如何在 3D 空间中显示
- perspective: 规定 3D 元素的透视效果
- perspective-origin: 规定 3D 元素的底部位置
- backface-visibility: 定义元素在不面对屏幕时是否可见
过渡:
- transition-property: 规定应用过渡的 CSS 属性的名称。
- transition-duration: 定义过渡效果花费的时间——默认是 0
- transition-timing-function: 规定过渡效果的时间曲线——默认是 “ease”
- transition-delay: 规定过渡效果何时开始——默认是 0
- transition：all 3s linear;
  - 参与属性
  - 持续时间
  - 动画类型
    - 先快后慢：ease-in-out；
    - 减速：ease-out;
    - 加速：ease-in；
    - 由快到慢：ease；
    - 匀变：linear；
    - subic-bezier(0-1之间，0-1之间）
    - steps（数字（停顿时间），end）
    - 延迟过渡时间
    - 小于零：截断；
    - 大于零：延迟；
  - 多属性逗号隔开，同属性空格；
  - 过渡动画类型：transition-timing-function
动画:
- @keyframes: 规定动画
- animation-name: 规定 @keyframes 动画的名称
- animation-duration: 规定动画完成一个周期所花费的秒或毫秒——默认是 0
- animation-timing-function: 规定动画的速度曲线——默认是 “ease”
- animation-delay: 规定动画何时开始——默认是 0
- animation-iteration-count: 规定动画被播放的次数——默认是 1
- animation-direction: 规定动画是否在下一周期逆向地播放——默认是 “normal”
- animation-play-state: 规定动画是否正在运行或暂停——默认是 “running”
- animation-fill-mode: 规定对象动画时间之外的状态
- animation：ant 3s infinite 2s linear;
  - 动画名称（随意，后边用）
  - 持续时间
  - 过渡类型
    - 先快后慢：ease-in-out；
    - 减速：ease-out;
    - 加速：ease-in；
    - 由快到慢：ease；
    - 匀变：linear；
    - subic-bezier(0-1之间，0-1之间）
    - steps（数字（停顿时间），end）
  - 延迟时间
    - 小于零：截断；
    - 大于零：延迟；
  - 循环次数
    - 数值：次数；
    - 无限循环：infinite；
  - 是否返向
    - 默认：不往返
    - 返向：alternate
  - 动画外状态
    - 停在最后：forwards；
    - 停在开始：backwards；
  - 动画状态
    - 播放：ruuning
    - 暂停：paused
```
@keyframes ant {
    20%{
        变化元素的某一状态
    }
  }
```
多列:
- column-count: 指定元素应该被分割的列数。
- column-fill: 指定如何填充列
- column-gap: 指定列与列之间的间隙
- column-span: 指定元素要跨越多少列
- column-width: 指定列的宽度
- column-rule-color: 指定两列间边框的颜色
- column-rule-style: 指定两列间边框的样式
- column-rule-width: 指定两列间边框的厚度
用户界面:
- resize: 属性规定是否可由用户调整元素尺寸
- box-sizing: 属性允许您以确切的方式定义适应某个区域的具体内容
- outline-offset: 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
- appearance: 允许您使一个元素的外观像一个标准的用户界面元素
- icon: 为创作者提供了将元素设置为图标等价物的能力
- nav-down: 指定在何处使用箭头向下导航键时进行导航。
- nav-index: 指定一个元素的Tab的顺序
- nav-left: 指定在何处使用左侧的箭头导航键进行导航
- nav-right: 指定在何处使用右侧的箭头导航键进行导航
- nav-up: 指定在何处使用箭头向上导航键时进行导航

扩展

css的计算属性 calc
```
div{
    width: calc(25% - 20px)
}
```
高斯模糊
```
div {
  backdrop-filter: blur(10px);
}
```

常用清除样式:

ul{
    /*清除ul的默认值（清除前边的点）*/
    list-style: none;
    /* 去除列表前的点: */
    list-style-type: none;
    /*解决ul的塌陷问题*/
    overflow:hidden;
  }
img{
  /*清除三像素bug*/
  vertical-align: top;
}
a{
  /*清除a标签的下标签*/
  text-decoration: none;
}

样式穿透
```
pointer-events :none;
```

隐藏滚动条

/*谷歌 - 用于隐藏滚动条*/ 
.element::-webkit-scrollbar { width: 0 !important }

rem、 em使用
- 两者都是相对于font-size:来取值
- rem:
  - 通过设置根目录的font-size:来设置 1rem对应的 px 值
- em:
  - 就近取值，优先按自己的font-size:值来得到对应的 px 值
  - 若无显示设置，则默认向上取，直到根目录，若都没有，按隐式font-size:值来定
  - 若设置自己的font-size: 值，则对应的 1em 值为1个font-size:的大小

常用文本属性

/* 溢出省略 */ 
text-overflow：ellipsis;
/* 行内垂直方向对齐 */ 
vertical-align: text-top; /* 用于图片与文字的居中对齐 */ 
/* 字间距 */ 
letter-spacing：20px;
/* 文字不可选 */ 
user-select: none;
/* 禁止图片拖动 */
-webkit-user-drag: none;

input中placeholder进行修改

  @nine-grey = red
  //改变placeholder提示字体的颜色
  input::-webkit-input-placeholder{
  font-size:0.875rem;
  color: @nine-grey ;
  }
  //做兼容
  input::-moz-placeholder{  /* Mozilla Firefox 19+ */
  font-size:0.875rem;
  color:@nine-grey ;
  }
  input:-moz-placeholder{  /* Mozilla Firefox 4 to 18 */
  font-size:0.875rem;
  color:@nine-grey ;
  }
  input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
  font-size:0.875rem;
  color:@nine-grey ;
  }

源曦语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS深度学习

自适配flex当两个div宽度固定且大小不一样的,在弹性布局下，个体有属性,此时两个div的宽度是自己本身的宽度加上剩余空间的宽度（按1比1的分配）.anger1border;width;height;display;flex;height;;flex;height;;flex;</</</</</水平垂直居中。
复制链接

扫一扫