选择器

...详细

关系选择器

  • main h1 后代选择器
  • main>h1 子级选择器
  • main~h1 兄弟选择器
  • main+h1 相邻选择器
  • main[title="title"] [id] 属性选择器,可选约束(^ 开始,$结束,*任何位置,~单词,|以分号链接的单词?), 例子:main[title|="test"] 可匹配 <main title="test-a"></main>

伪类选择器

  • a:link 默认情况下
  • a:visited 点击后
  • a:hover 鼠标放上去
  • a:active 点击发生时
  • :checked 表示任何处于选中状态的 checkbox () ...,可以直接用来模拟点击事件( label 包裹按钮,点击按钮时就会触发 input 的伪类 checked ,在通过选择器控制其他元素)
  • input:focus 获取焦点时
  • div:target 跳转到此锚点时
  • :root 最顶层的基础伪类
  • li:empty 标签里面没有内容时

按位置选择

  • main>:first-child 选择子元素里面第一个。例:main h1:first-child 此处为 main 后代的第一个 元素,并且为 h1
  • main h1:first-of-type 选择 main 下里面的h1 里面的第一个 h1.
  • main>:last-chile 最后一个
  • main>:last-of-type 同类型最后一个
  • main :only-child main 选择唯一后代元素
  • main :nth-child(2) 选择位置为 2 后代元素,(传入参数 n, (0,1...)包含所有)(main:nth-child(2) 选择全局中第二个 main 标签)
  • main h1:nth-of-type(2) 只找 h1 的第二个
  • main h1:nth-last-child(2) 倒数第二个
  • main h1:nth-last-of-type(2) 倒数第二个 h1
  • ul li:nth-child(-n+3):not(:nth-child(1)) 选择 ul 里面的前三个 li, 并排除掉第二个 li
/* nth-child() 实现隔行变色 */
ul li:nth-child(2n){
    /* even == 2n 
        -n+2 : 选择前两个
        n+2: 从第二个开始
    */
    color: red;
}
ul li:nth-child(2n-1){
    /* odd === 2n-1 */
    color: royalblue;
}

伪元素

  • p::first-letter 第一个字符
  • p::first-line 第一行
  • p::after 在 p 标签内容后(可以用: content: "test", 追加内容)
  • p::before 在内容前

给 div 追加一个下边框

div::after {
    content: "";
    background: linear-gradient(to right, white, red, green, white);
    display: block;
    height: 1px;
}

层叠样式表权重位

样式生效优先级。 级别相同 优先使用最近样式

规则 优先级
ID 0100
class, 类属性值 0010
标签,伪元素 0001
* 0000
行内样式 1000

Tips:

  • !important 样式里使用,将权限提升至最高。color: red !important;
  • 继承:子级元素会继承一些自身没有的父级样式。继承没有权重!
  • (0000) > 继承(Null): 标签内部标签会先使用 定义的样式,而非继承父级

