h5选择器，字体，边距，内边距，外边距笔记
1.标签
1.1：
行元素（inline）：
如：span标签：
横向排列；
不可以设置宽高，
由内容撑开宽高；
1.2：行内块元素（inline-block）：
如：img标签
横向排列；
由内容撑开宽高；
可以设置宽高；
1.3：块元素（block）：
如div标签：
由内容撑开宽高；
可以设置宽高；
独占一行；
2.选择器：
2.1：标签选择器
如span/div{width:100px;}
2.2:群组选择器
如 .box,.box1{background:red;}
2.3:后代选择器
如 .box span{border:black 2px solid}
2.4:伪类选择器
如：hover{background:red}
鼠标悬停效果
2.5：class选择器（类选择器）
.box{height:50px;}
<div class="box"></div>
2.6: id 选择器
#box{height:80px;}
<div id="box"></div>
2.7:子代选择器
如：.box>span
直系子级
3.文本
text-indent 首行缩进
text-align 文本水平居中
color 文字颜色
font-weight 文字加粗：支持100-900数值/bolder/bold
leter spacing 字母与字母之间间距
Word spacing 单词与单词之间间距
text-shadow 文本阴影
10px 10px 5px red
第一个值：水平偏移
第二个值：垂直偏移
第三个值：模糊度
第四个值：颜色
font-style：字体样式
text-dectrion:underline:下划线 / overline 上划线 / 删除线
font-size:文字大小；
line-hight 行高 /行间距
4.边框
border-width边框宽度：20px
border-color边框颜色：red
border-style:边框样式：solid实线/dashed虚线/ double 双线/
也可用复合属性
border：2px solid red
border-radius:边框圆角
5.背景图
background-imge:url{}
background-color:red
background-position背景定位：两个值 left top / right top / right center /right bottom/left bottom 也支持数值
两个值，第一个值代表：水平位移
第二个值代表：垂直位移
6.盒模型
6.1内边距
padding-left：10px 左内边距
padding-right:20px 右内边距
padding-top:30px 上内边距
padding-bottom:40px 下内边距
也可用复合属性：
padding：10px 20px 30px 40px
四个值分别代表上 右 下 左
6.2外边距
margin-left：10px左外边距
margin-right:20px 右外边距
margin-top:30px 上内边距
margin-bottom:40px 下内边距
也可用复合属性
margin：10px 20px 30px 40px
四个值分别代表上 右 下 左
display：属性 转换属性
display：inline行元素
display：block块元素
display：inline-block行内块元素
vertaril-align去除盒子与图片之间的缝隙:middle top bottom （sub上标 super下标）
评论