CSS日常知识备忘录

搬砖的乔布梭
109 阅读6分钟

@全局

四种样式引入

<style>
    p {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<link rel="stylesheet" type="text/css" href="../css/demo1.css" />

<style>
    @import url(../css/demo1.css);
</style>

行内样式略

颜色表示

/*
hue色相 0~360色相环取色
saturation饱和度 百分比
lightness亮度 百分比
*/
color: hsl(0,100%,50%)

/* 渐变色 */
background-color:linear-gradient(red,green,blue)

样式继承

  • 父级元素样式会穿透到子代元素

层叠次序

  • z-index:number; 默认为0,可以写负值

滚动条

/* 纵向内容过高时自动出现滚动条 */
overflow-y: auto;

@选择器

常用伪类

<!-- a:link      超链接访问前样式-->
<!-- a:visited   超链接访问后样式-->
<!-- a:hover     鼠标悬停样式(常用)-->
<!-- a:active    鼠标按下样式-->
<!-- input:focus 元素获取焦点执行样式-->

选择器名字

  • 群组选择器
  • 后代选择器
  • 子代选择器
/* 子代选择器 > */
.nav1>li {
    float: left;
}
  • 兄弟选择器
/* 兄弟选择器 ~ */
/* 相邻兄弟选择器 + */
div:hover~div {
    display: inline-block;
}

选择器权重

  • 类型选择器 0001
  • class选择器 0010
  • id选择器 0100
  • 行内样式权重 1000
  • 权重最大 !important
  • 后代/包含选择器 所有选择器之和
  • 群组选择器权重为自身

鼠标滑过父元素

.nav1 li:hover .a1 {
    background-color: #333;
    color: #fff;
}

.nav1 li:hover ul {
    /* 鼠标划过一级导航列表项显示二级 */
    display: block;
}

.nav1 ul li:hover a {
    background-color: cornflowerblue;
    color: #fff;
}

ul li:hover a:nth-child(odd) {
    display: block;
    background-color: red;
    color: #fff;
}

ul li:hover a:nth-child(even) {
    display: none;
}

href目标伪类

/* p本不可见 */
p {
    display: none;
}

/* p成为target（被a的href引用id）时自身可见 */
p:target {
    display: block;
}

/* p成为target（被a的href引用id）时后代p可见 */
body:target p {
    display: block;
}

<body id="body1">
    <!-- 语法：   目标:target{声明;} -->
    <a href="#p1">新闻1</a>
    <a href="#p2">新闻2</a>
    <a href="#body1">全部新闻</a>
    <p id="p1">...</p>
    <p id="p2">...</p>
</body>

鼠标选中段落

<!-- ::selection 元素内容被选中时添加样式(火狐需要加前缀-moz-) -->

/* 段落被鼠标选中时 */
p::selection {
    color: red;
    background-color: green;
    font-weight: 900;
    font-size: 14px;
}

表单元素

<!-- 1. :enabled 可用的表单元素添加样式 -->
<!-- 2. :disabled 不可用的表单元素添加样式(disabled ) -->
<!-- 3. :checked 被选中的表单元素添加样式 -->

/* 启用和禁用时 */
input:enabled {
    background-color: red;
}
input:disabled {
    background-color: green;
}

/* 被勾选时的临近兄弟span文字变红 */
input:checked+span {
    color: red;
}

按序号选取

/* 首末孩 */
p:first-child {
    background-image: url(../images/gyy.jpg);
}
p:last-child {
    background-image: url(../images/wj.jpeg);
}

/* 第五孩 */
p:nth-child(5) {
    background-color: #555;
    color: #fff;
}

/* 奇偶孩 */
p:nth-child(odd) {
    font-weight: 900;
}
p:nth-child(even) {
    font-weight: 100;
}

/* 特定数字规律 */
p:nth-child(2n) {
    font-weight: 100;
}
p:nth-child(2n-1) {
    font-weight: 900;
}
p:nth-child(-n+3) {
    font-style: italic;
}

/* 数字规律区间 */
p:nth-child(-n+6):nth-child(n+4) {
    background-image: url(../images/sc.png);
}

/* 在兄弟p中行几 */
p:first-of-type {
    background-color: red;
}
p:last-of-type {
    background-color: green;
}
/* p:nth-of-type(odd) */
/* p:nth-of-type(even) */

/* 在兄弟p中行倒2 */
p:nth-last-of-type(2) {
    background-color: yellow;
}

/* 空的p元素 */
p:empty {
    display: none;
}

属性选择器

/* 拥有href属性的a标签 */
a[href] {
    color: red;
}

/* class为a1的a标签 */
a[class="a1"] {
    background-color: green;
}

/* class包含a的a标签 */
a[class*="a"] {
    font-weight: 900;
}

/* href属性以h开头的a标签 */
a[href^="h"] {
    font-style: italic;
}

/* href属性以m结尾的a标签 */
a[href$="m"] {
    font-size: 30px;
}

伪元素

/* 前置伪元素 */
div::before {
    content: "前";
    width: 100px;
    height: 100px;
    background-color: red;
    display: block;
}

/* 后置伪元素 */
div::after {
    content: "后";
    width: 100px;
    height: 100px;
    background-color: green;
    display: block;
}

/* div中的首字母（包含伪元素在内） */
div::first-letter {
    color: #fff;
    font-size: 30px;
}

/* div中的首行（包含伪元素在内） */
div::first-line {
    font-weight: 900;
}

@字体

定义字体

@font-face {
    font-family: "阴体";
    src: url(../images/ct.TTF);
}

字词间距

.p1:hover {
    /* 字间距 */
    letter-spacing: 10px;
}

.p2:hover {
    /* 词间距 */
    word-spacing: 30px;
}

/* 字号/行高 "字体或默认字体" */
font: 20px/350px "";

/* 内容垂直居中 */
vertical-align: middle;

综合设置

/* 字号/行高 "字体或默认" */
font: 12px/30px "";

/* 粗细 字号/行高 "字体或默认" */
font: 100 14px/40px "";

@特效

盒子阴影

/* 盒子阴影 (阴影内置/默认外置) + 水平偏移 + 垂直偏移 + 阴影大小 + 阴影颜色*/
box-shadow: 0 1px 1px #888;
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);

