一、css样式

（一）文字样式

（1）文字字体font-family

font-family可以放置多个字体，如果浏览器不支持第一个字体，则会尝试下一个

body {
    font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
}

（2）字体大小font-size

如果设置成inherit表示继承父元素的字体大小值，默认16px

p {font-size:14px;}

（3）字体粗细font-weight

normal：默认值，标准粗细
bold：粗体
bolder：更粗
lighter：更细
100~900：具体粗细，nomal是400、bold是700
inherit：继承父元素字体的粗细值

（4）字体颜色color

十六进制：#FF0000
RGB：RGB(255,0,0)
颜色：red
rgba（255,0,0,0.3）第四个值是alpha，指定色彩的透明度，范围在0~1.0

（二）文本样式

（1）文字对齐text-align

left：左边对齐、默认值
right：右对齐
center：居中对齐
justify：两端对齐

（2）文字装饰text-decoration

none：默认值，用来清除a连接中的下划线
undeline：下划线
overline：上划线
line_through：删除线
inherit：继承父元素

（3）首行缩进text-indent

/*字体大小为16px时，设置为32px*/
p {text-indent:32px}

（三）背景样式

（1）背景颜色color

div {background-color:red;}

（2）背景图片image

url可以使本地相对路径，也可以是图片网络地址

body {background-image:url("1.jpg")}

（3）背景重复repeat

repeat：默认平铺
repeat-x：水平方向平铺
repeat-y：垂直方向平铺
no-repeat：不平铺

body {background-repeat:repeat;}

（4）背景位置position

/*body {background-position:x轴 y轴;}*/
body {background-position:left top;}

body {background-position:200px 200px;}

/*中心位置*/
body {background-position:center center;}

body {background-position-x:200px;}

body {background-position-y:200px;}

支持简写：

body {background:#336699 url('1.png') no-repeat left top;}

应用场景：很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

（四）显示样式

（1）边框border

border-style 边框样式
1. none：无边框
2. dotted：点状虚线边框
3. dashed：矩形虚线边框
4. solid：实线边框
border-radius画圆

实现圆角边框的效果

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

/*border : 边框宽度 边框样式 边框颜色*/
#i1 { border-top: 2px solid red;}
#i1 { border-bottom: 2px solid red;}
#i1 { border-left: 2px solid red;}
#i1 { border-right: 2px solid red;}

/*简写，不写上下左右默认*/
#i1 {border: 2px solid red;}

（2）宽高

只有块级标签可以设置长宽，行内标签设置了没有任何作用（只会取决于内部文本值）

width：宽度
height：高度

（3）display属性

控制html元素的显示效果

none：浏览器中不显示
- 和visibility:hidden的区别
  1. display的隐藏元素后，不会占用空间
  2. visibility的仍会占用空间，会影响布局
block：默认值，按块级元素显示
inline：按行内元素显示
inline-block：使元素同时具有行内和块级元素

二、css布局

（一）盒子模型

（1）外边距margin

边框和其他盒子边框的距离，值为“0 auto”时代表居中

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

/*简写*/
.margin-test {
  margin: 5px 10px 15px 20px;
}

/*常见居中*/
.mycenter {
  margin: 0 auto;
}

简写情况下不同参数的顺序：

一个参数：控制上下左右
两个参数：分别控制上下、左右
三个参数：分别控制上、左右、下
四个参数：按照顺时针分别控制上、右、下、左

（2）边框border

（3）内边距padding

内容和边框之间的距离，用法同magin一样

（4）内容content

盒子内的内容

（二）浮动float

在 CSS 中，任何元素都可以浮动
浮动的元素是脱离正常文档流的(原来的位置会让出来)
浏览器会优先展示文本内容

（1）三种取值

left：向左浮动
right：向右浮动
none：默认值，不浮动

（2）clear

规定元素的哪一侧不允许其他浮动元素

left：左侧不允许浮动元素
right：右侧不允许浮动元素
both：左右两侧都不允许浮动元素
none：默认值，允许出现浮动元素
inherit：规定从父元素继承clear的值

（3）overflow溢出属性

visible：默认值，会溢出
hidden：溢出内容会被隐藏
scroll：溢出内容会被压缩，可以拖动上下左右滚动条查看
auto：溢出内容会被压缩，可以拖动上下滚动条查看
inherit：从父元素继承overflow属性值

（4）清楚浮动

清除浮动的影响（父标签塌陷问题）

固定高度
overflow:hidden

伪元素清除法

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

（三）定位position

static：默认值，静态的，未定位的
relative：相对定位，以自己原始位置为参照物移动，不脱离文档流，仍占据文档流空间
absolute：绝对定位，以已经定位过的父标签为参照物移动，会脱离文档流
fixed：固定定位，以浏览器窗口为参照物，固定在某个位置不动，会脱离文档流

（四）是否脱离文档流

脱离文档流，是指不会占据原来的文档空间

脱离文档流：绝对定位和固定定位
不脱离文档流：相对定位

（五）z-index

设置层叠顺序

哪个大哪个就在最上层
只有定位了元素，才有能z-index，即浮动元素不能是有z-index
从父现象：父亲怂了，儿子再牛逼也不行

（六）opacity

定义透明效果，范围是0~1,
opacity会对标签里所有的进行透明化，rgba只会对字体透明化

巴特西

（day44）css样式、css布局