html、css基础

所有标签

title  鼠标悬停时的展示信息

css页面布局

height
width
color
background-color
font-size  浏览器默认16px  支持最小12px
font-weight （单位十几种）浏览器默认500  bold(700) lighter

a

href
target   (_self _block)

p

height
width
color
background-color
font-size  浏览器默认16px  支持最小12px
font-weight （单位十几种）浏览器默认500  bold(700) lighter 
text-indent:56px   首行缩进

img

alt  图片引入错误时的提示信息

span 无意义标签

ul、ol li dl dt、dd无序、有序列表

空格  标签下所有级后代
ul{
    /*css3弹性盒子布局*/
    display:flex;
}
ul li{
    list-style:none;
    float:    /*浮动*/
}

table

border="1" 边框
cellspacing="0"
cellpadding="0"

table{
    /*边框(边框宽度 样式 颜色)*/
    border:1px solid #666;
}
table tr{
    border-bottom:1px solid #666;
    /*标签转化为table*/
    display:table;
}
/*伪类选择器*/
tbody tr:last-child{
    border-bottom:none;
}
/*伪类选择器  第一个子级*/
thead th:nth-child(1)，tbody td:nth-child(2){
    200px;
    text-align:center;
}

div

h1

字体的单位

px
vh  百分比(高)
vw  百分比(宽)
em  父级大小的倍数 16*2
rem

css优先级(权重)

!important(无穷大)>行内(1000)> id选择器(100)>类选择器(10)>属性选择器(1) >继承(<1)>浏览器添加的(1>x>0)
权重值可叠加

类(某一类 可重复)选择器
id选择器 (唯一)  重复后js只能取第一个

css盒模型

content 宽、高内部
padding 内边距
border  边框
margin  外边距

.box{
    200px;
    height:200px;
    background-color:;
    border:5px solid #999;
    padding:10px;
    /*上 右 下 左*/
    margin:20px 30px 40px 50px;
    /*上 左右 下*/
   margin:20px 30px 40px;
   /*上下  左右*/
   margin:20px 30px;
   缺少参数时往前找 
}

行块标签

块级标签 display:block

h1   p  div  ul li
1.默认宽度100%，若宽度不足使用margin填充  默认高0
2.可以直接设置宽和高
3.同级多个标签会换行展示
4.可正常设置margin padding
行内块级标签<行内属性优先> display:inline-block

img

1.可设置宽高 margin padding
2.不换行显示 会解析空格
3.基线对齐
行内标签<基线对齐>  display:inline

span a

1.默认宽度0 随内容而变化  默认高0
2.直接设置宽高无效  可转化为块级或行内块级
3.同级多个标签会在同一行展示 溢出会换行
4.设置margin上下失效，所有正常  设置padding上下溢出，左右正常
5.基线对齐  可调（verticsl-align:top;）
6.行内元素不换行展示，但是会解析源码标签间的空格（至多解析成一个）

背景图片（不能被选中）默认平铺

background-image:url(../images/img.JPG);
/*背景默认平铺(repeat) 水平repeat-x 垂直-y*/
background-repeat:no-repeat;
background-position:50px 20px;

background:url(../images/img.JPG) no-repeat 50px 20px red;

圆角

/*边框圆角  左上 右上 右下 左下*/
border-radius:10px 20px 30px 40px/40px 30px 20px 10px;

阴影

/*水平平移 垂直平移  阴影渐变宽度  颜色延展宽度 颜色 内阴影（可选）*/
box-shadow:5px 5px 5px 10px #999 inset;