css学习笔记2

css
一、背景修饰

1、background-color 背景颜色

2、background-image 背景图片

background-image:url(./liying.jpg);

3、background-repeat 是否平铺

no-repeat 不平铺       repeat-x    水平平铺        repeat-y 垂直平铺       round 平铺时可以适应屏幕尺寸

4、background-size 尺寸

5、background-attachment 背景是否跟随滚动条滚动

fixed   不随滚动条滚动而滚动

scroll  滚（默认）

6、background-position 背景图片定位

left    top right center bottom 百分比 

7、background 简写形式

background:color image repeat size attachment position 

二、列表

1、list-style

list-style-type 列表图标的样式

    none  无图标   其他的在手册上

2、list-style-image 使用图片当做图标

3、list-style-position 列表图标的位置

inside  outside

三、定位

1、position

relative    相对定位

absolute    绝对定位（相对父级）

    absolute会寻找同时设置了定位的父级如果一直找不到就根据窗口来定位

fixed       绝对定位（相对于窗口）

    z-index:控制元素的层级显示顺序 值越大越靠前

四、布局

1、float 浮动（飘）

left    左浮动     right 右浮动

浮动的元素不占原来的位置

浮动可以使块元素在一行显示

2、clear 清除浮动

left        right   both 都清除

3、display

none    元素消失 位置也没了

inline-block    使块元素在一行显示  

            基线对其问题 使用 vertical-align:top 解决

4、visibility

hidden  元素消失 位置还在  注意和display:none 的区别

5、overflow

hidden  超出隐藏

scroll  超出显示滚动条

auto    不超则以 一超就滚动条

五、盒子模型

思维模型

在css中 认为所有的html元素 都应该具有 边框 外边距 内边距 内容 类似于一个盒子 称为盒子模型

1、border

border-top

border-left

border-right

border-bottom

border-width  边框宽度

border-color    颜色

border-style    样式

    solid 实线    dashed  虚线  double 双线   dotted  点状线

box-shadow

    box-shadow: 10px 10px 10px 40px red;

    1、水平    2、垂直    3、阴影模糊值 4、阴影外延值 5、颜色

border-radius

    当圆角设置成一办 的时候可以将正方形变成正圆

2、margin 外边距

margin-top

margin-left

margin-right

margin-bottom

margin:10px;     上下左右都是10px边距

margin:10px 20px;     上下10px左右20px边距

margin:10px 20px 30px 40px;     上10px右20px下30px左40px边距

3、padding 内边距

同上

当给元素设置下外边距和由外边距时本身不会移动 移动的是下边和右边的元素

当给元素设置下内边距和右内边距时 里面的元素不会移动移动的是自己本身

---

六、前端布局常见问题

1、margin

在水平方向上的两个元素都设置之间的边距时距离是两者之和

在垂直方向的两个元素都设置之间的边距时距离是值较大的那个 大者为尊

2、拖拽父级

当给自己设置margin-top时可能会带着父级一起走

解决办法：

    1、给父级设置border   

    2、给父级设置overflow:hidden

    3、使用padding代替margin