文档流概念
每一个元素自己所在的位置
块元素:上下排列
内联元素:水平左右排列
重点!!
浮动
浮动的左右就是让块元素水平排列!
float 浮动
left 左浮动
right 有浮动
none 不浮动 没效果
1.浮动的元素会脱离文档流(不占位 飘起来),浮动的元素水平显示
2.浮动的元素后面如果有正常占位元素的话,后面的元素会受浮动的影响
3.浮动的元素会重叠盒子,但是浮动元素不会跟文字重叠
清除浮动(清除浮动只能往上清除)
clear:
left
right
botn 清除两边浮动
CSS的边框
border:边框的粗细.样式.边框的颜色
取消边框:border:none
设置边框可以定义方向(单一方向)
border-left border-right border-top border-bottom
1.边框的粗细
border-width
一个值:4个方向.
两个值:a/上下 b/左右
三个值:a/上 b/左右 c/下
四个值: 上右下左 顺时针方向
2.边框的样式
bnorder-style
solid 实线
dashed 虚线
dotted 点线
doubled 双线
3.边框的颜色
border-color
背景属性:background
背景颜色:background-color
背景图片:background-image:url(图片的路径)
注释:背景图片和img图片有什么不同?
背景图片只是背景图,显示的大小是依赖盒子的大小显示
ing标签:有自己本身的宽高,不能直接写内容
背景图片的平铺方式
background-repeat(默认平铺)
no-repeat(只显示一次,不平铺)
repeat-x(x轴平铺)
repeat-y(y轴平铺)
背景图片的位置
background-position:1.水平位置 2.垂直位置
水平位置:left right center
垂直位置:top bottom center
数值设置
0px 0px;
水平:正右负左
垂直:正下负上
设置图片的大小
background-size: 100% 100%
background-attachment 背景图片固定
fix 固定
scroll 滚动(默认)