盒子模型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>