html css笔记

1. 标签分内联标签和块级标签，内联标签排列分布，块级标签独占一行，内联不支持宽高；
2. 块级元素排列按照文档流；
3. 外边距不改变边框大小，内边距撑大边框；
4. 兄弟级：外边距的垂直方向合并，以较大边距为准，合并方式为兄弟之间加一个非空的块级元素；
5. 父子级：解决外边距合并方法是在父级加边框或加内边距或定义怪异盒模型；
6. 用margin时一定要注意垂直方向的合并，内联标签不支持垂直margin；
7. 标签都有默认样式，解决方法：通配符样式重置（不推荐）；
8. 盒模型是浏览器解析标签的规则；
9. 标准盒模型：margin>border>padding>内容区域（border-box，padding-box，content-box三个盒子），定义内容区域尺寸，padding撑大盒子；
10. 怪异盒模型，盒模型大小固定，padding、border和内容区域等分配现有吃催，怪异盒模型开启方式：box-sizing:border-box；
11. 背景色默认边框及以内区域，可用background-clip:padding-box属性设置背景绘制区域；
12. 标签类型display，四个主要属性：内联：inline，块级：block，行内块级：inline-block，隐藏标签：none，其中内联不存在垂直方向margin，内联的padding以内容所在行的左上角为标准，行内块级支持内联和块级；
13. 后代选择器（div p）是选择div中所有的p标签和子代选择器（div>p）是选择div下一级的p标签；
14. background复合属性值的顺序color/image，repeat，position，size，clip，可选择部分，但顺序不可以乱，其中属性含数值的话用/隔开；background-attachment：fixed定位属性背景固定不随滚动条变动；
15. 背景background图片，repeat子属性不平铺，size（两个值）子属性放大图片，size属性contain值作用是有一边放大至最大则放大停止，size属性cover铺满且不失帧（双百放大图片拉伸失帧），图片背景无法覆盖至border-box；
16. Background的position（图片定位）属性选择背景图片的位置；
17. border默认颜色为字体颜色；
18. inherit属性值为继承；
19. font字体属性，字体子属性family，字体大小size，字体粗细weight，字体样式style，variant小型大写字母，字体样式具有继承性；
20. text文本属性，子属性transform属性只包括（字母大写uppercase字母小写lowercase，首字母大写capitalize），子属性align属性值包括（left，center，right），缩进子属性indent属性值（px和em），下划线子属性decoration属性值（上划线，下划线，中划线等）；
21. letter-spacing字符间隔属性，word-spacing单词间距属性，white-space换行属性（pre保留空格，wrap换行，nowrap…），word-break英文单词强制换行属性值（break-all），文本超出显示省略号三个属性（超出隐藏overflow，不换行white-space，溢出显示text-overflow:ellipsis）；
22. 实体属性，如空格 等；
23. 选择器：后代选择器#id p，子代选择器#id>p，群组选择器#id,.class，相邻兄弟选择器a + p(选中a后的兄弟p标签)，相邻兄弟选择器a ~ p(选中a后的所有兄弟p标签)，[id]选中所有存在id的标签（class类似），div[class]或div.class选中div中所有含有class属性的标签，[title=tions]选中title等于tions的标签；
24. Css书写顺序：位置(浮动、定位、边距等)>自身宽高属性>文字属性(文本背景等)>Css3新属性；
25. a标签的伪类：:link匹配未点击过的标签，:visited匹配点击过的标签，:active匹配点击时的标签；
26. 圆角：border-radius，盒子阴影：box-shadow:水平 垂直 边缘模糊半径 颜色（四属性值为一组，可以同时多组，可加inset实现内部模糊），overflow和display必须写在第一行；
27. 文本（内联）垂直对齐vertical-align，middle值可让图片和文本垂直居中对齐，bottom值可解决基线产生的间隙；
28. float：浮动脱离文档流，浮动元素紧跟上一个浮动元素之后，浮动提高一个层级，文字有半个层级，浮动改变标签为块级（但是不支持margin：auto），浮动的元素不会撑开父级高度（解决方式：父级也浮动；给父级overflow：hidden属性开启BFC特性；浮动标签后加一个含clear：both属性的空盒子）；
29. 图片文字环绕：图片浮动即可，文字自带半层浮动；
30. 定位position，相对定位（relative以自己为参照物），不会脱离文档流，实际占位还是之前的位置；绝对定位（absolute以其他为参照物，默认参照body），脱离文档流，固定在页面加载时的位置，设置参照（设置方式position为任意值，通常为relative，其他会脱离文档流可能影响排版）目标只能是父级等包裹它的标签，如果父级和爷级都有position则就近原则以父级为参照；固定定位（fixed以窗口为参照），脱离文档流，固定在相对窗口的位置；绝对定位和固定定位默认标签为block，margin：auto必须左右或上下都有值或抵消才能生效（其他块级属性都支持）；定位高于浮动，但相对定位支持浮动，所以二者不要一起用；位置设置属性为：left，right，top，bottom，居中方式为四个值都为0，同时设置margin为auto；
31. 层级：后定位的层级高；同时定位的漂浮比浮动float要高，浮动提升的层级级，与文字在一个层级，会挤动文字，不支持z-index；定位提升层级，支持z-index，飘在第一层；
32. Opacity透明度，值0-1，子元素也会跟着透明；IE8以下不兼容，兼容方式filter:alpha(opacity=0-100)；