CSS

css选择器

1.基本选择器

1. id选择器（给标签取id名，以#加id名开头，具有唯一性）
2. 类选择器（给标签取class名，以点（.）加class名开头）
3. 标签选择器（以标签名开头）

2.其他选择器

类选择器空格标签选择器（.classname div)  当前元素所有后代元素-子子孙孙

.classname>div  当前元素下一级所有子元素-只有子元素

3.伪类选择器

1. :hover 鼠标经过时设置其样式
2. :action 鼠标按下时设置其样式
3. :visited 选择已访问的链接，请设置其样式--针对a标签

CSS优先级

style属性>ID选择器>class选择器>标签

同级别选择器  遵循就近原则

盒子模型

1. 盒子水平排列-margin无重合
2. 盒子垂直排列-margin重合

盒子样式

1. border ：1px dashed(虚线) #red
2. padding：1px 1px 1px 1px顺时针方向，从上开始
3. margin：0 auto

样式

文本样式

1. font-family: "微软雅黑";  字体
2. font-size:字体大小 
3. font-weight：字体粗细
4. line-height  设置行高

background（背景）

本地图片：background-imge:url（'图片地址'）

背景平铺：background-repeat

 （1）background-repeat：repeat （默认）平铺（水平和垂直方向都重复）
 （2）background-repeat：no-repeat 不平铺
 （3）background-repeat repeat-y 垂直方向平铺
          background-repeat repeat-x 水平方向平铺

图片定位：background-position

1. top left（第一个值上中下，第二个值左中右）

    

    

2. x% y%（第一个水平位置，第二个垂直位置）左上角为0%,0%，右上角为100%，100%，只规定一个值则另一个值也为50%
3. xpx ypx

 

背景颜色：background-color

背景图片大小：background-size

布局样式

文档流：即文档的排列方式：同一平面中从左到右，从上到下排列

脱离文档流：盒子模型脱离源文档的文档排列方式，在同一平面中浮动起来，根据一定的要求排列

浮动：float   清浮动 clear:both

定位-position

1. position与top，bottom，left，right联用
2. Absolute：绝对定位，相对于静态定位(static)以外的第一个父元素定位，若在非静态内则已该非静态元素定位
3. fixed：绝对定位，相对于浏览器窗口进行定位，既有滚动条时页面效果相对静止类似登录弹框
4. relative：相对定位，相对于其原本身正常位置进行定位
5. static：默认值

呈现形式

1. block：块级标签-可设置宽高，元素独占一行
2. inline：行级标签-不可设置宽高，元素自适应内部内容
3. inline-block：介于前两个之间，可设置宽高，但不独占一行