重学css(1)

css使用方式

1. 行内样式；
2. 内部样式；
3. 使用link引用外部样式文件 (页面加载时，同时加载css样式)；
4. 导入式 (在读取完html文件后加载，有兼容性问题)

<style>
  @import 'css/style.css'
</style>

使用方式优先级

行内>内部>外部样式@import>link外部样式；
内部>外部样式@import>link外部样式的优先级还跟位置有关，下面的会覆盖掉上面的样式；

css选择器

1. 标签选择器
2. 类选择器
3. id选择器
4. 全局选择器*
5. 群组选择器
6. 后代选择器
7. 伪类选择器：link、visited、hover、active

选择器优先级

• id选择器>class选择器>标签选择器>通配符
• 多个class就近原则

css权重

1. 权值相同：就近原则；
2. 权值不同：哪种css样式权值高，就使用哪种样式；
3. 权重值：
   标签：1
   类和伪类：10
   id：100
   通配符：0
   行内：1000
   ！important

css文本样式

• 文字样式

1. font-family
2. font-size em %相对父元素的值
3. color
4. font-weight
5. font-style normal | italic(斜体) | oblique(倾斜)
6. font-variant normal | small-caps
   small-caps设置元素中文本为小型大写字母：将原本的小写字母转成大写，原来的大写字母字体变大

. 简写font
font:font-style font-variant font-weight font-size/line-height font-family
font-style font-variant font-weight三者顺序可以任意

• 文本样式

1. text-align: left | right | center | justify 只对块元素有效
2. line-height 百分比、em当前元素字体大小
3. text-indent
4. vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分比 (垂直对齐，对行内元素、单元格生效)
5. word-spacing 单词之间间距
6. letter-spacing 字母之间间距
7. text-transform capitalize(首字母大写) | uppercase(大写) | lowercase(小写) | none (文本的大小写)
8. text-decoration : underline | overline | line-through | none

• 单行文字居中：line-height
• 多行文字居中：

// 父元素
.parent{
	display:table;
}
// 子元素
.child{
	display:table-cell;
	vertical-align:middle;
}

盒子模型

margin+border+padding+width

• 宽

1. width
2. max-width 有兼容性问题ie不支持
3. min-width 有兼容性问题ie不支持

• 高

1. height
2. max-height 有兼容性问题ie不支持
3. min-height 有兼容性问题ie不支持

• 边框

1. border
2. border-width
3. border-color
4. border-style: dotted(点状) | solid(实线) | double(双线) | dashed(虚线)

• padding 不可为负值
• margin 可设负值

垂直方向，两个相邻元素都设置margin值时会发生合并，合并后margin值=两个值中的大值。

display属性

• inline
• block
• inline-block
• none

css背景和列表样式

• 背景：背景是包括边框的

1. background-color : 颜色值|transparent
2. background-image
3. background-position : 百分比 | left | right | center | bottom | top
4. background-attachment: scroll(默认值) | fixed (背景图片是否固定或者随着页面的其余部分滚动)
5. background-repeat
6. background

背景颜色和背景图片都有的情况下，背景图片会将背景颜色覆盖掉

• 列表样式

1. list-style-type 设置列表项标志的类型
2. list-style-image 将图片设置为列表项标志
3. list-style-position 设置列表中列表项标志的位置
4. list-style

float浮动

1. 刚开始浮动是为了实现文字环绕图片效果；
2. 浮动元素会影响后面的元素；

• 浮动会出现的问题：
  元素使用浮动后会脱离普通流，出现高度塌陷。如子元素设置浮动，父元素高度就会塌陷。
• 常用的清除浮动的方法：
  1. 在浮动元素后使用一个空元素设置clear:both;
  2. 给元素添加overflow:hidden;
  3. 使用css3的:after伪类；
  4. 父级元素定义height。只适合高度固定的布局；
  5. 父级元素也一起浮动。不推荐，会产生新的浮动问题；

.clearfix:after{
	content:'';
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}
.clearfix{zoom:1;}

position定位

• static 自然模型，使元素定位于常规/自然流中；
• relative 相对定位模型，其他元素定位的标杆元素；它的位置偏移是相对的该元素的原先的在常规流中的位置；它不会脱离文档流；
• absolute 绝对定位模型,使元素脱离文档流；如果没有定位父级就会相对body进行定位；
• fixed 固定定位模型,相对于视口进行定位；
• sticky 磁铁定位模型,它使相对于最近的可滚动的祖先元素，如果没有可滚动祖先元素，则相对于视口进行定位

常见的css布局

1. 圣杯布局
   • 三列布局，中间宽度自适应，两边定宽
   • 中间栏要在浏览器中优先展示渲染
   • 允许任意列的高度最高
   • 用最简单的css和最少的hack语句实现
     两边左右浮动，中间定位

<div class="body clearfix">
    <div class="left fl"></div>
    <div class="center"></div>
    <div class="right fr"></div>
</div>
<style>
   *{margin: 0;padding: 0;}
   body,html{width: 100%;height: 100%;}
   .clearfix::after{display: block; content: "";clear: both;visibility: hidden;height: 0;}
   .fl{float: left;}
   .fr{float: right;}

	.body{
		position: relative;
		height: 100%;
	}
	.left,.right{
		width: 300px;
		height: 100%;
	}
	.left{
		background: palegoldenrod;
	}
	.right{
        background: powderblue;
        display: table;
    }
	.center{
		background: palevioletred;
		position: absolute;
		left: 300px;
		right: 300px;
	}
</style>

2. 双飞翼布局

<div class="center">
   <div>中间内容</div>
</div>
<div class="left">左边</div>
<div class="right">右侧</div>

<style>
*{margin: 0;padding: 0;}
body,html{width: 100%;height: 100%;}
.clearfix::after{display: block; content: "";clear: both;visibility: hidden;height: 0;}
.fl{float: left;}
.fr{float: right;}

.left,
.right,
.center{
   float: left;
   min-height: 300px;
}
.left{
   background: orange;
   width: 300px;
   margin-left: -100%;
}
.center{
   background: orchid;
   padding: 0 300px;
   width: 100%;
   box-sizing: border-box;
}
.center div{
    background: red;
}
.right{
   background: palevioletred;
   width: 300px;
   margin-left: -300px;
}
</style>