CSS基础知识
1.css的使用方式（内联样式 内部样式 外部样式）;
(1)内联样式 <元素 style="color:red;font-size:12px">内联样式</元素> 特点：样式不能重用 只对当前元素有效 默认优先级最高
(2)内部样式<head>标签中添加<style></style> 选择器{样式1;样式2} 特点：内部样式可以重用 仅在当前页面使用
(3)外部样式 单独创建.css文件 哪个html需要在head中link引入文件 特点：样式可以重用广泛
<!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">
<style>
#d1{
color:pink;
font-size:14px;
}
</style>
<link rel="stylesheet" href="">
</head>
<body>
<div style="color:red;font-size:12px">内联样式</div>
<div id="d1">内部样式</div>
<div id="d3">外部样式</div>
</body>
</html>
CSS的特点
2.css的特点
(1)继承性 ：外层标签的样式会被内层使用
(2)层叠性 ：为元素定义多种样式声明 不会冲突 如果样式重复根据优先级执行
(3)优先级 ：如果为一个元素定义多个样式，样式中发生了冲突高 内联样式内部样式和外部样式 低 浏览器默认样式
(4)调整默认优先级 ：在样式取值和分号之间添加关键字!important
基础选择器
1.通用选择器
*{margin:0;padding:0}所有内外边距清0
*{box-sizing:border-box}改变所有元素的盒子模型计算方式
由于不同浏览器厂商给元素的默认样式不同，所有开发之前，要进行清除和统一
这个行为叫做写css reset 样式重置
2.标签选择器，元素选择器
标签的关键字{样式声明;} div{color:red;}
3.根据元素id值，来匹配元素 <任意元素 id="d1"> #d1{样式声明；}
4.把常用样式封装进类选择器中 .类名{样式;} <任何元素 class="类名 类名1 类名2">
5.类选择器的变种 1.同时调用多个类名的元素要执行某个样式.类名1.类名2{样式声明} .font-36.bg-pink{color:yellow;}
2.匹配应用某个类名的具体元素 元素选择器.类选择器{样式声明} div.bg-pink{font-size:100px;}
6.群组选择器 使用逗号分割，让多个选择器使用同一个样式 h1,h2,h3,h4,h5,h6{margin:o;}
6.后代选择器 根据元素的后代关系来匹配元素 选择器 选择器 选择器 ......{样式声明} 空格是后代 隔多少层都可以
8.子代选择器 根据元素的子代关系匹配元素 #content>p>span{color:red;}
9.伪类选择器
描述某个元素在某种特殊状态的样式
/* 连接未被访问时的状态 */
a:link{color: red;}
/* 连接已被访问过的状态 */
a:visited{color:gray}
/* 鼠标悬停在元素上时的状态 */
a:hover{font-size: 32px;color: purple;}
/* 元素被激活时的状态 */
a:active{color:green;}
/*匹配元素获取焦点时的样式*/
:focus{样式声明}
overflow 溢出处理
overflow: visible;默认值
hidden; 溢出隐藏
scoll; 不管是否溢出都添加滚动条
auto; 只有溢出的时候才增加滚动条
overflow-x
overflow-y 可以单独设置x/y轴是否添加滚动条
box-shadow 阴影
box-shadow: 0 0 0 0
h-shadow 阴影水平偏移距离
v-shadow 垂直偏移距离
blur 扩散距离，模糊程度
spread 阴影大小
color 颜色
inset 内部阴影,不写就是外部阴影
<!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>
#c{
margin-top:200px;margin-left: 200px;
width: 200px;height: 200px;
border:2px solid #fff;
border-radius:50%;
box-shadow:0px 0px 100px 100px #fff;
}
</style>
</head>
<body bgcolor="#000">
<div id="c"></div>
</body>
</html>
outline 轮廓
outline: 0; 清除文本框自带的轮廓
outline：width style color;
轮廓是描绘在边框之外的一圈线条，项目中经常要清除
可以在当前input样式中清除，也可以在：focus中清除
盒子模型
框模型-----元素在页面上实际占地大小的计算方式
所有元素皆为框，所有元素默认在页面都占据空间
默认框模型的计算公式
元素实际的占地宽度=左外边距+左边框+左内边距+内容区域的width+右内边距+右边框+右外边距
元素实际的占地高度=上外边距+上边框+上内边距+内容区域的height+下内边距+下边框+下外边距
外边距，边框以外的距离，元素与元素之间的距离，margin
内边距，边框到内容区域之间的距离
f12中，内容区域---蓝
内边距----绿
边框------黄
外边距----橘黄
外边距的溢出问题：在特殊情况下 子元素的上外边距或作用父元素上
特殊的情况：1.父元素没有上边框
2.父元素内容区域的上沿和子元素内容区域的上沿重合
解决方案：1.给父元素添加上边框，弊端，增加了父元素的实际占地高度
2.给父元素添加上内边距，弊端，增加了父元素的实际占地高度
3.overflow:hidden/auto写在父元素上，父元素被设置溢出隐藏
4.给父元素空table元素
浏览器页面上看不到这个空table，
但是浏览器判定父元素内容区域的上沿和子元素内容区域的上沿分离了
改变盒子模型的计算方式
box-sizing: content-box; 默认的盒子模型计算方式
左右外边距+左右边框+左右内边距+设置的width
content--->我们设置的width是内容区域的宽度
border-box 盒子模型计算方式：左右外边距+设置的width
border---->我们设置的width包含，
左右边框+左右内边距+内容区域宽度
width设置%一般都是用border-box
这样设置的好处，不用计算，直接用%和padding完成元素排列，与元素之间的空隙
背景样式
1.背景颜色 background-color : transparent;
2.背景图片 background-image:url("图片路径")
3.背景图片平铺 background-repeat : repeat 平铺默认 no-repeat 不平铺 repeat-x X轴平铺 repeat-y y轴平铺
4.背景图片定位 background-position:x y ; left right center top bottom
5.背景图片尺寸 background-size:x y ;设置一个值是x和y的尺寸 两个值是x ，y的尺寸 cover填充容器 contain 完全显示
6.背景图片固定 background-attachment: scroll 默认 fixed 背景固定不会随着页面滚动条滚动
7.简写方式 background:color url repeat attachment position; 简写中缺少siz
渐变 background-image
background-image 多种颜色变化的效果 一个渐变最少两个色标
例：background-image:linear-gradiend(方向,色标 0%,色标 100%)
方向的取值：to top to bottom to right to lefr; 也可以取值角度 45deg;
线性渐变：background-image:linear-gradient(方向,色标,色标)
径向渐变：background-image:radial-gradient(半径 at 圆心 ,色标,色标) #圆心x y轴 也可以写center
重复渐变：径向渐变和线性渐变重复的运行
background-image:repeating-linear-gradient(方向,色标,色标......);
background-image: repeating-radial-gradient(半径 at 圆心,色标,色标);
不同公司的浏览器内部核心代码
-webkid- chrome/safari
-moz- firefox
-ms- IE
-o- opera
1.要在linear-gradient之前添加前缀
2.添加4个前缀，所有写4遍，代码会自动判断你用的是哪种内核，自动适配
3.一旦添加了内核前缀，方向中只能写起点（不加to） left
不写内容，方向一定写终点(to right)
例子：
background-image: -webkit-linear-gradient(left,色标 ,色标)
字体属性
1.font-size:px/rem/pt 字体大小
2.font-family:字体系列
3.font-weight:normal默认值 bol加粗 bolder更粗 lighter细
4.font-style: normal默认值 italic斜体
5.font-variant:smll-caps小型大写字母
简写方式：
font: style variant weight size family；顺序不可以变化
最简方式：size family
文本属性
1.字体颜色 color
2.文本水平对齐方式 text-align：left(默认值)/center/right/justify 两端对齐
3.文本对齐方式行高:line-height:px 如果行高大于字号大小,那么文本会默认在行高的垂直中心显示
4.文本线条: decoration : underline下划线 overline上划线 line-through删除线 none去线条
5.首行缩进： text-indent：px
6.文本阴影：text-shadow ： h-shadow(x轴偏移量) v-shadow(y轴偏移量) blur(模糊距离) color(阴影颜色)
表格属性
table：尺寸，背景，边框，文本，内外边距都生效 设置边框时，只会给最外层添加边框
td/th: 尺寸，背景，边框，文本，内边距生效,外边距无效 vertical-align:设置td/th中文本的垂直对齐方式，其它元素无效 top/middle/bottom
设置单元格之间的间距 前提 单元格必须是分离状态 border-spacing：20px
单元格合并 border-collapse：separate 默认值分离状态 collapse 合并状态
表格标题的位置 caption-side:top/bottom
自动布局 table-layout:auto; 默认值 固定布局 table-layout:fixed;
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
