一. 标签分类
1. 行内元素 a button i b span 不独占一行,不可设置宽高
2. 块元素 div p ul li h1-h6 form table 独占,可设宽高
3. 行内块元素 img input 不独占,可设宽高
二. css 三种引入方式
1. 内联式(行内样式) <div style="color:pink">hello</div>
2. 内嵌式 <style> h1{color:blue;} </style>
3. 外引式 <link rel="stylesheet" href="./Untitled-1.css">
三. 常用选择器
1. 通配符选择器
2. 标签选择器
3. 类选择器
4. id选择器
四. 样式
/* 字体: */
color: pink;
font-family: "宋体";
font-size: 30px;
font-weight: 700;
/* italic */
/* font-style:nomoral; */
/* 文本: */
/* 文本对齐 */
text-align: end;
/* 文本修饰 underline line-through */
/* text-decoration:overline; */
/* 文本缩进 */
/* text-indent:2em; */
/* 剪切文本 */
text-overflow: clip;
/* 转换大小写 capitalize 首字母大写 lowercase 小写 uppercase 大写 */
/* text-transform:capitalize; */
/* 文字间距: */
/* 字母或中文间距 */
letter-spacing: 30px;
/* 英文单词间距 */
word-spacing: 50px;
/* line-height:50px; */
/* */
background-image: url("./nicon-10750f3f7d.png");
background-repeat: no-repeat;
background-position: 8px -62px;
background-position: 50% 50%;
background-size: 30px 30px;
background-size: 50% 50%;
五. css 优先级
样式优先级:
!important > 行内样式 > id > class > tag > * > 继承父元素
权重:
10000 1000 100 10 1 0 无
有些样式不能继承 能继承的一般是文字样式
层级:
z-index不一定是整数 ,数越大层级越高,只能用于定位元素(relative/absolute/fixed,staticy粘性定位层级更高)
当一个div的Z-index为整数时,它的子元素和外界元素进行比较时,采用父元素的Z-index进行比较, 和兄弟元素比较采用自身的Z-index。当一个div的Z-index为auto时,如果它和它的兄弟进行比较,采用它父元素的Z-index。
六. CSS 选择器组合使用
选择器匹配规则:从右向左
子代选择器:
div>h1{}
后代选择器:
div h1{}
并列选择器:
h1,p{}
带有.box的div:
div.box
七. css 三大特性
1. 层叠性
2. 继承性
3. 优先级
# 命名规则
1. 不能数字或数字开头命名
2. 驼峰或下划线命名
八. 文档流
浏览器根据元素排列方式,块元素从上到下,内联元素(行内元素和行内块元素)从左到右,遇到阻塞自动换行.称为流式布局.
九. 标准盒模型
box-sizing: content-box;
width: 50px;
border: 5px solid black;
padding: 5px;
margin: 5px;
![](./biao.png)
width设置的是content的宽度
盒子组成:content+padding+border+margin
十. 怪异盒模型
box-sizing: border-box;
width: 50px;
border: 5px solid black;
padding: 5px;
margin: 5px;
![](./guai.png)
十一. 内外边距
1. 内边距
padding: 10px 20px 30px 40px;
/* 上 右 下 左 */
padding: 10px 20px 30px;
/* 上 左右 下 */
padding: 10px;
/* 上下左右 */
2. 外边距
maigin: 10px 20px 30px 40px;
/* 上 右 下 左 */
margin: 10px 20px 30px;
/* 上 左右 下 */
margin: 10px;
/* 上下左右 */
3. 外边距重合问题(两个都是正值或负值时,以绝对值大的为准 一正一负时,以两数的和为准)
.a {
width: 50px;
height: 50px;
border: 5px solid black;
margin-bottom: 50px;
}
.b {
border: 5px solid green;
height: 100px;
width: 50px;
margin-top: 100px;
}
![](./chonghe.png)
<!-- 解决办法:
给后一个元素设置float
不需要解决-->
4. 外边距穿透问题发生条件:
1. 在垂直方向 2. 父元素没有边框
解决方法:
1. 给父元素添加边框
2. 不使用外边距,使用内边距
3. 父元素加overflow:hidden
4. 给父或子设置display:inline-block
5. 给父或子设置float
6. 给父或子设置position:absolute
7. 中间使用一个空元素
#box2 {
margin-top: 20px;
margin-bottom: 20px;
}
.parent {
/* border: 5px solid black; */
width: 100px;
height: 150px;
background-color: rgb(113, 206, 183);
}
.son {
/* border: 5px solid green; */
height: 100px;
width: 50px;
background-color: rgb(252, 190, 190);
margin-top: 50px;
}
<div class="parent">
<div class="son"></div>
</div>
![](./chuantou.png)
十二. 边框
boeder: 1px soild red;
border-width: 1px;
border-style: dotted;
/* soild 实线 dotted 点状 double 双实线 groove 凹槽 */
border-color: pink;
border-top: 1px soild red;
border-radius: 50%;
十三. 块元素的居中
margin: 0 auto ;
十四. 图片居中
对其父元素设置text-align:center;
十五. 文本居中
对父元素设置text-align:center;
十六. 让多个元素同处在一行显示
1. 使用display: inline-block;
(元素间有间隙,对父元素添加{font-size:0}解决)
(会使margin:0 auto失效,要使用text-align:center居中)
(设置inline-block 后div不对齐,解决:
1、暴力float,当然这是备选方案,毕竟脱离文档流后页面元素会不好控制
2、简单粗暴地给所有元素都加上内容,例如空格符
3、设置所有内联元素 vertical-align: top/middle/bottom; 属性,改变默认设置。
原文链接:https://blog.csdn.net/shuiseyangguang/article/details/84069906)
.s {
width: 100px;
height: 100px;
background-color: rgb(245, 155, 155);
display: inline-block;
}
.d {
width: 100px;
height: 100px;
background-color: rgb(91, 148, 255);
display: inline-block;
}
.f {
width: 100px;
height: 100px;
background-color: rgb(156, 55, 55);
display: inline-block;
}
<div class="s"></div>
<div class="d"></div>
<div class="f"></div>
2. 使用浮动(元素间没有间隙)
十七. 浮动
开启浮动后,浮动对自身的影响:
1. 会立即脱离文档流(在文档流中没有该元素位置)
2. 层级默认会提升半层 会覆盖其他元素()
3. 不会覆盖文字
4. 保留了inline-block的优点,去掉了他的缺点,相当于inline-block的升级版,默认内容撑开,可设宽高,会使margin:0 auto;失效
5. 浮动不会继承
浮动对兄弟元素影响:
1. a元素开启浮动后 后面的块元素b默认上移 如果想保持在原来的位置可以清楚浮动
2. a元素是块级元素 没开启浮动,下面的b元素开启浮动后 上不去
浮动对父元素影响:
1. 当所有子元素都浮动,父元素将没有内容,不被撑开,高度塌陷
清浮动方法:(不能清除兄弟元素的影响,清楚的是子元素对父元素的影响)
1. 给父元素设置高度
2. 给父元素也设置浮动
3. 给父元素添加display:inline-block;
4. 在浮动元素下添加新div自定义clear:both;清除父元素的浮动影响(如果对兄弟元素使用clear:left/clear:right要与浮动方向相同)
.clear {
height: 0;
font-size: 0;
/* 解决IE6低版本中默认元素最小19像素高度的兼容性问题,只能解决到最后2像素 */
clear: both;
/* 表示其左右方向不能有浮动,使此元素在浮动元素下一行显示,而不会被浮动元素覆盖 */
}
5. 在浮动元素下加一句:<br clear="all">
6. overflow三大属性:
auto(溢出显示滚动条) scroll(默认显示滚动条) hidden(溢出隐藏)
.parent {
margin: 0 auto;
border: 1px solid rgb(91, 148, 255);
zoom: 1;
/* ie6浏览器 */
/* overflow:auto; */
overflow: hidden;
/* 标准浏览器适用,ie6下不适用 */
/* 两者同时使用,适用所有浏览器 */
}
.son {
width: 100px;
height: 100px;
background-color: rgb(245, 155, 155);
}
7. 使用after伪类(ie6 ie7不支持after伪类,但ie6 ie7下浮动元素的父级有宽度就不用清浮动)
.parent {
margin: 0 auto;
border: 1px solid rgb(91, 148, 255);
zoom: 1;
/* 加上zoom:1就可以清楚所有的浏览器浮动 */
}
.clearfix::after {
content: "";
/* 给元素追加一个空块 且这个快两边无浮动*/
display: block;
/* 伪元素是inline,要设成block */
clear: both;
}
十八. 伪元素(:😃
元素的特殊位置,开始位置 结束位置 第一行
/* 元素前面 */
.box::before {
content: "eeeeeee";
}
/* 元素后面 */
.box::after {
content: "ffffff";
}
/* 第一行 */
.box::first-line {
background-color: rgb(174, 255, 143);
}
/* 首字母 */
.box::first-letter {
color: rgb(245, 32, 32);
}
十九. 伪类(😃 (优先级 10)
/* 悬浮状态 */
.box:hover {
color: blue;
}
/* 激活状态 */
.box:active {
color: brown;
}
/* 未访问状态 */
a:link {
color: cornflowerblue;
}
/* 访问过后状态 */
a:visited {
color: chocolate;
}
二十. 定位
相对定位:
position:relative;
1. 相对于元素自身在文档流中的位置
2. 没有脱离文档流
3. 层级默认会上调,可通过z-index调整
4. 默认会在原来文档流位置, 可使用top left bottom right调整位置
5. 使用场景一般用于对元素位置的微调
绝对定位:
position: absolute;
1. 参考点 距离自己最近的非static定位的祖先元素 如果找不到那么他的祖先定位则相对最初的包含块
2. 脱离文档流
3. 层级默认会上调,可通过z-index调整
4. 默认会在原来文档流位置, 可使用top left bottom right调整位置
5. 子绝父相 使用场景想要元素相对于祖先元素定位
固定定位:
position: fixed;
1. 相对于浏览器可视窗口的位置
2. 脱离文档流
3. 层级默认会上调,可通过z-index调整
4. 默认会在原来文档流位置, 可使用top left bottom right调整位置
5. 使用场景一般用于对浏览器可视窗口的定位
粘性定位 position:sticky;
静态定位 position:static;
一般的标签元素不加任何定位属性都属于静态定位,在页面的最底层属于标准流。
二十一. 定位居中方法
body {
width: 100%;
height: 500px;
position: relative;
background-color: rgb(192, 242, 255);
}
.box {
width: 300px;
height: 200px;
background-color: rgb(253, 99, 125);
position: absolute;
/* 方法一 */
/* left: 50%;
margin-left: -150px; */
/* 方法二 */
left: 50%;
transform: translate(-50%, 0);
}
二十二. emmet 方法
二十三. 通常用 i 标签实现小图标 字体默认倾斜
二十四. 图片默认对齐文字基准线,下面会出现三像素的间距,font-size:0;解决
二十五. a 为 inline 属性,要包括 img 时,可换成 inline-block
二十六. 字体图标
引入样式文件,像使用字体的方法使用字体图标
二十七. 过渡
重点:初状态和末状态
.box {
width: 50px;
height: 60px;
background-color: red;
transition: width 5s;
}
.box:hover {
width: 80px;
height: 80px;
background-color: pink;
border-radious: 50%;
}
二十八.关键帧动画
/* 渐变轮播 */
.box {
width: 400px;
height: 400px;
/*
名称*
动画时长*
运动轨迹(先快后慢 匀速 先满后快 默认匀速)
动画延迟时间 默认无延迟
动画播放次数 默认一次
动画播放方向 默认顺时针
动画结束后的状态 默认会恢复原来的状态
*/
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: banner 5s infinite;
}
@keyframes banner {
0% {
background-size: 100% 100%;
background-image: url("./1.png");
}
20% {
background-image: url("./2.png");
}
40% {
background-image: url("./3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
60% {
background-image: url("./4.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
80% {
background-image: url("./6.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
100% {
background-image: url("./1.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
/* 无缝轮播 */
<style>
.box{
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
/*
名称*
动画时长*
运动轨迹(先快后慢 匀速 先满后快 默认匀速)
动画延迟时间 默认无延迟
动画播放次数 默认一次
动画播放方向 默认顺时针
动画结束后的状态 默认会恢复原来的状态
*/
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
}
@keyframes banner{
0%{
position: absolute;
left: 0px;
}
20%{
left: -100px;
}
40%{
left: -200px;
}
60%{
left: -300px;
}
80%{
left: -400px;
}
/*
100%{
left: -500px;
}
*/
99.9%{
left: -500px;
}
100%{
left: 0px;
}
}
.b{
width: 600px;
height: 100px;
position: absolute;
display: inline-block;
animation: banner 5s infinite;
}
.b:hover{
animation-play-state: paused;
}
img{
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="b">
<img src="./1.png" alt="">
<img src="./2.png" alt="">
<img src="./3.png" alt="">
<img src="./4.png" alt="">
<img src="./6.png" alt="">
<img src="./1.png" alt="">
</div>
</div>
</body>
二十九.悬浮效果可以控制子元素 孙元素 或兄弟元素
三十.实现拐弯边框:
1. 可使用透明伪元素遮挡
2. 利用绝对定位调整层级的方式 遮挡
三十一.input
默认带有边框
outline 轮廓线不会占用空间
三十二.HSLA(H,S,L,A)
取值介绍:
H:
Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S:
Saturation(饱和度)。取值为:0.0% - 100.0%
L:
Lightness(亮度)。取值为:0.0% - 100.0%
A:
Alpha透明度。取值0~1之间。
使用说明:
HSL记法。
此色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度。
三十三.省略号
单行省略号(块元素)
p {
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行省略号
div {
width: 50px;
display: -webkit-box;
-webkit-box-orient: vertical;
/* 指定子元素垂直排列 */
-webkit-line-clamp: 3;
text-overflow: ellipsis;
text-align: justify;
/* 行数 */
overflow: hidden;
}
三十四.常用转义字符
空格
< <
> >
© @
三十五.box-shadow 盒阴影
box-shadow: 10px 10px 5px red;
/* x便宜量 y偏移量 偏移距离 阴影颜色 */
三十六.transform、translate、transation、transport
transform 位置、转换
transform:translate3d(10px,10px,10px);
transform:scale(1.2,1.2);
transform: rotate(-8deg);
text-transform: capitalize;
/* 首字母转大写 */
translate 翻译
<p translate="no">这个段落不能翻译。</p>
<p>这个段落可以被翻译</p>
transport 传输
transition 动画过渡
transition: width 5s;
三十七 .盒子不设高度内容撑开(脱离文档流的内容除外)
三十八.水平居中方法
margin:0 auto;
text-align:center;
left:50%;
display:flex;
父元素display:table-cell;子元素margin-left:剩余宽度的一半
三十九.垂直居中
1. display:flex
2. table-cell
3. margin,transform配合
4. inline-block+vertical-aligin
5. absolute+负margin
6. absolute+margin:auto 和方法5类似,当宽度和高度未知时使用
7. 方法7:absolute+transform 与方法5类似
8. 强大的grid
源文:https://blog.csdn.net/qq_43677117/article/details/109475579
四十.relative 定位不脱离文档流,重新定位后,之前的位置仍被占用
四十一.三角形
.box {
width: 0px;
height: 0px;
border-width: 0px 8px 8px 8px;
border-style: soild;
border-color: transprant transparent red;
}
eg:
.xiaosanjiao::after {
content: "";
width: 0px;
height: 0px;
border-width: 0 8px 8px;
border-color: transparent transparent white;
border-style: solid;
/* border: 4px solid transparent;
border-bottom: 4px solid rgb(206, 116, 116); */
position: absolute;
top: 19px;
left: 24px;
display: none;
}
#borderR:hover .xiaosanjiao::after {
display: block;
}
四十二.过渡效果
#borderR .erweima {
position: absolute;
top: 28px;
left: -25px;
width: 124px;
/* height: 148px; */
/* dizplay:none也不需要 */
background-color: #fff;
z-index: 100;
text-align: center;
box-shadow: 0px 5px 10px #c4c4c4;
/* 开始状态 */
height: 0;
transition: all 2s;
overflow: hidden;
}
#borderR:hover .erweima {
/* display: block; */
/* 结束状态 */
height: 148px;
}
四十三.表格
<style>
table{
text-align: center;
border-collapse: collapse;
}
</style>
<!-- cellspacing单元格外边距 cellpadding单元格内边距 align整体居中 width整体table宽度 height单元格高度 默认单位px border边框宽度 -->
<!-- td属性 align rowspan colspan -->
<table border="1" width="300" height="200" align="center">
<tr>
<td>第三节</td>
<!-- 跨行 -->
<td rowspan="2">语文</td>
<!-- 跨列 -->
<td colspan="2">语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<table>
<caption >表格的标题</caption>
<thead>
<tr>
<th>hd</th>
</tr>
</thead>
<tbody>
<tr>
<td>身体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚</td>
</tr>
</tfoot>
</table>
input 轮廓线
input{
/* 轮廓线,从边框位置向外延伸 不会占用空间 */
outline: none;
}
四十四.表单
<form action="./费用报销单.html" method="post">
用户名:<input type="text" name="username" placeholder="请输入用户名"><br>
密 码:<input type="password" name="password"><br>
<input type="submit" value="提交">
<input type="reset">
<button disabled="disabled"></button>
<button type="reset"></button>
<button type="submit"></button>
<input type="text"><button type="search">search1</button>
<br>
<!-- 颜色选择 -->
<input type="color">
<input type="date" name="" id="">
<input type="datetime" name="" id="">
<input type="datetime-local" name="" id="">
<input type="email" name="" id="">
<input type="file" name="" id="">
<input type="image" src="" alt="">
<input type="month" name="" id="">
<input type="number" name="" id="">
<input type="range" name="" id="">
<hr>
<!-- name提交数据必须要有 可以实现分组作用(单选框和多选框) checked默认选中 value值给程序员看-->
性别:
<input type="radio" name="gender" checked value="男"> 男
<input type="radio" name="gender" value="女"> 女<br>
爱好:
<input type="checkbox" name="hobby
"> 抽烟
<input type="checkbox" name="hobby"> 喝酒
<input type="checkbox" name="hobby"> 敲代码
<hr>
<!-- 下拉框 -->
地址:
<select name="address" id="">
<option value="郑州">郑州</option>
<option value="驻马店">驻马店</option>
<option value="周口">周口</option>
</select><br>
<!-- 文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
四十五.lable 扩大点击范围
<form action="./课程表.html">
<label for="username">用户名</label>
<input type="text" id="username">
<!-- 或者 -->
<label>
用户名<input type="text">
</label>
</form>
四十六.background-size:cover/contain属性
.box{
background-image: url("./1.jpg");
/* cover覆盖box,以最大宽度为准 */
/* background-size: cover; */
/* contain包含图片, 以最小宽度为准*/
background-size: contain;
}
<div class="image">
<img src="./2.jpg" alt="">
</div>
四十七.vertical-align属性
vertical-align: baseline;
// top 把元素的顶端与行中最高元素的顶端对齐
// text-top 把元素的顶端与父元素字体的顶端对齐
// middle 把此元素放置在父元素的中部。
// bottom 使元素及其后代元素的底部与整行的底部对齐。
// text-bottom 把元素的底端与父元素字体的底端对齐。
// length 将元素升高或降低指定的高度,可以是负数。
// 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
四十八.transform属性
transform: translate3d(10px, 20px ,30px);
// translate(x,y) 定义 2D 转换
// translate3d(x,y,z) 定义 3D 转换
transform: scale(1.25,1.25);
// scale(x[,y]?) 定义 2D 缩放转换
// scale3d(x,y,z) 定义 3D 缩放转换
transform: rotate3d(100,30,40,350deg);
// rotate(angle) 定义 2D 旋转,在参数中规定角度
// rotate3d(x,y,z,angle) 定义 3D 旋转