CSS复习——B站

天落枫

已于 2022-06-14 10:58:35 修改

阅读量329

点赞数

分类专栏：前端文章标签： css html5 html

于 2020-11-29 15:21:42 首次发布

原文链接：http://csdn.net/xiaopi3

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

简介

css：层叠样式表

用于美化网页，动态效果

发展史：
CSS1.0
CSS2.0 DIV + CSS
CSS2.1 浮动定位
CSS3.0 阴影圆角动画

一般而言，css代码写在html的head中
Demo:

<style type="text/css">
	选择器{
		声明;
		声明;
		声明;
	}
</style>

或者使用引用方式，引用外部文件：
链接式：

<link rel="stylesheet" href="../style.css"/>

导入式：css2.0 不建议使用

<style type="text/css">@import url(out.css)</style>

或者采用行内式：在标签内部定义style=""属性

<div style="color:red"></div>

注意：link和import区别在于：link是html标签，而@import是css语法

各方式比较

效率
链接式效率高，运行到调用处才引用；
导入式预先导入，效率低
优先级
行内>内嵌>导入>链接(最前面)
行内>链接(最后面)>内嵌>导入
就近原则

注意：一般来说，后面样式会覆盖前面样式，若在定义属性中有!important则该样式不会被覆盖。

选择器

优先级和精确程度有关，精确度高的优先级高，同类型的选择器就近原则

1 标签选择

选择器格式：标签{属性:值;}，会选中页面所有标签！！

p{color:red;font-size:20px}

2 类别选择器

类选择器可以选取一组包含该类的

<style>
	.r{color:red;font-size:20px}
</style>
<p class="r">abcdefg</p>

3 id选择器

id选择器是唯一的

#aaa{color:red;}

4 层次选择器

后代选择器

选中某个元素的后面的标签：空格
选择器1 选择器2{}

子选择器

选中一代：>
选择器1>选择器2{}

相邻选择器

选择相邻的，同层级的，下一个标签：+
选择器1+选择器2{}

通用选择器

选择当前元素所有向下的同级指定元素：~
选择器1~选择器1{}

5 伪类选择器

注意：伪元素如:after :before等元素添加到dom中，是不可被选择的，即页面无法选取和使用JS更改！

结构伪类

选择器:first-child：选择当前选中元素的第一个，范围从结构伪类前的选择器中选取
选择ul下的所有li中的第一个子元素：

ul li:first-child{
	background: #02ff00;
}

选择器:nth-child(x)：选择当前选择器中同级别的第N个子元素，如果该元素为当前选择器则选中，否则无效
选择p标签同级别的第一个标签，若为p标签则选中，否则无效

p:nth-child(1){}

选择器:nth-of-type(x)：选中当前选择器选中的同级别同类型的所有标签中的第x个
选中p标签同级别所有p标签中的第一个p标签

p:nth-of-type(1){}

其他

有顺序的，就按照这个顺序写才能同时起作用！！
a:link{}：普通的、未被访问的链接
a:visited{}：用户已访问的链接
a:hover{}：鼠标指针位于链接的上方
a:active{}：链接被点击的时刻

6 属性选择器★★★

格式：选择器[属性]{}
选中a标签里有id属性的标签：

a[id]{}

选中a标签中有id的，且id为first值的标签：

a[id=first]{}

注意：=值精确匹配，*=表示模糊匹配。^=表示以什么开头。$=表示以什么结尾。值可以使用正则。

页面美化

<span>：用于要突出的字，包起来后进行处理

字体样式

font-family: Times New Roman,Arial,黑体; /* 逗号后的会作为备选字体 */
font-style: italic; /* 斜体 */
font-size: 15px; /* 文字大小 */
font-weight: blod|normal; /* 加粗|正常 */
border-margin-padding
color: blue;：字体颜色
background-color: blue;：背景颜色

注意：可以写在一行：

# font属性默认顺序：
# font : font-style || font-variant || font-weight || font-size || line-height || font-family
# 例子：
.class{font:bold 18px "黑体";}

文本样式

文本样式主要有：颜色、对齐方式、缩进、行高、装饰

颜色

文本颜色表达方式有几种：

直接写颜色：color:red;
rgb：color:rgb(0,255,255);
rgba：color:rgba(0,255,255,0.5);

rgba比rgb多了一个透明度通道

对齐

缩进

text-indent: 2em：首行缩进2字符，em表示字符

间距

word-spacing: 20px; /* 单词间距 */

letter-spacing: 20px; /* 字符间距 */

行高

line-height: 1.5;：行高

装饰

text-decoration: none|underline|line-through|overline;：无|下划线|删除线|上划线

text-transform: capitalize|uppercase|lowercase;：首字母全大写|全部大写|全小写

图文混排

就是同一个div中有图片也有文字，就可以使用该属性设置div的css

vertical-align:
	baseline(默认)
	top
	middle
	bottom
	text-bottom
	text-top
	sub
	super
	20px|-20px(相对于baseline)

阴影效果

字体阴影：格式：x偏移 y偏移模糊距离阴影颜色

text-shadow:10px 15px 20px gray;

