爱站程序员基地清除浮动的方式
1.
浮动元素的父元素：：after{
content: ‘’;
clear: both;
display: block;
}
2.浮动元素的父元素：：after{
overflow：hidden；
}
3.浮动元素的兄弟元素{
content: ‘’;
clear: both;
}
3.样式规则
1.字体样式 font-
color字体颜色
font-style 字体样式
font-style: italic;斜体
font-style: normal;正常字体
font-weight 字体粗细
bold粗体
lighter更细的字体
normal正常粗细
100-900
font-size 字体大小
px
浏览器的默认字体大小16px
line-height行高
取值是包裹该字体的元素高度，即可垂直居中
font-family 字体族
‘微软雅黑’
‘Microsoft YaHei’
serif 衬线
速写
font:font-style，font-weight，font-size，font-family
1.必须包含font-size， font-family
2.font-style和font-weight必须在font-size之前
3font-family必须放在最后
webfont
@font-face
ttf
1.下载ttf字体文件
2.放到相对于的目录（项目的目录）
3.通过 @font-face {
/* myfont是随便设置的名字 */
font-family: ‘myfont’;
src: url(’./…’);}引入
4.在需要字体的地方使用
div{
font-family：‘myfont’
}
}
字体图标库iconfont，fontawesome
iconfont
1.更改图标的大小时候使用font-size更改大小
2.选中需要更改的图标时，需要通过类名选中
fontawesome
2.文本样式 text-text-align 文本在当前元素中的对齐方式leftcenterrightjustifytext-decoration：underline下划线overline 上划线line-through删除线text-shadow文本阴影px x轴平移px Y轴平移blur 模糊程度color 颜色text-transform文本变形lowercase文本变小写uppercase 大写capitalize首字母大写3.列表样式list-style：none；将li标签的默认样式删除4.拓展1.文本水平垂直居中水平：text-align：center垂直：line-height2.消除a标签的默认样式color:#ccc;text-decoration：none;cursor:default;wait;help;pointer;手的标签3.子元素在父元素中垂直居中display:table-cell;vertical-align:middle;align-items:center ;子元素display:inline-block;
4.单位
1.颜色
1.关键字
red。。。
color：red；
2.十六进制
color：#333333
3.RGB函数
r red
g green
b blue
color:rgb(0,0,0);
0~255
4.rgba 函数
color:rgba(0,0,0,0);
最后一个0位0~1透明度
opacity和rgba的区别
opacity父元素的透明度会影响子元素的透明度，而且子元素无法设置回去
rgba透明度仅仅会作用于父元素，不会作用于子元素
5.渐变色
background-image: linear-gradient(to right,red,yellow);
2.长度
绝对单位
px
相对单位
em
当前文本的包裹元素上的font-size
12323
em=18
%
5.盒子模型
文档中的每个元素都可以看成是一个盒子
1.盒子属性
width
height
margin外边框
盒子与其他盒子之间的距离
margin-top
margin-right
margin-bottom
margin-left
margin：10px;上下左右都是10px
margin：5px 10px;上下为5左右为10
margin：5px 10px 15px;上为5 左右为10 下位15
margin：5px 10px 15px 20px;上5 右10 下15 左20
border边框
border-width边框线的宽度
px
border-style边框线的样式
solid 实线
dotted 点状线
dashed 虚线
double 双实线
border-color
border-radius边框圆角
border-radius：100%园
border-radius：10px
速写
border: 10px solid #333;
padding内边距
background-color字体颜色background-imagebackground-positionbackground-repeatno-repeat；repeat-y y轴重复repeat-xbackground-size ：%100 %100背景图尺寸2.盒子组成width,padding,border ,margin3.盒子分类box-sizing设置盒子的类型1.box-sizing:content-box;内容盒子【w3c盒子】width=内容width所占的宽度=width+padding+border+margin2.box-sizing:border-box;边框盒子【IE盒子】width=内容width+padding+border所占的宽度=width+margin
6.四列布局