字体风格

  • line-height: 1.5em; 行高一般采用比例形式(非固定的 px...),以适应页面缩放
  • font-variant: small-caps; 定义的字母大写,不会改变文字的大小。text-transform: uppercase; 定义的字母大写,会默认的比一般文字大(文本默认如此
  • text-shadow: #fff 3px 3px 3px; 定义文字阴影,最后一个参数决定阴影的模糊
  • img { vertical-align: top;} 对内容的垂直进行控制。( text-align)
  • writing-mode 文字排版

单行文本截断

div[title] {
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
    /* 文本溢出后,截断处显示的内容 */
    text-overflow: ellipsis;
}

盒子

  • box-sizing: border-box; 使盒子的大小始终在定义的尺寸内,防止内边距, 边框..撑开盒子
  • outline: solid 1px #ddd; 轮廓线并不会产生占位(盒子与盒子默认边框靠拢)
  • visibility: hidden; 设置元素隐藏,会有占位。(类似于透明度方式:opacity: 0;)
  • width: fit-content; 使盒子宽度等于内容宽度.
  • width: min-content; 使盒子内容根据子元素最小宽度来定义
  • box-shadow: 0 0 30px 8px black; 盒子阴影 0 :偏移量, 30px :阴影模糊度, 8px: 阴影大小(可负)

背景

  • background-clip: border-box; 使背景覆盖到 padding 内区域,默认覆盖至边框
  • background-attachment: fixed; 让背景不再随容器滚动
  • background-size: cover; 图片在容器内铺满,不拉伸图片多余部分不显示(丢弃). 相关: object-fit: cover; 可以让内容(图片)本身 铺满(填充父级.
  • background-image: url(), url(); 通过这种方式定义多个背景,对于单个背景的样式也是由逗号分开 定义
  • background-repeat: space; 背景小于容器宽度时 按照容器大小 多次放置背景
  • background-position: top left; 定义背景的位置
  • background: red url() space top left;

背景渐变

  • background: linear-gradient(100deg, #54425c 50%, #544290 50%, #5442aa); 角度一百线性渐变,可换为 to top buttom 指定位置。50% 指定标志位置(位置以前不发生渐变
  • background: radial-gradient(at 50 left, #54425c, #544290, #5442aa); 径向渐变,( at x 轴 y 轴位置)
  • background: linear-gradient(100deg, #54425c 50%, 30%, #544290 100%); 设置了渐变中间点(渐变阈值) 30%。

滚动进度条效果

div[jd] {
    height: 10px;
    /* 通过将 黄色的渐变中间点两边归为0,使得 蓝色红色没有了渐变。 */
    /* 将单组渐变铺满整个容器 */
    background: repeating-linear-gradient(45deg, blue, 25px, yellow 25px, 25px, red 50px);
}

边框

  • border-collapse: collapse; 重复边框合并, 对表格生效
  • ::after, 通过伪元素给元素追加边框

浮动

浮动的元素,是在父级容器内边距里面的。同时浮动后的元素会自动变为块级元素.

  • shape-outside: border-box; 定义在浮动元素内,控制父级内容环绕浮动元素的 距离(级别:外边距,内边距,边框...)
  • clip-path: circle(30% at 0 100%); 将元素修剪为圆形。30%: 指定大小, at : x 轴 y 轴
  • clip-path: ellipse(50% 70% at 20% ); 修剪为 椭圆
  • clip-path: polygon(10% 0, 100% 100%, 0 100%, 50% 70%); 绘制多边形
  • shape-outside: circle(30% at 0 100%); 控制内容按照定义的形状进行环绕。(与上面定义的形状无关,单独为元素外的内容定义)
  • shape-outside: url(.png); 可以直接传入图片,按照图片形状环绕 url(png)

清除浮动

  • clear: both;清除两侧浮动。(浮动后的元素是脱离文档流的。所以其父级容器并不会被浮动后的元素撑开)

可以定义在非浮动元素上,放在父级浮动元素底下。此元素会感知到其他浮动元素的位置(会被浮动元素位置影响自身位置),而父元素会感知到它的位置

  • ::after 也可以来清除元素. 原理类似于上。通过在父级元素末尾增加元素来清除浮动
  • overflow: hidden; 定义在父级元素。通过触发 BFC 来清除浮动

定位

容器本身的绝对定位默认参照的是 最近非 static 定位的祖先元素 。 子绝父相

  • top, left... 绝对定位元素可以通过 定于四边距离调整元素大小(前提是 自身未定义大小)
  • z-index: 1; 通多让多个内容重叠在一起,然后使用此定义层级。在使用伪类 :hover 更改层级 制造出鼠标放上去是显示不同内容的效果.
  • position: sticky; 被粘性定位的元素在 也滚动中(移动)遇到下一个粘性定位的元素前。会自动粘在定义的固定的位置。 下一个同样位置的粘性对位元素会取代当前位置(当前元素恢复至文档流,如果多个粘性定位元素是同级的 则会叠加在一起

弹性布局

弹性盒子能够更快更好的进行网页布局,建议优先使用此种方式进行布局

  • flex-direction: column; 将内容排列方式 改为纵向
  • flex-wrap: wrap; flex 内容超出容器换行。 排列时子元素大小超出容器时默认是 挤压内容
  • flex-flow: row wrap; 两个愿望一次满足。

主轴: flex 排列的主轴(横纵)由内容的排列方式决定

  • justify-content: space-between; 让内容相对于主轴:两侧靠边 中间平均分布
  • justify-content: space-around; 内容相对主轴:完全平均分布

交叉轴也是由内容的排列方式决定。与主轴 90 度相切。

  • align-items: center; 让内容相对于交叉轴居中(如果主轴为 row, 则此语句效果为内容垂直居中)
  • align-items: stretch; 拉伸内容交叉轴方向尺寸,使其等于父级交叉轴尺寸。(注意:优先级低于内容定义高宽)

内容(弹性元素

  • align-self: flex-start; 控制单个元素相较于 父级 flex 容器的交叉轴位置
  • flex-grow: 1; 控制元素相应方向大小放大至 父级主轴的空间比例。(div.a{flex-grow:1;}, div.b{...5;} == 1 : 5)
  • flex-shrink: 1; 控制元素超出容器相应方向大小缩小至 父级主轴的空间比例。算法相对 grow 有所不同
  • flex-basis: 100px; 控制元素所占主轴的基准尺寸,类似于元素宽度定义。( max-width> flex-basis > width )
  • flex: 1 2 100px; 三个愿望一次满足。
  • order: -1; 控制元素在主轴的位置
  • margin:auto 会自动占满容器剩余空间。可以指定方向实现(自身及其他)元素的快速居中,局左/右

栅格系统

  • display: grid; 定义的栅格默认是块级的. 栅格里面的格子里的元素尺寸是默认会占满整个格子的。
  • grid-template-rows: 20% 80%; 绘制栅格的行, 第一行高度为容器总高的 20%。
  • grid-template-columns: repeat(2, 100px 30px); 绘制 4 列: repeat 重复生成:==> grid-template-columns: 100px 30px 100px 30px;
  • grid-template: 1fr/repeat(5, 1fr); 组合定义行列, 此处为一行五列

  • gap: 20px 10px; 定义栅格的间距,行 列

  • grid-auto-flow: row dense; 定义栅格的排列方向, dense 定义:格子过定位后每行留下的空格子,由剩余有内容的格子自动填充空格子。( row-3: [0] [1] [1] /n [1] )
  • justify-content:; align-content:; 也可以用来定义栅格内所有格子(栅格大小)的对齐方式。
  • justify-item:... 定义栅格内所有格子的内容相对于格子的位置。
  • justify-self:...; 在单个格子容器处定义单个格子内容相对于格子的位置
  • place-content: align-content:; justify-content:; / place-items: aligin-item:; justify...:; / place-self: 垂直 水平; 组合定义对齐方式

栅格绘制:

div {
    display: grid;
    grid-template-rows: 30% 20%;
    grid-template-columns: repeat(5, 1fr);  /* fr 等比例 份 */
    /* auto-fill 按照定义的栅格尺寸自动划分,后面的栅格尺寸必须为实际尺寸 fr:pass */
    /* grid-template-columns: repeat(auto-fill, 60px); */
    /* repeat(2, minmax(30px 70px)) 栅格尺寸按范围定义。决定缩放时的格子尺寸 */
}

定义栅格内格子位置

通过边线定义元素在栅格内的位置:

div {
    background-color: aquamarine;
    /* 定义位置从1开始, 没有定义宽度的元素会占满格子 */
    grid-row-start: 4;
    grid-row-end: 6;
    grid-column-start: 3;
    grid-column-end: 5; 
    /* grid-column-end: span 5; 相对对与一个格子的结尾偏移5个格子 */
    /* 上面语句等价于 下
    grid-row: 4/6;
    grid-column: 3/5;  /* 同样可以使用 3/span 2 定义偏移 */
    */
}

栅格位置演示

通过区域定义位置:

// less 
main.body {
    height: 50vh;
    width: 50vh;
    border: solid 1px #888;

    display: grid;
    grid-template-rows: 42px 1fr;
    grid-template-columns: 60px 1fr;
    // 定义了两行两列,定义一行名为 nav, 二开始区域为 bar. 同时系统会自动将
    // 边线命名为 nav-start nav-end bar-start ... 方便区域定位
    grid-template-areas: "nav nav""bar main";

    nav {
        grid-area: nav;
    }

    .bar {
        grid-area: bar;
    }

    main { 
        grid-area: main;
    }
}
// 皮一下上面语句效果大概是这样
/*
----------------------------------
nav
----------------------------------
.bar    |  main
        |
        |
        |
        |
        |
*/

// css
div {
    grid-area: 1/1/2/4;  /* 行开始/列开始/行结束/列的结束位置 */
}

一个快捷的 css3 快速查询学习的网站 后盾人


相关推荐:

来自系列:CSS

分类 前端下文章:

微信小程序开发 days1 关注点:文件结构,json配置文件, 模板语法

小程序开发学习笔记 days2。 关注点:view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox

小程序学习笔记 days3。 关注点:生命周期,自定义组件

小程序学习笔记 days4。 关注点:scroll-view, Promise

更多...

aid 加一试试->

评论([[comments.sum]])

发表

加载更多([[item.son.length - 2]])...

发表

2020-11 By Hchuan.

flask & bootstrap-flask

© 2021 HChuan. All rights reserved.

随机占位图来自:fghrsh

互联网ICP备案号:蜀ICP备2020031846号