注意：模糊距离控制模糊效果的程度，距离越大越模糊
注意：xy坐标轴原点在左上角，右下角为正区间

盒子阴影：格式同上

box-shadow: 10px 10px 10px yellow;

圆角边框

即设置border的圆角，顺序为左上角右上角右下角左下角
未设置的角会复制对角的值

border-radius: 50px 20px;

注意：设置值为半径值！

列表样式

list-style：该属性用于设置列表前面的小圆点的模式，none为没有

背景

颜色

background-color: blue;

图片

background-image:url("");
注意：背景图片默认是平铺

background-size：cover：背景图片自适应，常用作最外层作为背景

设置平铺效果：

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

可以试试写在一行：颜色水平偏移垂直偏移平铺效果

background: red url() 10px 15px no-repeat;

渐变

经向渐变背景，格式：角度，颜色百分比，颜色百分比
background-image: linear-gradient(19deg,blue 0%,yellow 100%);

透明度

opacity:0.5;

盒子模型

在这里插入图片描述
最内是padding、最外叫border，两个元素间叫margin，更详细内容为：

border一体化默认顺序：粗细样式颜色

border: 1px solid red

居中

如果想让某个盒子居中：对于子元素：margin: 0 auto; width: 20px; display: block or 对于父元素：display: flex;justify-content: center;
让元素内部的文字居中：text-align: center;

浮动

标准文档流：从左往右，自上而下
块级元素：h p div
行内元素：span a img strong

块级元素不能包含在行内元素中！

元素类型：block inline none
block：独占一行，自上向下，可以设置宽高
inline：行内元素，自左向右，无法设置宽度
none：不显示
inline-block：行内块级，自左向右，可设置宽高

清除浮动

将当前元素的浮动影响去掉，变成正常文档流

clear: both;

父级边框塌陷问题

元素浮动后不在父级div中内了，父级盒子包不住子元素了

解决：

1 父级元素最后一个增加一个空div，设置该元素清除两侧浮动即可
2 父级元素设置overflow=auto

overflow：hidden（隐藏）|scroll（显示滚动条）
3 父级元素添加伪类，在伪类加以下三个属性：
```
  #a::after{
	   clear: both;
	   display: block;
	   content: "";
 }
```
注意：伪类偏向于元素的动作行为，伪元素偏向于元素的属性。实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

定位

属性：position

相对定位

相对于自己原本位置去定位偏移，但是依然占用原来的空间！
relative和left right top bottom去偏移

position: relative;
left:10px

绝对定位

相对于父级已定位元素去定位偏移，原空间位置不保留了！

position: absolute;
right:20px;

注意：如果只写absolute，则位置不保留，且元素为原位置，只是不占用空间了

固定定位

固定定位：fix，固定后窗口滑动也不会改变，固定窗口是相对于浏览器窗口

position: fix;
right:0;

Z-index

层级图层位置，默认是 0，z-index 值越大，位于层级的越上层，底层的会被覆盖

动画

详细参考：阮一峰的动画教程

坐标变换

transform：translate(x,y) 参照自己的坐标平移，可用百分比参数

transform：rotate(90deg) 设置目标样式为无旋转时的偏移角度

过渡

transition

布局

布局方式有几种：

传统的div加margin等的普通布局，如table布局
float浮动布局，常常和div普通布局一起使用如父元素为普通布局，子元素为浮动布局
flex布局，这是css3的布局方式，具有响应式的特点，同时方便的布局排版
响应式meta布局

传统布局和flex布局的区别：
传统布局：兼容性好，方式繁琐，无法适应移动端
flex布局：兼容性一般，布局简单，广泛用于移动端，IE11及一下不支持

建议：如果是PC端，使用传统布局，如果无需兼容性考虑，使用flex布局

1 传统布局

使用传统布局来构建一个导航栏：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1786158_ny0qw4zfuq9.css">
    <style>

    </style>
</head>

<body>
    <div id="header">
        <div class="header">
            <div class="header_left">
                <div>首页</div>
                <div>
                    <img src="./link.png" alt="link">
                    <span>新闻</span>
                    <i class="iconfont icon-wode"></i>
                </div>
            </div>
            <div class="header_right">
                <div>个人中心</div>
                <div>登录</div>
            </div>
        </div>
    </div>
</body>

</html>

样式：

* {
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(232, 234, 235);
}
#header{
    height: 40px;
    background-color: #fff;
    font-size: 15px;
}
.header{
    width: 1400px;
    height: 40px;
    margin: 0 auto;
    background-color: #ffe;
    text-align: center;
    line-height: 40px;
}
.header_left{
    width: 700px;
    height: 40px;
    background-color: #ffd;
    float: left;
}
.header_left>div{
    width: 100px;
    height: 40px;
    background-color: #fea;
    float: left;
}
.header_left>:nth-child(2)>*{
    margin: 0;
    vertical-align: middle;
}
.header_left img{
    width: 15px;
    height: 15px;
    border: 1px solid red;
    vertical-align: middle;
}
.header_left i{
    border: 1px solid red;
}
.header_right{
    width: 700px;
    height: 40px;
    background-color: #ffa;
    float: right;
}
.header_right>div{
    width: 80px;
    height: 40px;
    background-color: #fea;
    float: right;
}

