盒子模型1：
盒子模型剖析及浮动与定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
</head>
<style>
/* 边框属于盒子边缘，边框大小会影响盒子大小
设置边框至少设置三个样式：边框高度（border-width）颜色（border-color）样式（border-style）
45讲 */
.box1{
width: 100px;
height: 100px;
background-color: aqua;
border-width: 20px;
/* 有默认值，一般是三个像素，可以用来指定四个方向的宽度，
写四个值时（10px 20px 30px 40px）上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
除了border-width还有一组 border-xxx-width
xxx：（left;top;bottm;right）下面两个同理*/
border-color: aqua;
/* 指定边框颜色，语法和border-with一样
没有border-color时默认为color的颜色 */
border-style: solid;
/* 指定边框样式,默认值是none 表示没有边框
solid 表示实线
dotted 点状实线
dashed 虚线
double 双线 */
border:30px solid red;
/* 简写属性：可以同时设置边框所有相关样式，无顺序要求,需要用空格隔开
同样有 border-xxx 语法
46讲*/
padding:100px;
/* 内边距（padding）：也有padding-xxx 语法，会影响盒子大小，背景颜色会延伸到内边距上
同时设置四个内边距时，语法和 border-width 一样
47讲 */
margin: 100px;
/* mairgin-x(top、left、right、bottm)外边距，可以下右外边距影响其它元素位置，可以为负值
48讲 */
margin-right: 200px;
/* 在一组父元素中，水平布局必须满足一下条件；margin-left+border-left+padding-left+width+padding-right+border-right+margin-left=800
等式必须满足，如果不成立，称为过度约束，会自动调整，如果某个值为auto，则自动调整auto的那个值
将两个外边距设置为auto，宽度固定值，则两外边距会相等，可以用此居中元素
49讲*/
overflow: hidden;
/* visible：默认值，子元素会从父元素中溢出。在父元素外部显示
hidden：溢出内容将会被裁剪不显示
scroll：生成两个滚动条，通过滚动来查看完整内容
auto：根据需要生成滚动条
50讲*/
/* 外边距的折叠：
垂直相邻的外边距会取较大值的一边，如果两外边距一正一负则去和，两负则取绝对值大的
父子元素相邻的外边距，子元素会传递给父元素
兄弟元素间相邻的垂直外边距去最大值
如果一正一负取和，都是负值取绝对值大的
51讲*/
display: inline;
/* 行内元素的盒模型
行内元素不能设置宽度和高度，只能由行内内容决定
可以设置boder，margin和padding，不会影响布局，会覆盖其它元素
display：用来设置元素显示的类型
可选值：inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素，既可以设置高度又不会独占一行
table 将元素设置为一个表格
none 元素不在页面中显示*/
visibility:hidden
/*用来设置元素的显示状态
可选值：visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏，不显示，但是依然占据元素位置52讲 */
/* 去除浏览器默认样式：
浏览器有默认外边距，去浏览器查看body，list-style:none 去除项目符号
reset.css：直接去除浏览器的默认样式
normalize：对默认样式进行统一 */
box-sizing:content-box;
/* content-box 默认值，宽高用来设置内容区的大小，可见框往外扩展
border-box 宽高就表示整个盒子的大小，设置的可见框会占用宽高的值
58讲*/
outline: 10px red solid;
/* outline 用来设置元素的轮廓线，语法和border一样
轮廓不会影响可见框的大小,不会影响布局 */
box-shadow: 10px 10px 50px rgba(0, 0, 0, .3);
/* box-shadow 用来设置阴影效果，不会影响布局，语法(水平偏移量 垂直偏移量 阴影的模糊半径 颜色rgba( , , , . ))
负值向左和向上显示，一般颜色都用rgba设置 */
border-radius: 10px 20px 30px 40px;
/* 设置圆角 语法和border一样，从左上角开始
border-radius:50% 无论元素多大都会变成圆形
59讲 */
opacity: 0.5;
/* 设置背景与图像不透明度，(0.0~1.0) */
background-clip: border-box;
/* 设置背景图片的显示区域，是否延伸到边框下面
属性值：border-box,padding-box,content-box*/
}
/* 浮动与定位： */
.box1{
float: none;
}
/* 63-65讲
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
浮动元素不会从父元素中移出，不会超过前面的其它元素
只有前面元素也浮动时才可以使水平排列
浮动元素的高度不会超过其兄弟元素
浮动不会盖住文字，文字会自动环绕在浮动元素的周围
元素浮动以后脱离文档流，块元素不再独占一行 行内元素脱离文档流后变成块元素
高度塌陷问题：
在浮动布局中，父元素的高的是被子元素撑开的，当子元素浮动后，就会完全脱离文档流
父元素高度丢失后下面的元素会自动上补
BFC：块级格式换环境
CSS的隐含属性，开启后该元素会变成一个独立的布局区域
开启BFC的元素不会被浮动元素覆盖，子元素和父元素的外边距不会重叠
可以包含浮动的子元素
可以通过设置overflow=""开启BFC
也可以通过设置浮动，设置为行内块元素（不推荐） */
/* clear:left
clear:right
left：清除左侧浮动元素对当前元素产生的影响
right：清除右侧浮动元素对当前元素所产生的影响
both：清除两侧中最大影响的那一侧
原理：设置浮动后，浏览器会自动为元素添加一个上外边距
66讲
用css的::after伪类设置clear撑开被浮动的元素，::after设置的是行内元素，所以还需要结合display */
.clarfix::before,
.clarfix::after{
content: '';
display: table;
clear: both;
}
/* clearfix可以同时解决高度塌陷和内边距重叠问题
68讲*/
.box1{
position: relative;
}
/* postion: ; 定位，可以将元素设置在任意位置，并且不会影响其它元素
static：默认值
relative：开启元素的相对定位(原点在元素本来的位置)，会提升元素的层级，不会脱离文档流，不改变元素性质
absolute：绝对定位 , 会脱离文档流，改变元素性值，块变行内，行内变块，提升层级
相对于包含块(当前元素最近的祖先块元素)进行定位，原点在离它最近开启了相对定位的祖先元素
如果所有祖先元素都没开启相对定位，根元素（html）就是包含快（原点）
可通过设置四个方向为零，margin:auto;来居中元素
fixed：固定定位 ，与绝对定位唯一不同的是参照于浏览器视口（浏览器的可视窗口）进行定位，
会随网页滚动条滚动而滚动
sticky：粘滞定位 ， 和相对定位类似，粘滞定位可以在下拉滚动条时到达某个位置将其固定
偏移量（offset）
通过偏移量设置元素的位置
top: ; bottom: ; left: ; right: ;
对于开启了定位的元素，可以通过z-index属性指定元素的层级，整数值越大层级越高
祖先元素层级再高也不会盖住后代元素
69-73讲*/
</style>
<body>
<!-- 所有元素都是盒子模型 -->
<div class="box1"><div class="box2"></div></div>
</body>
</html>
盒子模型2：
过渡及动画
<!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>
/*几何转换：*/
.box1{
transform: rotate(90deg); /*顺时针旋转90度*/
}
/* 过渡： */
.box1{
width: 200px;
height: 200px;
background-color: aqua;
animation: test;
}
/*结合伪类选择器一起使用*/
.box1:hover{
background-color: blue;
transition-property: all;
/* 指定过渡的属性 上下左右，所有*/
transition-duration: 2s,1s;
/* 指定过渡效果的持续时间，用","可以指定不同方向的时间 */
transition-timing-function: ease;
/* ease:默认值，先加速再减速
linear:匀速运动
ease-in:加速运动
ease-out:减速运动
ease-in-out:先加速后减速
cubic-bezier() 来指定时序函数，（https://cubic-bezier.com）
steps(2，end) 分布执行过渡效果
可以设置一个第二个值
end 在时间结束时执行过渡
start 在时间开始时执行*/
transition-delay: 2s;
/* 过渡效果延迟 */
transition: 2s all ease ;
/* 可以设置过渡相关的所有属性，两个时间第一个是持续时间，第二个是延迟时间
115讲*/
/* 动画 */
animation: test 2s ;
/* 所有动画属性的简写属性 */
animation-name: test;
/* 规定动画的名称 */
animation-duration: 2s;
/* 规定动画完成的时间 */
animation-iteration-count: infinite;
/* 规定动画的循环次数
infinite:无限执行 */
animation-direction: normal;
/* 指定动画运行方向
normal 从from向to执行
reverse:从to向from执行
alternate 从from向to运行，重复执行时反复执行 */
animation-fill-mode: none;
/* none 默认值 动画执行完毕元素回到原来的位置
forwards 动画执行完毕元素会停在动画的结束位置
backwards 动画延时等待时，元素会处于开始的to位置
both 结合forwards和backwards */
}
/* 动画：*/
@keyframes test{
from{
/* 动画开始的位置 */
}
to{
/* 动画结束的位置 */
}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
7974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
