CSS02---盒子模型
2023-02-16
盒子模型
外边距margin
边框border
内边距padding
内容content
border边框
边框会撑大盒子
border-top
border-right
border-bottom
border-left
padding内边距
内边距会撑大盒子，4个值上，右，下，左。3个值上，左右，下。两个值上下，左右。
padding-top
padding-right
padding-bottom
padding-left
margin外边距
外边距不会撑大盒子，
margin-top
margin-right
margin-bottom
margin-left
margin:0 auto; 使盒子水平居中
box-sizing:border-box 浏览器自动减去边框和内内边距的大小，不会撑开盒子。
外边距折叠问题
垂直布局的两个盒子，同时设置外边距，只会生效最大的那个外边距。
外边距塌陷问题
互相嵌套的两个块级元素，设置子元素的margin-top值时，会作用在父元素上。
方法：给父元素设置border-top 或者 padding-top 使子元素和父元素分离。
设置overflow：hidden
设置浮动
将子元素变为行内块元素。
行内标签的内外边距上下方向的属性无法生效，可以通过设置行高来达到效果。
结构伪类选择器
E:first-child {} 第一个E子元素
E:last-child {} 最后一个E子元素
E:nth-child(n) {} 第n个E子元素
E:nth-last-child() {} 倒数第n个E子元素
结构伪类公式
偶数 2n even
奇数 2n+1 2n-1 odd
前5个 -n+5
第5个之后的 n+5
伪元素
伪元素必须要设置content属性，伪元素默认为行内元素。
::before 在父元素前面加伪元素
::after 在父元素后面加伪元素
浮动
浮动是为了使块元素在一行排列，浮动标签会脱离标准流，不占标准流的位置，会覆盖标准流。
下一个浮动元素会在上一个浮动元素后左右浮动，浮动的标签有行内块的特点。
float:left
float:right
清除浮动
1.给父级元素设置高度属性
2.在父元素的后面加一个元素，给元素设置属性clear:both
3.单伪元素清除法
.clearfix ::after{
content:""
display:
clear:both
}
4.双伪元素清除法(同时可以解决外边距塌陷问题)
.clear::before,
.clear::after {
content:""
display:table
}
.clear::after {
clear:both
}
定位
让元素自用摆放在网页的任意位置，用于盒子的层叠
解决问题：
1.解决盒子层叠现象
2.让盒子固定在某个位置
position: relartive 相对定位
absolute 绝对定位
fixed 固定定位
relative 相对定位
盒子占有原来的位置
仍具有原来标签的特点
相对于原来位置的改变
absolute 绝对定位（子绝父相）
相对于非静态定位的父元素进行定位（无非静态定位的父元素则根据浏览器进行定位）
脱离原来的位置，不在占有原来的位置。
改变标签的显示特点，具有行内块的特点。
绝对定位的盒子不能使用margin：0 auto进行水平居中。
position:absolute;
left:50%;
transform:translate(50%);
fixed固定定位
用于页面中固定的盒子的位置，
相对于浏览器的位置。
元素层级
标准流<浮动<定位
可以使用z-index提高元素的层级，数值越大层级越高。
CSS装饰
垂直对齐方式
vertical-align:baseline
top
middle
bottom
默认基线对齐
光标类型
鼠标的显示类型
cursor:pointer 小手
text 工字形
move 十字光标
边框圆角
border-radius
border-radius:50% 圆形
border-radius:width/2 胶囊形
溢出部分显示效果
overflow:hidden 隐藏
visible 显示
scroll 显示滚动条
auto 根据内容显示滚动条
元素显示与隐藏
visibility:hidden 元素隐藏但是仍占据原来位置。
display:none
元素透明度
opacity:0~1
精灵图
将项目中的多个小图整合为一张大图，减轻服务器的压力。
需要将盒子大小设置为要显示图片的大小，
将图片以背景方式设置
设置图片的位置background-position:x y
背景图片缩放
background-size:width height
百分比
contain 图片等比缩放至某个方向达到盒子大小，可能导致盒子留白。
cover 将盒子全覆盖，可能导致图片显示不完全
阴影
box-shadow:h-shadow 水平方向
v-shadow 竖直方向
blur 模糊度
spread 尺寸
color 颜色
inset 内外阴影
过渡
使默认的css样式和hover时的样式不同
trasition:all 所有可以过渡的元素包括（宽，高，背景色等）
1s 时间
