CSS三大样式
一、盒子模型
border 边框
box-sizing：固定盒子大小
box-sizing：border-box;
border-style：（可以设置单独上下左右的样式）
-
botted 点线
-
dashed 虚线
-
solid 实线
-
double 双线，两个边界，宽度和border-width的值相同
-
groove 3D沟槽边界，效果取决于边界颜色值
-
rigde 定义3D脊边界，效果取决于边界的颜色值
-
inset 定义一个3D的嵌入边框，效果取决于边界的颜色值
-
outset 定义一个3D的突出边框，效果取决于边界的颜色值
简写方法：border：width style color；
css3的边框样式：
border-color 边框颜色
border-color：transparent； 透明边框
border-image 边框图片
border-image-source：指定border的背景图的url
border-image-slice：设置图片如何切割的属性，非定位
border-image-slice：上 下 左 右
border-image-width：定义border-image的显示区域
border-image-repeat：repeat有三个值选择。
stretch|repeat|round：拉伸|重复|平铺，其中stretch是默认值
box-shadow：阴影效果 书本P19
box-shadow：x轴偏移量 | y轴偏移量 | 阴影模糊半径 | 阴影扩展半径 | 阴影颜色 | 投影方式
border-radius： 圆角边框
border-radius：1~4 length |% / 1~4 length |%；
-
1~4：设置1~4个值 。
-
length：设置对象的圆角半径长度，不可以是负值。
-
|%表示可以写成百分比
-
“/”前有值，表示水平半径；后有值，表示垂直半径。后无值，表示水平半径和垂直半径相等。
margin 外边距
margin: 0 auto; 水平居中
margin：上 下 左 右；
padding 内边距
padding：上 下 左 右；
二、浮动
利用浮动将多个<div>放置在同一行
解决高度坍塌的办法：
-
清除浮动：clear
给父元素内部添加一个空的<div>元素，设置：clear：both
值 描述 left 在左侧不允许浮动 right 在后侧不允许浮动 both 在左右两侧均不允许浮动元素 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承clear属性的值 -
利用伪类：：after
利用伪类：：after来清除浮动，跟跟上面的添加一个空元素来解决浮动是差不多的意思，但是不会凭空添加无意义元素，而是通过伪类的方式。
例：在父元素（.container）中直接添加css样式（.clearfix）
<div class="container clearfix">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>解决高度坍塌代码（万能代码，直接拿去用就好）
.container::after {
content: "";
display: block;
clear: both；
}
三、定位
主要目的：移动位置
| 定位模式 | 是否脱标占位置 | 是否可以边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态定位 static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位 revative | 不脱标，占有位置 | 可以 | 相对于自身位置的移动 |
| 绝对定位 absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置 |
| 固定定位 fixed | 完全脱标 | 可以 | 相对于浏览器移动位置 |
| 粘滞定位 sticky |
相对定位 relative
相对定位的特点： 1.元素开启相对定位以后 如果不设置偏移量(offset) 元素不会发生任何变化 通过偏移量设置元素的位置: top:定位元素和定位位置上边的距离 bottom:定位元素和定位位置下边的距离 left:定位元素和定位位置左边的距离 right:定位元素和定位位置右边的距离 2.相对定位是参照与元素在文档流中的位置进行定位的 3.相对定位会提升元素的层级 4.相对定位不会使元素脱离文档流 5.相对定位不会改变元素的性质 块还是块 行内还是行内
绝对定位 absolute
绝对定位特点: 1.开启绝对定位后 如果不设置偏移量 元素位置不会发生变化 2.开启绝对定位后 元素会从文档流中脱离 3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开 4.绝对定位会使元素提升层级 5.绝对定位是相对于其包含块进行定位的
包含块(containing block): 正常情况下包含块就是离当前元素最近的祖先块元素
绝对定位的包含块：
离它最近的开启定位的祖先元素 如果所有的祖先元素都没有开启定位 则相对于根元素进行定位 html(根元素，初始包含块)
固定定位 fixed
-
固定定位也是一种绝对定位 所以固定定位的大部分特点和绝对定位一样
-
唯一不同的是 固定定位永远参照于浏览器的视口(浏览器可视窗口)进行定位
-
固定定位的元素不会随滚动条滚动上去 而是跟随可视窗口的移动而移动
粘滞定位 sticky
-
粘滞定位的特点和相对定位基本一样
-
粘滞定位可以在元素到达某个位置时固定
元素层级
-
对于开启定位的元素，可以通过z-index属性来指定元素的层级
-
z-index需要一个整数作为参数，值越大的元素的层级越高
-
元素层级越高的越优先显示
-
如果元素层级一样 则优先显示靠下的
-
浙公网安备 33010602011771号