CSS基础到进阶要点总结

阿波次嘚

已于 2022-07-13 20:28:32 修改

阅读量407

点赞数

分类专栏：前端笔记文章标签： css css3 html

于 2022-05-22 12:28:00 首次发布

本文链接：https://blog.csdn.net/weixin_45062076/article/details/124906560

版权

前端笔记专栏收录该内容

35 篇文章 2 订阅

订阅专栏

`CSS3新特性`

1.完善了选择器：属性、关系、伪类、伪元素
2.新增阴影、圆角、Web字体、渐变
3.一次性使用多张背景图、控制背景尺寸、裁剪背景图像
4.添加过渡和动画摆脱了对flash的依赖
5.添加多列布局和伸缩盒
6.元素可以进行2D、3D变换：旋转、移动、缩放、扭曲

`CSS3盒模型`

更改和模型的css属性：box-sizing
标准盒模型 content-box
IE盒模型 border-box
在这里插入图片描述

`选择器的种类`

基本选择器以及权重~权重越高越有效
通配符选择器：0
元素选择器：1
类选择器：10
属性选择器：10
ID选择器:100
!important：1000
注：逗号分割的选择器权重不会累加
关系选择器
后代选择器：选择所有子代 div span
子选择器：只选择第一代 div>span
相邻选择器：只选择相邻的一个元素 div+span
兄弟选择器：选择同一父元素下的所有自己后面的兄弟 div~span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bfc+div {
            color: red;
        }
        .acc~div {
            color: green;
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="bfc">bfc</div>
        <div class="acc">相邻兄弟</div>
        <div class="bcc">同胞</div>
    </div>
</body>
</html>

在这里插入图片描述
伪类选择器
https://blog.csdn.net/weixin_45062076/article/details/113818495
伪元素选择器
让css给文档添加内容和过滤内容
（1）过滤内容
　　::first-letter（首字符）块级元素适用
　　::first-line（首行）
　　::placeholder（占位符）
　　::selection（选中内容）
（2）添加内容
　　 ::before（元素之前插入内容）
　　 ::after（元素之后插入内容）

`Web颜色`

颜色种类

颜色名称
十六进制 #003366、#036
函数式：
（1）RGB/RGBA：rgb(255,0,0)
（2）HSL/HSLA：hsl(0,100%, 50%)

Web安全色
各个浏览器颜色的显示效果一致
以 00 、33、66、99、CC、FF 进行组合共有6*6*6=216种保护色搭配方式

`浮动`

概念：让内容环绕在浮动元素周围和一些定位布局操作，它会让元素脱离正常文档流，脱离文档流后元素会变成行内块级元素（宽度自适应）。
规律：浮动元素不会超过其直系父元素，多个浮动元素在一个包含块内超出包含块自动换行

`创建BFC：块级格式化上下文`

概念：css的一种渲染模式，是形成一个独立的渲染区域（渲染成普通流），内部不会影响外界。
创建条件
float不为none
定位：absolute fixed
display:inline-block
overflow 的值不是visible的其他值
bfc特性
内部的box垂直方向一个一个放置：正常文档流
垂直方向距离由margin决定：
bfc区域不会与float重叠：BFC容器内部的浮动元素也会算在容器内部
bfc容器中子元素不会影响外界元素：内部的元素高度等不会超出容器
应用场景
清除浮动、解决外边距塌陷、解决元素被浮动元素覆盖

`外边距塌陷`

概念：块的上外边距和下外边距会合并为单个边距，大小为单个边距的最大值
出现的情况：
1.父子div同时设置margin-top 子div之前无内容
在这里插入图片描述

2.父子div同时设置margin-bottom 子div之后无内容
在这里插入图片描述

3.第一个兄弟div设置margin-bottom 第二个兄弟div设置margin-top
在这里插入图片描述

4.div自己同时设置margin-bottom、margin-top 并且div内无内容

解决高度塌陷：

将两个块级元素分别放入到两个BFC容器中
使用CSS3伪元素::before给父元素添加内容,源于增加空<table></table>

	.box::before{
	  content:"";
	  display:table;
	}

`清除浮动`

概念：保留浮动效果，去除浮动带来的负面影响（高度塌陷，遮盖其他元素）。
~~float在什么情况下会高度塌陷？
~~只有所有子元素全部脱离文档流并且父元素未设置高度才会彻底高度坍塌（高度近乎为0）
3. 浮动元素的父元素创建BFC
4. css伪元素

/* 清除浮动 */
.clearFloat::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

`CSS常用的样式和概念`

阴影box-shadow
box-shadow: x轴偏移(水平向右) y轴偏移(垂直向下) 羽化(模糊) 扩展颜色内阴影
第一个值和第二个值代表： x轴上的偏移量和y轴上的偏移量（正负值）。
第三个值代表：模糊半径的大小（羽化）不允许负值。
第四个值代表：扩展半径的大小，向四周扩散相等的大小,正值放大，负值缩小。
第五个值代表：颜色值。
第六个值（可选）代表：阴影向内inset：默认阴影向外扩散。
/*阴影列表：用逗号分割*/

div {
    width: 600px;
    height: 300px;
    border: 1px solid #666;
    box-shadow: 4px 5px 6px 0 #666 inset,
        -4px -5px 6px 0 #666 inset,
        -10px -4px 25px 15px #1e9fff,
        -10px -4px 5px 15px #1e9fff;
}

`渐变background-image`

线性渐变
/*90deg表示从左向右渐变 0deg或不写则表示从上到下渐变*/
(1) background-image: linear-gradient(90deg,#23cff8,#5869ba);
/*调整颜色渐变宽度*/
(2) background-image: linear-gradient(90deg, green 0 200px, yellow 200px 400px, red 400px 600px);
径向渐变
background-image: radial-gradient(red,yellow);
background-image: radial-gradient(rgb(48, 63, 199),rgb(19, 194, 179),rgb(0, 255, 0));
background-image: radial-gradient(red 0% 30%,yellow 30% 60%,green 60% 100%);
/*添加半径*/
background-image: radial-gradient(100px,red,yellow);
/*100px 横向半径 30px纵向半径*/
background-image: radial-gradient(100px 30px,red,yellow,green);
background-image: radial-gradient(10% 10%,red,yellow,green);

背景图片~~背景图要求元素具有宽度和高度

基础写法background-image: url(路径);
平铺 background-repeat:no-repeat;
定位
background-position:center
background-position:left top
background-position:45% 55%/*左上0% 0% 右下100% 100%*/
尺寸background-size: cover; background-size: 100% 50%;

`变换（transform ）：允许元素旋转，位移，扭曲，缩放。通过函数实现（样式属性值是函数）`

位移：translate() translateX() translateY() (向右或向左、向下或向上 )，单位px或%
旋转：rotate(45deg) rotateX(45deg) rotateY(45deg)（按照元素正中心的基础点进行旋转或者按照x轴y轴旋转，参数可正可负）
缩放：scale() scaleY() scaleX()（1默认值不缩放大于1放大，小于1大于0就是缩小）
扭曲：skew(60deg) skewX(60deg) skewY(-60deg)(是指二维平面上的倾斜角度)
透视：perspective(注：该属性要给父元素设置)

`过渡（transition）：不同样式的切换`

transition:过渡名称(过渡的样式属性名) 过渡时间延迟时间过渡方式;
transition: box-shadow 1s 1s linear;
过渡方式：
ease 默认慢-快-慢
ease-in 慢-快
ease-out 快-慢
ease-in-out 慢-匀速-慢
linear 匀速
过渡简写(所有样式均过渡):transition:1s;

`动画（animation）实现样式的转换`

定义动画属性
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: 名称执行时间延迟时间运动方式(linear匀速) 执行次数(参考上述过渡方式) 是否反向(reverse反向) 停留位置(forwards停在结束位置) 是否正在播放(paused暂停)
animation: identifier 2s 1s linear 3 normal forwards running;
定义关键帧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            animation: identifier 2s 1s linear 3 normal forwards running;
        }
        @keyframes identifier {
            0% {transform: skew(0deg);}
            50% {transform: skew(60deg);}
            100% {transform: skew(0deg);}
        }
    </style>
</head>
<body>
    <div id="box1">这是box1的内容</div>
</body>
</html>

`flex弹性布局`

创建伸缩盒布局：display:flex
常用属性：
设置行列模式（默认行模式）：flex-direction
row;/*行模式：左（开始）-右（结束）/
row-reverse;/*行模式：右（结束）-左（开始）/
column;/*列模式：上（开始）—下（结束）/
column-reverse;/*列模式：下（结束）-上（开始）/
子元素换行模式（默认不换行）：flex-wrap
nowrap /*不换行*/
wrap /*换行*/
主轴对齐方式（默认起点对齐）：justify-content
flex-start; /* 起点对齐 */
flex-end; /* 终点对齐 */
center; /* 居中对齐 */
space-between; /* 两端对齐 */
space-around; /* 周围分布相同空间 */
space-evenly; /* 均匀空间 */
交叉轴对齐方式：align-items
flex-start; /* 起点对齐 */
flex-end; /* 终点对齐 */
center; /* 居中对齐 */
多轴线对齐方式：align-content
flex-start; /* 起点对齐 */
flex-end; /* 终点对齐 */
center; /* 居中对齐 */
space-between; /* 两端对齐 */
space-around; /* 行间距相等 */
space-evenly; /* 均分间距 */
分配剩余空间（默认值是0无单位，所有子元素的flex-grow之和确定为每个子元素分配的比例）：flex-grow:0
收缩规则（默认值是1无单位），当容器中无剩余空间才会被压缩：flex-shrink
flex简写形式（增长规则，缩小规则，初始化尺寸的集合写法。）：flex:0 1 auto

`媒体查询以及响应式布局`

根据媒体查询实现的响应式布局（改变视口宽度即可看出响应式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" med="IE=edge">
    <meta name="viewport" med="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: rgb(204, 204, 204);
        }
        @media (min-width:576px) {
            #box1 {
                background-color: red;
            }
        }
        @media (min-width:768px) {
            #box1 {
                background-color: blue;
            }
        }
        @media (min-width:992px) {
            #box1 {
                background-color: green;
            }
        }
        @media (min-width:1200px) {
            #box1 {
                background-color: palevioletred;
            }
        }
        @media (min-width:1400px) {
            #box1 {
                background-color: blueviolet;
            }
        }
    </style>
