css02

1.css背景类样式
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片的重复
repeat-y 只允许在y轴重复
repeat-x 只允许在x轴重复
no-repeat 不重复,只显示一次
background-position 背景图片的定位
取值: 两个,分别表示x和y方向。如果只写一个,则两个值相等
background 是把上面所有的全部合在一起
background : color image repeat position
background-size 背景图片的大小

:五星好评
<div class="d03_bgimg d03_02"></div>

.d03_bgimg{
background-image: url(../images/sprite.jpg);
}
.d03_02{
width: 78px;
height: 16px;
background-position: -484px -45px;
}

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.css布局

定位 : top,left,right,bottom 只有元素增加定位的情况下才会使用

相对地位 一般不要去用top,left,right,bottom
绝对定位
元素会脱离文档流
一般不要去用margin,用top,left,right,bottom
固定定位
元素会脱离文档流
使用场景:回到顶部 侧边栏的广告
只有浏览器的窗口可以管的住
一般的情况下:相对定位和绝对定位是同时出现的
一般所有的下拉框都是绝对配合着相对定位完成的

相对地位和绝对地位的的使用方法
寻找relative,找的过程是依次往父元素上面进行查找,找不到就直接在body的范围内活动。相对定位的作用一般是用来管着绝对定位的

浮动

浮动分为两种,左浮动和右浮动
浮动会脱离文档流
难点在于清除浮动
清除浮动: 不是清除自身的浮动,而是清除上一个浮动对自身造成影响

猜你喜欢

转载自www.cnblogs.com/susucom/p/10947637.html
今日推荐