1.css的引入
行内样式
<body>
<div style="color:pink; font-size: 12px;">开心</div>
</body>
外部引入
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css">
</head>内部引入
<head>
<style>
div {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<div>开心</div>
</body>2.选择器
优先级：那个更精准那个优先级高
通用选择器
*{}选中所有标签
标签选择器
p{}，div{},span{}，a{}
类选择器
.one{} ,class='one two'
<head>
<meta charset="utf-8" />
<title></title>
<style>
.al{
}
</style>
</head>
<body>
<div class="a1"></div>
</body>id选择器
#one{}，id=‘one’
<head>
<meta charset="utf-8" />
<title></title>
<style>
#al{
}
</style>
</head>
<body>
<div id="a1"></div>
</body>通配符选择器 *{}
属性选择器
[自创属性名]{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* 选择所有的拥有qwq属性的标签 */
[qwq]{
border: 1px solid pink;
}
/* qwq属性值加引号 */
/* 只给1加背景色 */
[qwq="1"]{
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<!-- qwq是自创的属性 -->
<li qwq="1">1</li>
<li qwq="2">2</li>
<li qwq="3">3</li>
</ul>
</body>
</html>后代选择器 div p{}(父选择器和子选择器之间用空格隔开)
会选中div里面所有的p，包括孙子p，孙孙子p·····父选择器或子选择器可以用上面,各种组合
子代选择器 div>p{}(父选择器和子选择器之间用大于号隔开)
会选中div里面的子p，孙子p不会被选中，父选择器或子选择器可以用上面组合
并集选择器 选择器1，选择器2{}(用逗号隔开)
父选择器或子选择器可以用上面所有的,各种组合
交集选择器 选择器1选择器2
p.a{}(选择用a类的p标签)
伪类选择器
(1).选择器:hover(鼠标悬停时的状态)
div:hover{}
a:hover{}
选择同等级的时候要加+
例子：鼠标上去盒子显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box1{
width: 50px;
height: 30px;
background-color: antiquewhite;
}
.box2{
position: relative;
display: none;
width: 100px;
height: 100px;
background-color: aqua;
}
.box3{
position: absolute;
top:-18px ;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color:red ;
}
.box1:hover+.box2{
display: block;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<div class="box3"></div>
</div>
</body>
</html>
(2). :link,:visited,:hover,:active,:focus
:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus "光标"：用于选取获得焦点的表单元素，input类的标签才可以使用
<style>
input{
width: 100px;
height: 20px;
}
input:focus{
/* input获得光标时背景出现 */
background-color: aqua;
}
</style>
</head>
<body>
<input type="text" name="" id="">
</body>(3).结构伪类选择器
p ：first-child(1)选择p的父级的第一个子p标签
p ：last-child(1)选择p的父级的最后一个子p标签
p ：nth-child(n)选择p的父级的第n个子p标签
p ：nth-last-child(n)选择p的父级的倒数第n个子p标签
相邻兄弟选择器 .box1+.box2 选中的是box1的同等级的第一个兄弟box2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box1+.box2{
width: 100px;
height: 100px;
background-color: aqua;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
niaaaa
</div>
</body>
</html>
通用兄弟选择器 .box1~p{} 会把box1同等级的所有p标签都选中
3.文字样式属性
(1).属性：
(2).属性对应的值
字体粗细：normal 正常，bold 加粗，400 正常，700加粗
字体样式：normal正常，italic倾斜
字体类型：宋体 黑体 其它字体(可以双引号加汉字）
连写： font: italic 700 66px 宋体;
(3).首行缩进，对齐方式
缩进：text-indent：xxpx；或xxem(em是当前文字的大小)
对齐方式：text-align:(left 左对齐 ，center居中， right右对齐)，可以让内容对齐，不管是图片还是标签
上下居中：要居中让line-heigth的值等于盒子的高
(4).文本装饰（下划线，无线，上划线）
text-decoration：（none无装饰,underline下划线)
(5).行高
line-height:xxpx 或 n(倍）；
(6).继承
所有控制字体的都能继承
4.单位
px像素
em取当前文字的大小，2em当前文字大小的2倍，首先查看自己有没有设置font-size:,没有就去查看父元素有没有设置。
rem相对与根元素html，默认的1rem=16px；
em和rem是设置字体大小的。
vw相对屏幕多宽，1vw=屏幕的百分之1宽
vh相对屏幕多高，1vh=屏幕的百分之1高
vw和vh是设置盒子的
一般组合使用
5.背景background
(1).颜色透明效果：background-color:rgba(0,0,0,.5);//黑色半透明
(2).背景图：background-img:url(图片地址)
(3).背景平铺：background-repeat：(repeat水平垂直都平铺 no-repeat不平铺 repeat-x水平 铺 repeat- y垂直平铺)
(4).背景位置：background-position:(水平位置 垂直位置)；
水平位置值：left center right (左中右)或xxpx
垂直位置值：top center bottom(上中下)或xxpx
(5).背景图缩放：background-size:contain
简写：background：color url(地址) repeat position;
6.块元素，行内元素，行内块元素
块级：占一行 div p ul li dl dt h1-h6，可以直接设置宽高，不设置高默认内容的高
行内：一行多个 a span 设置宽高无效，宽高是内容的宽高
行内块：一行多个，可以加宽高 input textarea button select
元素模式转换
display:block; 转为块
display:inline-block; 转为行内块
7.盒子模型
从内到外：内容>内边距pad>边框border>外边距mar
内边距pad：pad和border会撑大盒子
导航栏的每一项可以不用加宽度，使用padding来撑开li。
如果盒子没有指定width，那么padding的左右没效果
如果盒子没有指定height，那么padding的上下没效果
自减操作：给盒子添加属性box-sizing:border-box;
嵌套块元素垂直外边距塌陷问题
如果两个块级盒子是父子关系，父元素和子元素都要mag-top那子元素的mag-top不生效，
如何子元素外边距塌陷问题
(1）.可以为父元素定义上边框或边框
(2).可以为父元素定义上内边距
(3).可以给父元素添加overflow：hidden
如何清除内外边距：
*{
margin: 0;
padding: 0;
}如何让版心居中：(网页内容居中)
margin: 0 auto;
行内元素的mar，pad的垂直方向无法生效问题
用line-heigth
8.浮动
(1).浮点特点
会脱标，不占位置了，但是内容还在，可以让块级元素横向排列.
浮动元素，只会压住下面标准流的盒子，不会压住内容
但是绝对定位和固定定位会压住下面标准流的所有内容
浮点元素会具有行内块元素的特点，不管什么元素都可以设置宽高了
绝对定位和固定定位压内容
(2).清除浮动
给浮动元素的父标签加一个clearfix类
.clearfix::before,.clearfix::after{
centent:"";
}
.clearfix::after{
clear: both;
}9.定位(position)
(1).为什么需要定位
定位可以让某个元素自由的在一个盒子内移动，并且压住其它盒子。
加了定位的元素都有了行内块特点。
(2).定位组成
定位=定位模式+边偏移
(3).定位模式
| position定位模式 | 是否脱标 | 使用场景 |
| relative相对定位 | 不脱标，相对之前的位置移动 | 大盒子里面小盒子，大盒子使用相对定位 |
| absolute绝对定位 | 脱标，如果父盒子有定位，相对父盒子移动，如果没有，就相对屏幕移动 | 大盒子里面小盒子，小盒子使用绝对定位 |
| fixed固定定位 | 脱标 | 某些东西固定在屏幕上，或者固定在版心右边，返回顶部 |
| sticky粘性定位 | 不脱标，有相对定位和绝对定位的特点，必须添加top，bottom，left，right中的一个 | top:10px; 距离屏幕上方10px时，变成粘性定位，固定在屏幕上，不往上移 |
(4).边偏移
left ，top， right， bottom 都写了的话，left和top生效
(5).使用场景
1).固定在版心的右侧位置，不管放大还是缩小都在版心旁边
先让固定定位盒子left：50%
再让固定定位的盒子margin-left:版心的一半
2).如何让绝对定位的盒子居中？不能使用margin：0 auto;已经失效了 ，
方法一：
left:50%;
margin-left:-100px;方法二：
left:50%;
transform:translate(-50%,-50%);第一个值是水平居中，向左移动自己宽度的50%。第二个值是垂直
3).轮播图的左右按钮，下面的小按钮，使用绝对定位
10.盒子层级问题
(1).标准流<浮动<定位
(2).默认情况下，定位的盒子，后来的在上面；
z-index:取值越大，显示在最上面；有定位的元素才能生效。
11.装饰(垂直对齐方式，光标类型，边框圆角，overflow溢出，元素隐藏，元素透明,盒子阴影，input轮廓线,文本域取消放大缩小)
1.vertical-align垂直对齐方式(只有行内块和行内元素有这个问题）
场景1：浏览器遇到行内和行内块标签垂直方向不对齐，默认是按文字基线对齐，把他当作文字处理了。
场景2：盒子没有高度，里面有图片，给图片设置为middle对齐
场景3：盒子有高和宽，里面有图片，让图片水平垂直居中。给盒子加ling-heigth:盒子高,给图片加vertical-align：高
图片和文字，按钮和文字，不给文字加vertical-align，给不是文字的加
2.光标类型，属性名cursor
not-allowed禁止样式
3.边框圆角
border-radius:xxpx;（圆角半径）
从左上角开始赋值，没有四个值看对角
4.溢出overflow
5.元素显示与隐藏
(1). display显示隐藏
取block，inline，online-block显示元素
取none隐藏元素，不在占位置，下面的盒子会上来,没有把他删除，隐藏了
(2).visibility可见性
取visible，元素可视
取hidden，元素隐藏，继续占用原来位置
(3).overflow溢出显示与隐藏，上面的
6.元素透明opacity
opacity:0~1;会让整个元素包括里面的内容都变透明。
7.盒子阴影box-shadow(文字阴影同)
8.取消input轮廓线
outline:none;9. 取消文本域textarea的放大缩小
resize:none;12.过渡transition
一般配合hover使用
给需要过度的元素加，哪个盒子的属性要变化就给那个盒子加
transition:width 3s,heigth 4s;//
transition:all 3s;//所有要改变的属性都要效果
例：鼠标移动上去盒子宽度在3s内变为200px
div{
width: 100px;
height: 100px;
background-color: aqua;
}
div:hover{
transition:width 2s;
width: 200px;
}13.精灵图
为社么使用精灵图？
减少发送请求的次数，把所有的小图标(背景）合成一个大图，请求一次就够了
怎么使用精灵图？
background-position:（右移10）10px，（下移10）10px
14.字体图标
图标下载
15.css三角
盒子的宽高都是0，边框是透明的，根据三角形方向给某条边框赋元素
边框透明border:10px solid transparent;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<style>
.box1{
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid orange;
border-bottom: 10px solid yellow;
border-left: 10px solid skyblue;
}
.box2{
width: 0;
height: 0;
border: 10px solid transparent;
/* transparent 边框是透明的 */
border-top-color:red;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
16.移动端基础
(1).meta视口标签
其中width的特殊值式设备宽度的意思
标准的写法：
注意：content用双引号把其它包裹起来
<meta name="viewport" content="width=device-width, initial-scale=1.0
minimum-scale=1.0 ,user-scalable=no">(2).物理像素，物理像素比
物理像素：1px在屏幕上显示多大，就是分辨率
pc端1px=1个物理像素点
移动端1px不等于1个物理像素点
iphone8 ：开发尺寸（375X667）px
分辨率(750x1334)
物理像素比：2
1px就可以被手机放大2倍
(3).二倍图,多倍图
1).为社么需要二倍图?
把一个50x50px(css)图片直接放到iphone手机上放大为100x100，会模糊
2).怎么解决
设计图750px的，css写的时候全缩小一半，到了
我们准备放一个100*100的图片，再通过css设置为50*50，到手机里又变为100*100，不会模糊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0
minimum-scale=1.0 ,user-scalable=no">
<title>Document</title>
<style>
img {
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<img src="../image/a100.jpg" alt="">
<!-- 一张100*100的图，通过css设置为50*50，这样放大就不会模糊 -->
</body>
</html>17.响应式布局
(1).媒体查询
1).基本语法
CSS媒体查询（@media）全面解析_css media-CSDN博客
@media mediatype and|not|only (media feature) {
css代码
}
用@media开头
mediatype 媒体类型，是电脑还是手机还是打印机，收音机，ipad，等等
and not only 和,不,唯一,是连接词
media featrue媒体特性，屏幕多宽啊
| mediatype媒体类型 | 解释说明 |
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| scree | 用于电脑屏幕，ipad，手机 |
| media featrue媒体特性 | 解释说明 |
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域的宽度 |
| max-width | 定义输出设备中页面最大可见区域的宽度 |
例：
<head>
<meta charset="utf-8" />
<title></title>
<style>
@media screen and (max-width:800px){
/* 在我屏幕上，并且最大宽度是800px */
/* 小于800px */
body{
font-size: 10px;
}
/* 在小于800px的屏幕上字体10px */
}
@media screen and (min-width:700px) {
/* 在我的屏幕上，并且大于700px */
body{
background-color: aqua;
}
}
</style>
</head>
<body>
</body>
</html>
2).媒体查询+rem实现元素动态大小变化
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* 从小到大 */
@media screen and (min-width:320px){
/* 屏幕大于320px时 */
html{
font-size: 50px;
}
}
@media screen and (min-width:640px) {
/* 屏幕大于640px时 */
html{
font-size: 100px;
}
}
.top{
height: 1rem;
font-size: .5rem;
background-color: green;
color: #ffff;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
</html>3).资源引入
css样式多时，针对不同屏幕，可以通过link 引入对应的样式
例：当我们屏幕大于640以上的，我们让div一行显示2个；小于640px时，div一行一个*/
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--当我们屏幕大于640以上的，我们让div一行显示2个*/
小于640px时，div一行一个*/
建议：媒体查询最好从小到大-->
<link rel="stylesheet" href="css/new320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="css/new640.css" media="screen and (min-width:640px)">
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>new320.css文件(屏幕大于320px时的样式)
div{
width: 100%;
height: 100px;
}
div:nth-child(1){
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}new640.css文件(屏幕大于640px时的样式)
div{
width: 50%;
height: 100px;
float: left;
}
div:nth-child(1){
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}(2).less(css预处理器)
1).less变量
格式：@变量名:值；
规范：必须以@为前缀
不能包含特殊字符
区分大小写
例:定义一个粉色变量
2).less编译
编写的less文件html不能直接使用。
需要安装插件继续编译，把less文件编译为css文件
在vocode安装easy less，在保存less文件时会自动生成css文件
less文件：
@color: blue; //颜色变量
@font14: 14px; //字体变量
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
a {
font-size: @font14;
}对应的css文件：
body {
background-color: blue;
}
div {
color: blue;
font-size: 14px;
}
a {
font-size: 14px;
}3).less嵌套
(1).子元素样式直接写到父元素里面
(2).伪元素前面加&
例：
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="my.css">
</head>
<body>
<div class="header">
<a href="#">文字</a>
</div>
<div class="nav">
<div class="ni">你好</div>
</div>
</body>
</html>less文件
.header {
width: 100px;
height: 100px;
background-color: aqua;
// 子元素的样式直接写到父元素里面
a {
color: red;
// 伪元素前面加&
&:hover {
color: blue;
}
}
}
.nav {
.ni {
color: green;
}
}4).less运算
less文件
除法要加括号
注意单位
// 1.可以直接加减乘除
// 2.运算符左右加空格
// 3.两个数参与运算，如果只有一个数由单位，结果就以这个单位为准
// 4.两个数参与运算，如果2个数都有单位，且不一样，以第一个数的单位为主
@border: 5px + 5;
@basefont: 50px;
html {
font-size: @basefont;
}
div {
width: (100px - 10) * 1;
height: 100px - 10;
border: @border solid red;
}
// 不支持除法，要加括号
img {
width: (82rem / @basefont);
height: (82rem / @basefont);
}5).rem适配方案
怎么算每个盒子有多少rem?
一般把屏幕分为10份或15份,然后
屏幕宽度/10=文字大小
原图/文字大小=多少rem
技术方案1：
less，媒体查询，rem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (min-width:320px) {
html {
font-size: 21.33px;
}
}
@media screen and (min-width:640px) {
html {
font-size: 50px;
}
}
div {
width: 2rem;
height: 2rem;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>技术方案2：(简单)
flexble.js
rem
(3).flex布局
Flex 布局语法教程 | 菜鸟教程 (runoob.com)
1870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
