1.CSS背景类样式
background-color 背景颜色 background-image 背景图片 background-repeat 背景图片的重复 repeat-y 只允许在y轴重复 repeat-x 只允许在x轴重复 no-repeat 不重复,只显示一次 background-position 背景图片的定位 取值: 两个,分别表示x和y方向。如果只写一个,则两个值相等 例如:京东、淘宝 五星好评 雪碧图: 各个小图标的集合,使用的目的是减少http的请求 background 是把上面所有的全部合在一起 background : color image repeat position background-size 背景图片的大小
2.框模型
任何一个元素,都可以理解成一个盒子 盒子是可以装"东西" 里面东西跟"盒子的包装"有一定的空间 两个盒子或者说多个盒子,盒子之间是不是有一定的"距离"(空间) 盒子模型的组成 margin 外边距 盒子与盒子之间的距离 border 边框 包装盒 padding 内边距 填充物 content 内容 买好的东西 margin 合起来写的属性 4个 当你写一个的时候,四个全部相同 两个的时候,上右,对边补齐 三个的时候,上右下,对边补齐 margin-top margin-right margin-bottom margin-left 这四个属性可以单独的拿出来写 border 边框 合写的属性 border-color 颜色 border-top-color: ; border-left-color: border-style 样式 也分上下左右 border-width 宽度 也分上下左右 写的时候不需要区分顺序 padding 上右下左 对边补齐 定义的width和height只是content部分 padding和border会把盒子撑大 盒子的大小 content+padding+border
3.定位
定位 : top,left,right,bottom 只有元素增加定位的情况下才会使用 相对定位 老大 一般不要去用top,left,right,bottom 绝对定位 老二 元素会脱离文档流 一般不要去用margin,用top,left,right,bottom 虽然都能达到效果,但是为了开发的方便,代码的简洁。 固定定位 肯定不是同一个爹 元素会脱离文档流 使用场景:回到顶部 侧边栏的广告 纯种的野孩子。只有浏览器的窗口可以管的住 一般的情况下:相对定位和绝对定位是同时出现的 一般所有的下拉框都是绝对配合着相对定位完成的 position
绝对定位(absolute)寻找他的亲哥相对定位(relative),才会去听亲哥的话,在他的亲哥眼皮底下活动
找的过程是依次往父元素上面进行查找,找不到就直接认body为亲哥,在body的范围内活动 相对定位的作用一般是用来管着绝对定位
转载于:https://www.cnblogs.com/hyh888/p/10947522.html
