小绿桶鸭


Welcome to the world of little green buckets.

CSS易忘知识点整合

2023年6月10日 0条评论 648次阅读 0人点赞 yoursigh

css知识点整合

兄弟选择器

使用“+”选择的为下一个兄弟
使用“~”选择的是所有接下来的兄弟

序选择器

p:nth-child(even){
/*偶数*/
    background-color: blue;
}
p:nth-child(odd){
/*奇数*/
    background-color: aqua;
}
p:nth-child(3n+1){
    font-size:100px;
}

动态伪类选择器

注意四个选择器必须按顺序写

a:link{
    color:yellow;
}
a:visited{
    color:red;
}
a:hover{
    background-color: red;
}
a:active{
    color:aqua;
}

否定伪类选择器

可以从某些元素中剔除一些元素

<style>
    /* 效果：标签1，3，4的背景为红色 */
    p:not(.p2){
        background-color: red;
    }
</style>

<body>
    <p>段落标签</p>
    <p class="p2">段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
</body>

属性选择器

    div[id='one']{
        background-color: red;
    }
    input[type='password']{
        background-color: pink;
    }
    /* 选中以name开头的user属性名 css2 [name|='user'] 只能选中以-隔开的属性名*/
    input[name|='user']{
        background-color: cyan;
    }
    /* css3属性选择器 以user开头  */
    input[name^='user']{
        background-color: cyan;
    }
    /* 以某一个属性结尾 */
    input[name$='name']{
        background-color: pink;
    }
    /* css2 选中name属性包含name属性名的标签 */
    input[name~='username']{
        background-color: red;
    }
    /* css3 只要属性值包含某一部分 */

CSS三大特性

1.继承性 设置父元素的样式子元素可以继承
color/text-/line-/font-
注意:h1标签作为子元素不可以继承font-size
a标签作为子元素字体颜色下划线无法继承
2.层叠性
使用多个选择器给一个标签设置样式 发生层叠
3.优先级 权重
!important 优先级最高
style属性 权重 1000
id选择器 权重100
类选择器 伪类选择器 属性选择器 权重10
标签选择器 伪元素选择器 权重1
通配符选择器/普通选择器 权重0

文本属性

  • font-style设置开启斜体，italic斜体，normal默认值

  • font-weight设置开启粗体，bold加粗

  • font-family设置字体

  • text-decoration设置underline下划线 overline上划线 line-through 删除线

  • text-indent设置首行缩进 2em

  • text-transform可以设置单词全部大写uppercase 全部小写lowercase 首字母大写capitalize 等宽字体full-width

  • text-shadow设置文本阴影 h-shadow v-shadom blur color

列表样式

  • list-style-type设置列表标志项，disc实心圆，circle空心圆，square实心方块，decimal数字，none不使用

  • list-style-position设置列表标志项出现位置 inside在li标签里面 outside默认值

设置隐藏元素的方式

1.使用display none隐藏 block可见
元素会在页面彻底消失，影响重绘重排，不会触发点击事件

display: none;

2.使用visibility visble可见的 hidden 隐藏
消失后空间保留，影响重绘，不影响重排，不会触发点击事件

visibility: hidden;

3.使用opacity 透明度 0完全透明 1完全不透明
可以触发点击事件

opacity: 0;

设置圆角边框

border-radius

盒子模型

  1. 标准盒子
    也叫w3c盒子、内容盒子
    width和height是给内容设置宽高
  2. IE盒子
    也叫边框盒子、怪异盒子
    width和height是给盒子自身设置宽高

设置盒子背景样式

  • background-repeat设置盒子背景图片平铺方式，no-repeat不平铺，repeat-x在x轴平铺，repeat-y在y轴平铺
  • background-position:1px 1px;设置背景图片的水平与垂直位置
  • background-attachment设置背景图片是否随着滚动条滚动，fixed不滚动，scroll滚动

浮动

  • clear:both清除浮动对兄弟元素的影响
  • 字围浮动：浮动元素不会挡住非浮动元素的文字部分，所以会形成文字包围浮动元素的效果

块级格式化上下文

