css
1.CSS引入
<!-- 两种引入外部css的方式 -->
<link rel="stylesheet" href="./index.css">
<style>
@import url(./index.css);
</style>
两种的差别：
1、link属与XHTML，@Import属于css
2、加载顺序不同，link会和页面同时加载，而@import等页面加载完了在加载
3、兼容性有差别
2.固定定位
相对定位：相对与自己原来的位置移动
相对定位
相对定位 relative相对于自己原来的位置
position: relative;
top: 100px;
left: 70px;
绝对定位：
1.没有父元素，就是以屏幕为参照。相对屏幕移动
2.有父元素。相对于父元素移动
绝对位置
1.绝对于屏幕，没有父元素 相对于屏幕在移动 直接加属性
position: absolute;
2.有父元素。决定于父元素的移动 父相子绝
父盒子设置相对定位
position: relative;
子盒子设置
position: absolute;
top: 100px;
left: 70px;
3.样式优先级
就近原则 ：行内样式>内部样式>外部样式
!important 可以提高优先级
h1{
color: brown!important;
}
4.选择器
1.元素、id、类选择器
元素、id、类选择器
元素选择器 以元素名字作为选择
类选择器 可以有多个class ，执行顺序是style里面的,前的样式会被后面的样式覆盖
id 唯一选择器
2.群组、通配符、后代选择器
/* 通配符选择器 */
*{
/* 内边距 */
margin: 0;
/* 外边距 */
padding: 0;
}
/* 群组选择器 多个兄弟元素，用逗号隔开*/
div,p,h1{
background-color: chartreuse;
}
/* 后代选择器 用空格 从右到左开始匹配，从子标签开始*/
ul li{
background-color: chartreuse;
}
> 就是亲儿子元素
ul>li{
background-color: chartreuse;
}
3.伪类选择器
/* 伪类选择器 这个顺序必须是link-visited-hover-active lvha*/
/* 初始化*/
a:link{
color: chartreuse;
}
/* 访问之后 */
a:visited{
color: red;
}
/* 鼠标上 */
a:hover{
color: seagreen;
}
/* 点击激活 */
a:active{
color: slateblue;
}
4.选择器权重
!import > 行内 > 后代选择器 ul li> id > class > 元素
5.css属性
1.css文本属性
| font-size | 字体大小 | px |
|---|---|---|
| font-family | 字体 | 宋体 |
| color | 字体颜色 | red 等 |
| font-weight | 字体加粗 | 取值100-900 100细体 400正常 700加粗 900最粗 |
| font-style | 字体斜体 | normal常规显示 italic倾斜 oblique更倾斜 |
| text-align | 文本位置 | justify两端对齐(多行文本中有用) center 剧中 |
| line-height | 行高 | px |
| letter-spacing | 字行距 | 中文字间距，英文每个字母 |
| word-spacing | 词间距 | 词间距 每个单词 |
| text-indent | 首行缩进 | 2em 两个字体的距离 |
| text-transform | 大小写 | capitalize首字母大写 lowercase全部小写 uppercase全部大写 |
text-decoration ：文本修饰
none(取出超链接的下划线)
underline下划线
overline上划线
line-through 删除线
字体属性的合并写法
/* 字体合并属性的写法 斜体 加粗 大小 字体*/
a{
font: italic bold 20px/1em 宋体;
}
2.列表属性
/* 设置列表的样式 circle空心圆 disc 实心圆 square 实心正方行 none */
list-style-type: circle;
/* 将图片设置为样式 */
list-style-image: url(./1.jpg);
/* 控制图标的位置 */
list-style-position: inside;
/* 复合属性 可以同时写三个属性,顺序可以改变也可以不写*/
list-style: square;
list-style-type 设置列表的样式
circle空心圆 disc 实心圆 square 实心正方行 none
list-style-image: url(./1.jpg); 将图片设置为样式
list-style-position: inside; 控制图标的位置
list-style:square url(1.png) inside 复合属性 可以同时写三个属性,顺序可以改变也可以不写
3.背景属性
背景颜色
background-color: rgb(14, 143, 83); rgba 多一个透明度
background-image: url(1.jpg); 将背景设置为图片 如果图片小,会平铺.如果图片足够大,会裁剪
background-repeat: no-repeat; 对背景图片的处理
repeat:默认平铺
repeat-x:x轴平铺
repeat-y:y轴平铺
no-repeat:不平铺
background-position: center center; 背景图片显示的位置
- 20px 20px 距离左边 距离上边的位置
2. 10% 10 % 距离左边 距离上边的位置
3. 水平的: left center right
垂直的: top center bottom
background-size: contain; 调整背景图片的大小
20px 20px 宽 高
100% 100%
3. cover 把背景图片扩展至足够大,以使背景图像完覆盖背景区域
4. contain 把图像扩展至最大尺寸,使其宽高完全适应内容区域，铺不满盒子，留白
background-attachment: fixed; 背景图片固定
fixed固定在浏览器的某个位置固定在哪里 background-position决定，跟盒子没有关系，也就是在屏幕的什么位置，始终都在
scroll 滚动
background: yellow fixed center url(…/1.背景属性/1.jpg) no-repeat;
复合属性 颜色 位置 覆盖 图片 固定否attachment
1.用空格隔开
2.顺序可以换
3.可以取一个值，放在后面会覆盖前面的值
background-size:只能单独用
4.浮动属性
float:left/right
初期决绝高度塌陷的方法：
决绝高度塌陷的方法
1.写固定高度（将浮动的两个盒子放在一个盒子里面，将这个盒子高度写死）相当于只有内部的盒子左浮了
2.清浮动（清除浮动）在非浮动的盒子加上清浮动 clear: left/right/both
3.在浮动的两个盒子后面添加一个盒子清除浮动
4.在父盒子上添加overflow:hidden
5.盒子模型
1.内边距
padding: 20px 30px; 内边距
0.一个值就是四边一样
1.两个值代表 上下 左右 20px 30px
2.三个值 上 左右 下
3.四个值 上 左 下 右（顺时针）
可以将padding拆分成四个方向：
padding-方向 top bottom left right
2.边框
边框 border 整个边框
边框大小
样式：solid实线 double 双线 dashed虚线 dotted圆点
颜色 red
也可以拆分设置单一的方向 ： border-top: 10px solid hotpink;
border 是一个复合样式，可以拆分成
border-width: 宽度设置四个方向的大小 顺时针
border-style:样式也可以设置四个方向的 顺时针
border-color:颜色的设置也和设置大小一样 顺时针
3.外边距
外边距 margin 和padding一样
1.一个值 四方一样
2.两个值表示 上下 左右
3.三个值表示 上 左右 下
4.顺时针 上 左 下 右
也可以单独的设置一个方向的
margin-方向：四个方向
支持为负数
屏幕居中 margin:0 auto; 第二个值必须实居中
兄弟盒子，两个盒子垂直外边距和水平外边距的问题
--垂直方向 外边距取最大值。
--水平方向 两个边距会合并处理。
2.父子关系，给子盒子加外边距，但作用于父身上，怎么解决？
--A.给父盒子加一个内边距 padding-top 注意距离计算
--B.给父盒子设置一个边框 border:1px solid transprant;
--C.给父盒子或者子盒子加一个浮动 float:left
--D.overflow:hidden
6.溢出属性
溢出属性: overflow
visible 显示溢出
hidden 影藏溢出 文本裁切
scroll 滚动条
auto 自动
inherit 继承父元素的效果
overflow-x: 对X轴的溢出控制
overflow-y: 对Y轴的溢出控制
空余空间
空余空间 white-space:
normal 默认值，会被浏览器忽略 nowrap 浏览不换行 pre 预格式化-保留空格,显示空格 回车 不换行<pre> pre-line 不显示空格 回车 换行 pre-wrap 显示空格 回车 换行
文本溢出 text-overflow
ellipsis 省略有三个点
clip 截断
7.元素类型
块元素、
行元素:行类元素只能设置左右边距，不能设置上下边距
行块元素
元素之间的转换：
display: bolck/inline/line-block/none
none 隐藏功能
8.定位属性
position：
relative 相对定位，相对于自己以前的位置
absolute 绝对定位
- 当没有父元素的时候，就是以屏幕为参考进行移动。
2. 有父元素，父元素有定位，就会绝对于父类元素移动，而不是屏幕 子的绝对定位的移动是相当于父类取移动的，而不是屏幕.父相子绝
/* 父盒子有相对位置 */
position: relative;
/* 子的绝对定位的移动是相当于父类取移动的，而不是屏幕 */
position: absolute;
fixed 定死在当前页面的位置
sticky 粘性定位就是可以做成吸顶的效果。然后告诉他距离顶部多远开始不动
position: sticky;
top: 0;
定位的层级
两个盒子谁有定位谁大，谁就显示
z-index 谁的值大谁就显示
/* 将行类元素改为块元素
1.display
2.absolute
3.float:left
浮动：半脱离 文字环绕效果
定位：全脱离，没有文字环绕效果
9.锚点
锚点 可以定位到本页面的位置
起抛点是一个超链接<a href="#a">斗破苍穹</a>
定位点根据id的值
10.自适应
一般元素
div {
/* 不写宽度或者auto就是自适应 */
/* min-height 会高度自适应 ，内容少的时候有一个最小的高度 宽度同理
*/
width: auto;
min-height: 100px;
background: yellow;
}
浮动元素的自适应
/* 伪元素 */
/* 第一个字母 */
div::first-letter{
font-size: 30px;
}
/* 给div前面加一句话 */
div::before{
content: "dddddd";
}
div::after{
content:"dddddd"
}
自适应
/* 解决高度塌陷的问题 */
/*
1.给父元素加overflow:hidden
2.新增一个标签<div style="clear:both"></div>
3.用伪元素
*/
在需要自适应的元素加一个伪元素将内容设置为空，然后清除浮动，设置成块元素
.box::after {
content: "";
clear: both;
display: block;
width: 0;
height: 0;
/* 可不可见 */
visibility: hidden;
}
窗口自适应
/* 设置成这个 */
html, body {
height: 100%;
}
.box1 {
width: 100%;
height: 100%;
background: yellow;
}
/* 通过calc()函数来计算高度 */
.box2 {
height: 100%;
width: calc(100% - 200px);
background: yellow;
float: right;
}
11.CSS3
1.选择器
层级选择器
">"子代选择器
.box>li {}
child 的下一个元素 + 旁边的兄弟
.child+li {}
"~"后面所有的亲兄弟
.child~li{}
属性选择器
属性选择器 有属性就行
选择有class属性的元素
[class] {
background: red;
}
/* div中有calss属性的元素 */
div[class] {
background-color: yellow;
}
/* div中classs属性为div1的
= 就是完全匹配
~= 包含匹配（适用于多个calss的值）
^= 以这个开头
$= 以这个结尾
*= 包含某个字符
*/
div[class=div1] {
background-color: blue;
}
div[class ~= div1] {
background-color: blue;
}
/* = 就是完全匹配
~= 包含匹配（适用于多个calss的值）
^= 以这个开头
$= 以这个结尾
*= 包含某个字符 */
div[class ~= "d"]{
background: green;
}
/* 匹配有name属性的元素 */
[name] {
background: burlywood;
}
伪类选择器
结构伪类选择器
/*
last-child 最后一个子元素
:first-child 第一个
nth-child(4) 第4个孩子元素
nth-child(2n) 偶数选择（even）
nth-child(2n+1) 奇数（odd）
only-child 只有一个子节点的元素
empty 没有孩子节点（一点东西都没有，空格都没有）
root 代替html
:root{
margin:0;
}
*/
.box div:last-child {
margin-right: 0;
}
目标伪类选择器
/*
target 给目标块加上颜色 那一块被选中，那一块就有
*/
div:target{
background: yellow;
}
状态选择器
/*
enabled 没有禁用的
disabled 禁用的
focus 聚焦的
checked 选中的
::selection 鼠标选择
*/
input:enabled {
background: yellow;
}
input:disabled {
background: red;
}
input:focus {
background: burlywood;
}
input[type=checkbox] {
/* 去掉默认样式 */
appearance: none;
/* 然后自己设置样式 */
width: 10px;
height: 10px;
border: 1px solid red;
}
input:checked {
background: green;
}
div::selection {
color: red;
}
否定和动态伪类选择器
/*
not() 否定
link
visited
active
hover
*/
li:not(:nth-child(2n)) {
/* 不是偶数 */
color: red;
}
2.文本阴影
文本阴影 text-shadow 水平方向 垂直方向 模糊程度 颜色，另一个方向，用逗号隔开
text-shadow: 10px 10px 1px red;
3.盒子阴影
盒子阴影 box-shadow：水平 垂直 模糊距离 阴影大小 阴影颜色
inset 内阴影
box-shadow: 10px 10px 10px 1px burlywood inset;
4.圆角边框
border-radius 圆角 px或者百分比
1、一个值 四角一样
2、两个值 左上右下 左下右上
3、三个值 左上 左下右上 右下
4、四个字 左上顺时针
也支持四个单独的值
border-top-left-radius
几种特殊用法
/* border: 20px solid green; */
/* 30px/60px 水平30 垂直60 这种写法只支持 border-radius*/
border-radius: 30px/60px;
/* 圆 正方形盒子的宽度的一半*/
border-radius: 50%;
/* 半圆 需要长方形 设置左上和右上是宽度的一半就可以了*/
border-radius: 200px 200px 0 0;
/* 扇形 正方形 */
border-radius: 200px 0 0;
5.引入字体
@font-face {
font-family: chenbin;
src: url(font/JetBrainsMono-Regular.ttf);
}
div{
font-family: chenbin;
font-size: 50px;
}
6.怪异盒子
box-sizing:
content-box 标准盒模型
border-box 怪异盒模型，会压缩内容
怪异盒模型，对压缩内容，保持总大小不变 ,标准盒子模型会在原本大小不变的情况下，向外扩展
7.弹性盒子
弹性盒子，特别适合移动端的布局方式、
弹性 display: flex 默认横向排列
1.子元素横向排列
2.行类元素变成块级元素
3.只有一个元素的时候，在子元素加上**margin:auto;**就可以居中
修改主轴方向：
flex-direction:
column 竖直方向为主轴
row 水平为主轴（默认）
row-reverse 水平方向
column-reverse 竖直方向
调整侧轴方向 :
align-items: center;
修改对齐方式:
justify-content：
flex-start 贴着右边
flex-end 贴着左边
center 居中
space-between 两端对齐
space-around 环绕方式
折行显示:
flex-wrap: wrap;
调整间距:
align-content*: center;
flex-start
flex-end
center
space-around
space-between
8.项目
对齐方式
align-self: stretch;
auto
flex-start
flex-end
center
baseline
stretch 拉伸
调整顺序
order:0 排序 值越大越靠后 默认0
剩余宽高
flex:1; 把剩余空间占满
9.多列布局
div{
/* 列的个数 */
column-count: 6;
/* 调整列间距 */
column-gap: 20px;
/* 列边框 */
column-rule: 2px solid red;
/* 列高度统一
balance 均衡
auto
*/
/* column-fill: auto; */
/* 调整列宽 */
/* column-width: 10px; */
}
div>h1{
/* 跨列 */
column-span: all;
10.响应式布局
大于多少值的时候变成什么样子
@media screen and (min-width:1000px) {
body {
background: red;
}
}
/* 竖屏 */
@media screen and (orientation:optrait) {}
/* 竖屏 */
@media screen and (orientation:landscape) {}
11.em和rem
px
em 相当于父元素的倍数
rem 相当于根元素（html）的倍数
* {
margin: 0;
padding: 0;
}
/* 给根节点设置一个值 */
html {
font-size: 100px;
}
/* 把字体恢复成默认的16px */
body {
font-size: 16px;
}
div {
width: 7.5rem;
height: 1rem;
background: yellow;
}
</style>
<script>
// fonetsize 750 设计稿的宽度的一半*基准
document.documentElement.style.fontSize = document.documentElement
.clientWidth / 750 * 100 + "px"
</script>
12.vm和vh
vh view-height 视口高度 ==100vh
vw view-width 视口宽度 ==100vw
* {
margin: 0;
padding: 0;
}
html {
font-size: 4.26vw;
}
div {
width: 23.4375rem;
height: 3.125rem;
background: yellow;
}
/*
设计稿的宽度 然后将px转换为vw 然后将html根节点的font-size化成vw的值
375px===100vw
1px=0.26vw
16px===4.26vw
*/
没有滚动条 100%=100vw
有滚动条 100vw 包含滚动条的 100%刨除滚动条，剩余的空间占满
13.渐变
线性渐变
/* 线性渐变
可以多颜色渐变 指定渐变方向
background: linear-gradient(to left,red,yellow,green);
background: linear-gradient(0deg,red,yellow,green); 度数
*/
div {
width: 300px;
height: 300px;
background: linear-gradient(45deg, red, yellow, green);
}
镜像渐变
/* 镜像渐变
可以多颜色渐变 指定渐变方向
百分比就是渐变位置
background: radial-gradient(red 10%,green 30%);
*/
div {
width: 300px;
height: 300px;
background: radial-gradient(red, green);
/* border-radius: 50%; */
}
重复渐变
div {
width: 300px;
height: 300px;
background: repeating-linear-gradient(red 10%,green 20%);
}
14.动画过度
transition: all 2s;
/*
transition: height 2s
第一个是属性 第二是动画时间
all 所有属性
linear 匀速
ease
ease-out
sase-in-out
display:none 不支持动画
*/
transition: all 2s;
/*
单一属性
transition-property: height;
贝塞尔曲线
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
过度时间
transition-duration: 2s;
*/
15.2D动画
transform
平移 translateX
transform: translate(100px,100px);
往X方向移动100px
transform: translateX(100px) translateY(100px);
transform: translate(100px,100px);
放大
transform: scale(2);
scale(2) 放大两倍 负值是倒像放大的效果 scaleX() scaleY()
改变放大的中心位置 默认是center transform-origin: center;
旋转
旋转 rotate()==rotateZ 正值顺时针 负值逆时针
transform: rotate(45deg);
旋转中心位置 transform-origin: left;
倾斜
倾斜 正值 拉正对角线 负拉副对角线
transform: skew(30deg, 30deg)
16.关键帧动画
/* 关键帧的单一属性 可以拆分成单一属性
animation-direction: alternate-reverse; 反方向交替
normal 正常
reverse 反方向
alternate 正方向交替
*/
.box {
width: 200px;
height: 200px;
background: blue;
animation-direction: alternate-reverse;
/*
none 默认值
forwards 最后的动画
backwards 初始的动画
*/
animation-fill-mode: forwards;
}
17.3D
transform-style: preserve-3d;
位移
往前在移动 translateZ translate3d
transform: translateZ(400px)
旋转
/* 旋转 rotate rotateX rotate*/
/* transform: rotateY(30deg); */
/* 集合写法 */
transform: translate3d(100px, 100px, 1100px, 30deg)
缩放
/* 缩放 */
transform: scaleX(3);
18.网格布局
/* 设置网格布局 */
display: grid;
/* 固定的宽高 */
/* grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px; */
/* 百分比 */
/* grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 25% 25% 25% 25%; */
/* repeat auto-fill 自动分割*/
/* grid-template-columns: repeat(auto-fill, 33.33%);
grid-template-rows: repeat(3, 33.33%); */
/* fr 片段 */
/* grid-template-columns: 100px 1fr 200px;
grid-template-rows: 1fr 1fr 1fr; */
/* minmax */
/* auto 自动占满剩余空间 */
grid-template-rows: 200 auto 200px;
行间距
gap: 20px 20px;
//合并
/* 给面块区域取一个名字 名字相同 的就会合并
*/
grid-template-areas: 'a a c '
'd e f'
'h i g'
;
}
.box div:nth-child(1) {
/* 给子类指定名字 这里的名字没有引号*/
grid-area: a;
}
/* 变成竖排 每个格子在父盒子的位置 */
grid-auto-flow: column;
/* justify-content: center;
align-content: center; */
place-content: center center;
/* 控制小盒子中的内容的位置 */
/* justify-items: center;
align-items: center; */
place-items: center center;
2172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
