day04内容
老师所讲内容
图片精灵技术
网页中如果有很多个图片，这些个图片，每次从服务上拉取。
网页有100张图片，图片需要向服务器发送100次请求，获取图片
网页布局技术
1.默认布局
块级元素块级展示
行内元素行内展示
在html中的先后顺序就是在网页上展示的先后顺序
自带的margin,padding
…
2.块级行内展示
display:inline/inline-block/block/none;
visibility:visible/hidden;
opacity:0-1;
3.盒子模型
width/height/border/padding/margin
4.浮动
float:left/right/none;
浮动元素
浮动元素脱离文档流，原先位置不保留，其他非浮动元素可以使用。
非浮动元素
5.定位
默认是静态定位 static
使用相对定位，固定定位，绝对定位修饰的都是定位元素
相对定位 relative
相对于原先的位置进行定位
固定定位 fixed
固定在视口区，相对于视口区进行定位
绝对定位 absolute
没有定位祖先元素的，相对于视口区的左上角定位
有定位祖先元素的，相对于定位祖先元素进行定位
6.弹性盒模型布局方式
**
复习
**
颜色
color
#ffffff
rgb
rgba
hsl
hsla
尺寸
绝对单位
px mm cm in
相对单位
em
1em=16px
body的font-size有关
rem
1rem = 16px 不变化
百分比
占父元素百分之多少
字体属性
font
font-family 字体家族
设置网络字体
@font-face{
font-family:自己定义的名字;
src:url(’’);
}
div{
font-family:自己定义的名字;
}
font-size 设置字体大小
font-style 设置字体倾斜
normal 不倾斜
italic 倾斜
oblique 模拟倾斜
font-weight 设置字体粗细
normal 正常400
bold 加粗 700
lighter 比父元素细
bolder 比父元素粗
100-900
color 设置字体颜色
text
text-align 设置文本水平方向对齐方式
left
center
right
vertical-align 设置文本垂直方向上的对齐方式
top
middle
bottom
line-height 设置行高
设置文本的行高为容器的高度，那么文字在容器内就垂直居中了。
text-decoration 设置文本修饰线
text-decoration:none;
text-decoration-line 设置修饰线的位置
underline 下划线
overline 上划线
line-through 中划线
none 没有线
text-decoration-style 设置修饰线的样式
solid 实线
dotted 点状线
dashed 虚线
double 双实线
wavy 波浪线
text-decoration-color 修饰线的颜色
text-transform 设置文字改变
none 不改变
lowercase 转换成小写
uppercase 转换成大写
capitalize 首字母大写
text-shadow 设置文字的阴影
none 没有阴影
text-shadow:3px 3px 3px red;
水平方向的偏移 垂直方向的偏移 阴影的模糊距离 阴影颜色
列表相关属性
list-style 设置列表的样式
list-style:none;
list-style-type 设置标志项的类型
none 没有标志项
disc 实心原点
square 实心方形
circle 空心圆
decimal 数值
decimal-leading-zero 补零的数值
lower-roman 小写罗马
upper-roman 大写罗马
…
list-style-position 设置标志项的位置
outside 在主框外
inside 在主框内
list-style-image 设置标志项的图片
url(’’)
list-style:circle url(’’) inside;
如果type和image都可用，那么用image的，如果image不可用，那么用type的。
其他属性
cursor 设置鼠标样式
default 箭头
auto 浏览器的鼠标样式
pointer 手型
help 帮助问号
move 移动
text 文本
crosshair 十字交叉
wait 等待
w-resize e-resize n-resize s-resize
nw-resize ne-resize sw-resize se-resize
…
outline 设置外边线
不占据屏幕空间，可能会覆盖其他内容
1px solid blue
display 展示样式
inline 行内展示，宽高无效
inline-block 行内展示，宽高有效
block 块级显示，宽高有效
none 隐藏，不占据屏幕空间
visibility 可见性
hidden 隐藏，不可见，占据屏幕空间
visible 显示，可见的
opacity 透明度0-1
0 隐藏，透明度为0，占据屏幕空间
1 显示，透明度为1
overflow 溢出处理
overflow-x 水平方向的溢出处理
overflow-y 垂直方向的溢出处理
hidden 溢出内容隐藏，强硬
auto 如果溢出产生滚动条，如果不溢出不产生滚动条
scroll 强制产生滚动条，无论溢不溢出
盒子模型
W3C标准盒子模型 IE盒子模型
所有的元素都可当做盒子处理
盒子属性 width height padding border margin
盒子分为4个区域 content-box padding-box border-box margin-box
内容区 内间距区 边框区 外边距区
padding和margin属性的取值
padding-top
padding-right
padding-bottom
padding-left
margin-top
margin-right
margin-bottom
margin-left
padding和margin取值为一个值：上下左右
padding和margin取值为两个值：上下 左右
padding和margin取值为三个值：上 左右 下
padding和margin取值为四个值：上 右 下 左
盒子计算
W3C盒子
默认，不需要设置
box-sizing:content-box;
内容区宽高
宽 width
高 height
盒子的宽高
宽 width+paddingLeft+paddingRight+borderLeft+borderRight
高 height+paddingTop+paddingBottom+borderTop+borderBottom
所占屏幕空间的宽高
宽 width+paddingLeft+paddingRight+borderLeft+borderRight+marginLeft+marginRight
高 height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom
IE盒子
需要手动设置 box-sizing:border-box;
内容区宽高
宽 width-borderLeft-borderRight-paddingLeft-paddingRight
高 height-borderTop-borderBottom-paddingTop-paddingBottom
盒子的宽高
宽 width
高 height
所占屏幕空间的宽高
宽 width+marginLeft+marginRight
高 height+marginTop+marginBottom
注
1清除浮动的影响：
（1）clear: both;
（2）第二种方式，在子元素都浮动，父元素没有设置高度的情况下，使用overflow：hidden，清除子元素的浮动对父元素产生的影响
2定位
（1）相对定位 相对于原先在文档流中的位置定位 不脱离文档流，原先位置保留
（2）固定定位 不随着滚动条滚动 脱离文档流，原先位置不保留，没有设置定位属性的情况下，默认是在原先位置固定定位
（3）绝对定位 脱离文档流，原先位置不保留 没有定位祖先元素，相对于视口区的左上角进行定位
当有了定位祖先元素之后，绝对定位是相对于离它最近的定位祖先元素进行的定位////////相对定位 原先位置依然保留 给child提供定位祖先元素，应为固定定位和绝对定位都脱离文档流，原先位置不保留，容易影响其他元素的位置
（4）静态定位为默认
3背景
（1）默认值
background-origin: padding-box;从内间距开始绘制背景图片
background-clip: border-box; 在边框区区显示
来源：CSDN
作者：hanmiao12345
链接：https://blog.csdn.net/hanmiao12345/article/details/104682235