BFC(Block Formatting Context),直译为块级格式化上下文
概念:BFC把他看成是元素的一种属性,类似于id title style class...,一旦元素拥有了这种属性,就可以成为一块独立的渲染区域,容器内的元素不会影响容器外的元素.
BFC触发条件:
1. html元素
2. float不为none
3. position为absolute fixed
4. display:inline-block
5. overflow不为visible

BFC作用:
1. 避免外边距重叠
2. 清除浮动
3. 阻止浮动元素覆盖非浮动元素
4. 两列布局 左侧顶宽 右侧自适应
5. 三列布局 左右定宽 中间自适应

定位

position
* 相对定位relative，不脱离文档流，相对浏览器默认位置定位
* 绝对定位absolute，脱离文档流，相对于浏览器窗口定位，如果父元素有定位则相对于父元素定位
* 固定定位fixed，脱离文档流，相对于浏览器视口进行定位
* 粘滞定位sticky，不脱离文档流 没达到阈值前是相对定位，达到阈值后是固定定位

flex布局

display:flex;

flex布局的容器属性（父元素）

  • flex-direction属性：row（默认）、row-reserve、column、column-reserve，用于控制排列方式，row是沿主轴，row-reserve为主轴反方向排列（右到左）。
  • flex-wrap属性：nowrap（默认）、wrap、wrap-reserve，用于设置排不下的情况，默认为不换行，盒子会挤压，wrap为换行，wrap-reserve为反向换行
  • flex-flow属性：flex-direction和flex-wrap的结合，默认为row nowrap
  • justify-content属性：flex-start（默认）、flex-end、center、space-between、space-around、space-evenly，用于控制主轴上的对齐方式，默认左对齐，flex-end为右对齐，space-between为左右两侧紧贴容器，中间项目间距相等，space-around项目之间间距为左右两侧项目到容器间距的2倍（不常用），space-evenly项目之间的间距相等
  • align-items属性：stretch（默认）、flex-start、flex-end、center、baseline，用于控制项目在交叉轴的排列方式，baseline比较特殊，它让项目以第一行文字的基线为参照进行排列，flex-start为靠顶部排列
  • align-content属性：与justify-content类似

flex布局的项目属性（子元素）

  • order属性：默认0，决定排列顺序，值越小，排列越靠前
  • flex-grow属性：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。
  • flex-shrink属性：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。
  • flex-basis属性：默认auto，用于设置项目宽度，会覆盖width
  • flex属性：默认0 1 auto，是flex-grow、flex-shrink、flex-basis的简写。
  • align-self属性：auto(默认)、flex-start、flex-end、center、baseline、stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。

过渡

transition
* transition-property：过渡属性的名称
* transition-duration：过渡属性的时长
* transition-delay：过渡等待时长
* transition-timing-function：过渡速度，匀速：linear慢快慢：ease慢速开始：ease-in慢速结束：ease-out慢速开始，慢速结束ease-in-out
* 简写：transition: width 2s linear 2s,background-color 2s ease-out 0s;

动画

animation
定义动画帧：

@keyframes move {
    /* 开始状态 结束状态 过程状态 */
    0%{
        margin-left: 0;
    }
    25%{
        margin-left: 150px;
    }
    50%{
        margin-left: 250px;
    }
    100%{
        margin-left: 500px;
    }
}
  • animation-name：设置动画名称
  • animation-duration：设置动画持续时长
  • animation-timing-function：设置动画速率linear匀速，与过渡相同
  • animation-delay：设置动画延迟
  • animation-iteration-count：设置动画执行次数，infinite无数次
  • animation-direction：设置动画是否反向执行，alternate反向执行
  • animation-fill-mode：设置动画结束停留在哪一帧，forwards 最后一帧 backwards第一帧
  • 简写：animation: move 2s ease-in-out 0s infinite alternate;
  • animation-play-state：动画暂停执行，paused表示暂停 running表示播放

媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式

使用link标签进行媒体查询

<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />

使用样式表中的CSS媒体查询

<style>
@media (max-width: 600px) {
  .class {
    display: none;
  }
}
</style>
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
点赞
No Tag
最后编辑：2023年6月10日

发表回复

电子邮件地址不会被公开。必填项已用 * 标注