HTML+CSS学习笔记（全）
特点！！行为 样式 结构 相分离
浏览器(主流：在市场上有一定市场份额，有独立研发的内核)
浏览器分两部分：
shell 内核
IE trident
Firefox Gecko
Google chrome Webkit/blink
Safari Webkit
Opera presto
（层叠样式表格）
html css javascript
结构 样式 行为
www.baidu.com(域名) -- dns(解析) -- 192.168.000.001（地址）
css权重（256进制,多个直接进进行相加（派生选择器/父子选择器））
！important（Infinity）>行间样式（1000）>id（100）>class|属性|伪类（10）>标签选择器|伪元素（1）>通配符（0）
凡是带有inline的元素，都带有文字特性
标签的分类
1.行级元素（内联元素） display=inline
feature： 内容决定元素所占位置
不可以通过css改变宽高
举例：span strong em a del
2.块级元素 display=block
feature： 独占一行
可以通过css改变宽高
举例： div p ul li ol form address
3.行级块元素 display=inline-block
feature： 内容决定大小
可以通过css改变宽高
举例： img
body自带8px margin
盒模型 层模型 浮动模型（float：left right ）
{
盒子模型 (margin +border+padding+(content=width+height))
盒子壁 border
盒子内边距 padding
盒子内容区 width+height
外边距 margin
Padding:四个参数：上右下左 三个参数：上 左右 下
}
定位：
position：absolute
left: 100px
top: 100px
/right bottom
层模型：
absolute:（定位技术）
脱离原来位置进行定位（释放原来位置）
相对于最近的有定位的父级进行定位
如果没有，那么相对于文档进行定位
relative（参照物）
保留原来位置进行定位
相对于自己原来的位置进行定位
fixed
位置不动
{
position=fixed;
left:50%;
top:50%;
margin-left:-width*0.5;
margin-top:-heighr*0.5;
}
经典bug:
bfc: block format context(块级格式化上下文)
触发盒子的bfc：
- margin塌陷（垂直方向margin结合在一起，父子同时变化）
(强加border)
触发一个盒子的bfc：
position：absolute
display;inline-block
float:left/right
overflow:hidden （溢出部分隐藏）
2.margin合并（区域不能共用，兄弟方向margin合并）
不解决
伪元素：(行级元素)
**：：before{
content:””;
}
**：：after{
content:””;
}
清除浮动
**::after{
content: "";
clear: both;
/*只对块元素有效*/
display: block;
}
/* position: absolute;float: left;right: ;
自内部把元素转换成inline-block*/
行级元素只能嵌套行级元素
块级元素可以嵌套任意元素 除外不能嵌套
默认文字大小16px
/*除去换行*/
white-space: nowrap;
/*溢出隐藏*/
overflow: hidden;
/*...形式展示*/
text-overflow: ellipsis;
margin: 0 auto; （父子级，都是块级元素，放于子块中，使其居中）
语句：
font-size: n px （设置字体大小（高））
font-weight: normal (bold 加粗 100 200 -900逐渐变粗)
font-style：italic （斜体）
font-family:arial （字体 alrial乔布斯发明。第一件贡献是字体）
color; (设置字体颜色 ：
1.土鳖式(纯英文) color:red
2.颜色代码 color:#f40;
3.颜色函数 rgb(255,255,255)
R red G geeen B blue
00-ff 00-ff 00-ff (饱和度)
#ffffff 白色
#000000 黑色
transparent(透明色)
)
border: n px solid color; (加边框)（border-width border-style(solid实线dotted点状虚线dashed条状虚线) border-color）
(画三角)
border-left;
border-right:
border-top;
border-bottom;
text-align:left center right (对其方式)
line-height: n px (文字所占像素)
height=line-height (当行文本垂直居中)
text-indent：2em (首行缩进 1em=1*font-size)
text-decoration: line-through; (中划线none无线underline下划线overline上划线resize)
cursor:pointer （pointer小手help?）
opacity: 0-1 (透明度，0到1之间)
list-sttyle:none (去掉li标签前的圆点)
//伪类选择器
a:hover{
background-color:red; (当鼠标移入是改变颜色)
color：#fff;
}
border-radius:10px; (50%为圆)
z-index：1 (z轴，默认0)
clear:both (清除浮动流，必须是块级元素)
white-space: nowrap; (失去换行功能)
target=_blank; (在新的界面中打开)
vertical-align: middle; （对齐线）