css基础知识

一.CSS引入方式

1.行间样式 2.内部样式 3.外联样式

二.border属性相关

border: 1px soild red ; 分别对应粗细 样式 颜色
border方向：top right bottom left
border形状：非矩形(随着容器的大小而变化，可能是三角形，可能是梯形)

demo:使用border实现网页常见下标图案样式:

div{
    width:0;
    height:0;
    border: 20px solid #fff;
    border-top-color: #ccc; // 可根据border方向设置不同的图标方向，top下标,left右标，同理right左标
}

三.背景相关

首先了解概念：容器内的内容会撑开容器宽高，而背景不会

1.background-color三种写法：颜色英文关键字 rgb 十六进制

2.background-image(默认铺满整个容器大小)
background-image:url('img/demo.png'); // 基础用法

3.background-repeat: no-repeat; // 背景图不重复
background-repeat: repeat-x; // x轴重复 repeat-y y轴重复 repeat(x,y轴重复)

4.background-position: x y;// x代表x轴， y轴代表y轴 x,y可以为具体的像素值，也可以为位置具体数值top,center等
background-position: 10px; // X轴偏移10px, Y轴默认居中

5.background-attachment // 背景区是否滚动
background-attachment：fixed； 背景固定在游览器可视区域

6.background: red url('img/demo.png') no-repeat center top fixed; // background复合样式，书写不区分位置，但是最好按照这样格式书写，阅读更方便

四.盒模型相关

一.paddding内填充
注意：设置padding后会撑开容器的大小
padding的四个方向：top right bottom left
padding-top等

padding复合写法：padding
1.只有一个值是：4个方向都是同一个值
2.设置2个值，第一个属性值是上下方向，第二个属性值是左右方向
3.设置3个值，第一个属性值是上，第二个值时左右，第3三个值是下面
4.设置4个值，上，右，下，左（顺时针方向）

二.margin（外边框）
标签与标签之间的间距（距离）
margin存在的问题
1.margin-top传递
父级盒子会集成子集margin-top值
解决方法：1.给父级添border
2.margin上下叠压
解决技巧：
1.将某一元素方向设置成预想的值，margin叠压会取最大的margin值
2.如果元素无特殊特征，也可以用padding代替

三.盒模型：
1.w3c标准盒模型
标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
2.IE盒模型
IE 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
3.在网页顶部doctype申明,即可设置标准w3c盒子模型