2 flex布局

display:flex

特别明确一下剩余空间的含义：即没有设置固定宽或者高的未被占用的空间

flex：flexible box，伸缩盒子，由容器（父标签）+项目（子标签）组成，任何一个容器都可以指定为flex布局，使用flex布局后所有的元素都是具有大小和宽高的行内块级元素了

特别注意：当父元素flex布局，子元素的float、clear、vertical-align属性将失效！因为前两者flex已经可以做到相同的效果，最后一个则有替代的功能。

2.1 布局原理

采用flex布局的元素称为flex容器！所有子元素为容器的项目！项目沿着主轴进行排列，主轴可以是X轴row也可以是Y轴column，原点在左上角。
总结：flex布局原理：给父盒子添加flex属性，来控制子盒子的位置和排列方式

父元素属性：
在这里插入图片描述

flex-direction：row/row-reverse/column/column-reverse，设定主轴，剩余的就是侧轴
justify-content:设置元素在主轴上排列的方式：flex-start默认贴左侧，flex-end贴右侧，center所有元素聚集中间，space-around平分剩余空间（左右留白），space-between平分剩余空间（不留白）
flex-wrap设置换行！flex中，如果不设置换行会在一行显示，如果显示不下会缩小原设定项目宽度或高度来显示，nowrap不换行，wrap换行。
align-items侧轴上的排列，flex-start贴顶部，flex-end贴底部，center聚集中间，stretch拉伸（不设置项目高度才会生效）单行
align-content侧轴上的排列，具有换行才有效，flex-start默认贴顶部，flex-end贴底部，center所有元素聚集中间，space-around平分剩余空间（留白），space-between平分剩余空间（不留白），stretch拉伸（不设置项目高度才会生效）
flex-flow相当于同时设置主轴方向和换行！row wrap合写而已

注意：几种属性组合才能看到效果，这里列举几种常用场景：

A 多个组件一行显示不下，又不想让其自动收缩变形：子项不要设置flex=1，容器不要设置flex-warp属性，此时组件会超出容器
B 想让其一行显示，且垂直居中：容器设置align-items:center，且设置不换行
C 想让其折叠显示，但是需要整体居中：容器设置align-content:center，且设置换行

2.2 子元素常见属性

在这里插入图片描述
flex分配剩余空间的，子项占总体的份数，数字

常用于移动端导航，左右两侧固定宽度，剩余空间可以占满

示例：

<html>
    <head>
        <link rel="stylesheet" href="flex.css">
    </head>
    <body>
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </body>
</html>

样式：

* {
    margin: 0;
    padding: 0;
}

div {
    display: flex;
    height: 80px;
    background-color: black;
}

div>:nth-child(1),:nth-child(3) {
    width: 100px;
    background-color: red;
}

div>:nth-child(2){
    flex: 1;
}

结果：
在这里插入图片描述
注意：如果想要平均分配，则每个子项目都不设置宽度（那剩余空间就是全部）给flex:1即可

align-self控制当前子项在侧轴上的排列方式，可以覆盖掉align-items，默认值auto表示继承align-items，如果没有父元素，则等同于stretch

order定义项目的排列顺序，数值小排在前面，默认0（和z-index相反），不改变结构，通过css控制盒子的前后顺序

2.2.1 子项flex属性详解

子项flex属性相当于3个属性的合集：flex: flex-grow flex-shrink flex-basis
含义：

flex-grow，有剩余空间时的分配权重
flex-shrink，空间不足时的分配权重
flex-basis，默认长度（实际长度受前两者的影响，可能更长），特殊的0%表示按最短压缩，文字会垂直来占最小横向空间，auto表示根据自身宽度调整，会横向排开。

不写flex属性，默认：flex: 0 1 auto
效果如下：
在这里插入图片描述

其可以接收不同数量值

1个值：flex: 1，即flex: 1 1 0%，可拉长和缩短，占比为当前容器中的1份，默认长度为最短，文字可能会垂直
1个值：flex: 1px，即flex: 1 1 1px
2个值：flex: 1 2 ，即flex: 1 2 0%
2个值：flex: 1 2px，即flex: 1 0 2px
3个值：flex: 1 2 50%

特殊值：

flex:initial：flex: 0 1 auto，效果是每项按自身长度排列，有可能有多余空间，也可能占满后均匀分布
flex:auto： flex: 1 1 auto，效果是每项会横向拉长或收缩，均匀占满
flex:none： flex: 0 0 auto，效果是每项按自生长度排列，有可能超出容器

参考：https://www.zhangxinxu.com/wordpress/2019/12/css-flex-deep/

常用的两个css函数

1. calc

该函数允许在声明 CSS 属性值时执行一些计算：

width: calc(100% - 80px);

2. attr

该函数可以返回选择器选中的元素的属性值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	div:after {content: " (" attr(style) ")";}
</style>
</head>

<body>
	<div style="font-size:1.5em;color:red">我的号笨蛋</div>
	<p><strong>注意:</strong> IE8 需要声明 !DOCTYPE 才可以支持 attr() 函数。</p>
</body>
</html>