/* 内外阴影同时设置 */
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 20px rgb(255 0 0 / 60%);

文字阴影

/* 此处同时设置了2个阴影 */
/*文本阴影：水平阴影(正值右)  垂直阴影(正值下)  模糊度  阴影颜色,... */
text-shadow: 3px 3px 3px #333, 6px 6px 3px #999;

多个过渡动画

 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

@图片

图片项目符号

.nav2 li:nth-child(1) {
    list-style-image: url(../images/榴莲.png);
}

.nav2 li:nth-child(2) {
    list-style-image: url(../images/水果.png);
}

.nav2 li:nth-child(3) {
    list-style-image: url(../images/菠萝.png);
}

<!-- 2.图片作为列表符号 list-style-image:url()-->
<ul class="nav2">
    <li>水果1</li>
    <li>水果2</li>
    <li>水果3</li>
</ul>

image.png

背景图

/* 背景图大小 */
background-size: 100px 200px;
background-size: 100% 100%;
/* 裁剪以恰好铺满容器 */
background-size: cover;
/* 恰好被容器包含 */
background-size: contain;

background-image: url(../images/gyy.png);
background-color: pink;

background-repeat: no-repeat;
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */

/* 背景图定位 */
background-position: center center;

/* scroll滚动  fixed固定*/
/* background-attachment: fixed; */

/* 图片 + 重复 + 位置 + 固定否 */
background: url(../images/phone.png) no-repeat center 100px fixed;

/* 使用渐变色背景 */
background: linear-gradient(pink, purple);

/* 四角设置背景 知道一下 */
background: 
url(../images/榴莲.png), 
url(../images/水果.png) right top, 
url(../images/菠萝.png) left bottom, 
url(../images/西瓜.png) right bottom 
skyblue;

image.png

雪碧图

div {
    width: 20px;
    height: 12px;
    border: 1px solid #666;
    background: url(../images/wangyi.png) no-repeat;
    background-position: -180px -483px;
}

div:hover {
    background-position-x: -94px;
}

@盒模型

垂直margin塌陷

  • 首个子盒子的margin-top会坑爹使之margin-top塌陷
  • 解法：父盒子加overflow-hidden
  • PS：没有为什么，记下来就完了
.parent {
    width: 300px;
    height: 200px;
    background-color: red;

    /* 给父元素加overflow-hidden */
    overflow: hidden;
}

.son {
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 100px;
}

垂直margin合并

  • 问题：两个相邻元素上下的margin值 不会叠加 按照较大值设置
  • 解决：给其中一个标签外层嵌套元素,并添加overflow:hidden;
<article style="overflow: hidden;">
    <div>box1</div>
</article>

<div>box2</div>

@列表套路

@表单套路

@兼容性

兼容前缀

  • -webkit- 谷歌浏览器前缀
  • -o- 欧朋浏览器前缀
  • -ms- ie浏览器前缀
  • -moz- 火狐浏览器前缀

@面试题

CSS画三角形

div {
    /* 形成一个四周边框皆粗100盒子 */
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid; 
    border-color: transparent;
    /* border-color: red green blue yellow; */
    
    /* 让上边框凸显 下左右以此类推 */
    border-top-color: #333;
}

image.png

水平垂直居中

image.png

  • 子绝父相 + 四边为0 + margin-auto
.box1 {
    position: relative;
}

.box1 img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
  • 子绝父相 + 半偏移后像素校正
.box2 {
    position: relative;
}

.box2 img {
    width: 100px;
    height: 100px;      
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
}
  • 子绝父相 + 半偏移后变形校正
.box3 {
    position: relative;
}

.box3 img {
    position: absolute;
    left: 50%;
    top: 50%;
    /* 2d位移 */
    transform: translate(-50%, -50%);
}
  • 弹性布局 + 主交居中
.box4 {
    /* 变成容器 */
    display: flex;

    /* 主轴方向居中 */
    justify-content: center;

    /* 交叉轴方向居中(单行) */
    align-items: center;
}
avatar
文章
阅读
粉丝
相关推荐
好用的前端API备忘录
10k阅读
 · 
929点赞
你的css选择器可视化备忘录
457阅读
 · 
11点赞
CSS备忘录（五）：animation
378阅读
 · 
6点赞
CSS备忘录（二）布局layout
350阅读
 · 
4点赞
如何用 CSS 中写出超级美丽的阴影效果
1.2m阅读
 · 
1.2k点赞
Go面试复盘备忘录
5.8k阅读
 · 
63点赞
[译] Flutter 布局备忘录
14k阅读
 · 
84点赞
灵活运用CSS开发技巧
179k阅读
 · 
5.1k点赞
CSS备忘录（一）：选择器
288阅读
 · 
5点赞
Dart 学习备忘录
1.8k阅读
 · 
38点赞

友情链接：