</head>
<body>
    <div id="box1">这是box1的内容</div>
</body>
</html>

媒体查询设置打印样式：不会显示在页面上但是会显示在打印预览上

@media print {
    body {
        background-color: red;
    }
}

超出部分显示省略号

div {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

子绝父相
实现子元素相对于父元素定位：子元素绝对定位，父元素相对定位
容易忽略的 outline
绘制元素轮廓：input获取焦点时的基础样式
清除：input {outline: none;} 或 {outline: 0;}

行内替换元素无法使用line-height,这类元素无基线

去除幽灵空白
(1)把行内块变成，块级元素
(2)父级中去掉所有节点的像素值font-size:0(只针对于img使用)
target（目标伪类）
被a标签的锚点选中的元素改变其样式

<a href="#box1">目标box1显示</a>

#box1:target { 
	background-color: #1e9fff; 
}

margin: auto 在什么情况下不生效？
1.行内元素 inline
2.行内块级元素 inline-block
3.行内替换元素 img input iframe…
解决方法：

父元素添加 text-align:center
2.子元素绝对定位父元素相对定位
top:50%; left:50%; margin-left:-元素宽度的一半; margin-top:-元素高度的一半
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

line-height: 行高行与行基线之间的距离(每行文字的高) 影响行内元素
基线：西方字母排列的基准线
行间距（行距）：line-height - font-size
半行距：(line-height - font-size)/2

line-height > font-size 行距大于0 存在半行距
line-height = font-size 行距等于0
line-height < font-size 行距小于0

赋值：
normal
数字相对大小是font-size的倍数所以子元素的line-height 继承的是倍数会乘以子元素的font-size
长度 100px
百分比优先计算父元素的 line-height 计算完之后赋给子元素（如果子元素没有line-height）

设置垂直居中：
(1) line-height == height

与height的区别
文字换行整个盒子高度增大(行数*行高)
height是个固定值