css三大特性
层叠、继承、优先级
层叠性
指的是多种css样式叠加。
例如 ：
a {
font-size: 16px;
}
a {
font-size: 18px;
}
一个属性通过两个选择器设置到同一个元素上，后面的会把前面的层叠掉。所以a标签的字体大小为18px;
继承性
子标签会继承父标签的某些样式，比如文本颜色和字号
优先级
继承样式的权重为0，行内样式优先权重为100，权重相同就遵循就近原则，！imprortant 优先级最高
从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。
从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css三大特性</title>
<style>
/* 层叠性 */
span,
div {
font-size: 16px;
}
span {
font-size: 30px;
}
/* 继承性 */
div {
color: red;
}
/* 优先级 */
.span1 {
border: 1px solid green;
}
#span1 {
border: 1px solid pink;
}
</style>
</head>
<body>
<div>
123
<span class="span1" id="span1">我是一个span标签</span>
</div>
</body>
</html>
属性 ----------- 权重
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
注意：不管多少个class选择器都比不上一个id，只是接近。
总结优先级：
- 使用了 !important声明的规则。
- 内嵌在 HTML 元素的 style属性里面的声明。
- 使用了 ID 选择器的规则。
- 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
- 使用了元素选择器的规则。
- 只包含一个通用选择器的规则。
总结：权重是优先级的算法，层叠是优先级的表现
盒子模型（CSS重点）
其实，css就三大模块：盒子模型、浮动、定位
盒子边框
语法：
border：border-width | | border-style | | border-color
边框属性—设置边框样式（border-style）
边框样式用于定义页面中边框的风格，常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
表格的细线边框
table{ border-collapse: collapse; }
border-collapse: collapse;表示边框合并在一起
盒子边框总结表
| 左边框 | border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色; | |
|---|---|---|
| 右边框 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色; | |
| 样式综合设置 | border-style:上边 [右边 下边 左边]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 |
| 颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 设置内容 | 样式属性 | 常用属性值 |
| 上边框 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色; | |
| 下边框 | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色; | |
| 边框综合设置 | border:四边宽度 四边样式 四边颜色; |
圆角边框(CSS3)
border-radius：左上角 右上角 右下角 左下角；
内边距（padding）
padding属性用于设置内边距，是指边框与内容之间的距离。
padding-top:上内边距
padding-right：右内边距
padding-bottom:下内边距
padding-left:左内边距
简写：padding：1 || 1 2 || 1 2 3 || 1 2 3 4
1个值 padding：表示上下左右边距
2个值 padding：表示上下边距 左右边距
3个值 padding: 表示上边距 左右边距 下边距
4个值 padding：表示上下左右边距
外边距（margin）
margin属性用来设置外边距，设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
margin: 和内边距一样
外边距实现盒子居中
可以让一个盒子水平居中，必须要满足的条件
1.必须是块元素
2.盒子必须指定了宽度
然后设置margin：0 auto；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外边距水平居中</title>
<style>
div {
width: 249px;
height: 249px;
line-height: 249px;
background-color: pink;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div>我是一个div元素 我要水平居中</div>
</body>
</html>
清除元素的默认内外边距
*{
margin：0；
padding：0；
}
注意：行内元素是只有左右内外边距的，没有上下边距
外边距合并
1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有上下外边距margin-top/bottom,则他们之间的margin不是margin-top和margin-bottom之和，而是两者之间的最大者，称外边距塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外边距塌陷</title>
<style>
div {
width: 350px;
height: 350px;
border: 1px solid #ccc;
}
.div1 {
background-color: pink;
margin-bottom: 50px;
}
/* 他们之间的外边距为70px,是两者的最大值 */
.div2 {
background-color: royalblue;
margin-top: 70px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
2.嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
margin-top: 100px;
/* border: 1px solid red; 解决外边距合并(塌陷)问题 */
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
解决方案：
- 可以为父元素定义1像素的上边框或上内边距。
- 可以为父元素添加overflow:hidden。
content宽度和高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
子元素在父元素里面垂直水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直水平居中</title>
<style>
* {
padding: 0;
margin: 0;
}
.outside {
width: 400px;
height: 400px;
background-color: pink;
margin: 0 auto;
position: relative;
}
.inside {
height: 200px;
width: 200px;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="outside">
<div class="inside"></div>
</div>
</body>
</html>
盒子模型布局稳定性
优先使用 width > padding > margin
原因：
1.margin会有外边距合并
2.padding会影响盒子大小，需要进行加减计算
Css3盒模型
box-sizing: content-box || border-box
1.box-sizing：content-box 盒子大小为width+padding+border
2.box-sizing：border-box 盒子大小为width
box-sizing 如果不设置 默认的值 就是
content-box: 优先保证内容的大小 对盒子进行缩放;
border-box: 让 盒子 优先保证自己所占区域的大小,对内容进行压缩;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div:first-child {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: content-box; /* 就是以前的标准盒模型 w3c */
padding: 10px;
border: 15px solid red;
/* 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box; /* padding border 不撑开盒子 */
border: 15px solid red;
/* margin: 10px; */
/* 盒子大小为 width 就是说 padding 和 border 是包含到width里面的 */
}
</style>
</head>
<body>
<div>
content-box
</div>
<div>
border-box
</div>
</body>
</html>
盒子阴影
text-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
例子：
img {
border:10px solid orange;
box-shadow:3px 3px 5px 4px rgba(0,0,0,1);
}
浮动（float）
css的定型机制有3种：普通流、浮动和定位
语法：选择器{float：属性值；}
属性值 -----------描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动
浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
