HTML+CSS+CSS3基础知识合集(一)

HTML即超文本标记语言(Hyper Text Markuo Language)

注：所有内容为本人学习时觉得比较重要容易忘记的~仅供参考

1. a标签默认在当前窗口打开，如果需要在新的窗口打开加入 target="_blank"

2. 下拉框多选：<select multiple="multiple">
3. <label>标签作用：当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上：<label for="控件id名称">

标题CSS全称 “层叠样式表 (Cascading Style Sheets)”

<link href="base.css" rel="stylesheet" type="text/css" />

1. 子选择器**(>)**选择指定标签的第一代元素 例如 .food>li{border:1px solid red;};
2. 通用选择器(*)，表示html中任意标签元素；
3. 伪类选择器给html中不存在的标签状态设置样式例如：a:hover{}，其他的兼容性不好；
4. 分组选择符(,)，给不同标签元素设置同一样式。
5. CSS四大特性：继承性，层叠性，特殊性，重要性
   特殊性：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，style设置的权值为1000。继承的权值最低。
   层叠性：相同权重值时，按照定义CSS的前后顺序。
   重要性：最高权值： !important
6. 文字排版：粗体 blod；斜体 italic；下划线 text-decoration:underline; 删除线 text-decoration:line-through; 缩进 text-indent:2em; 文字间距 letter-spacing:20px; 单词间距 word-spacing:20px; 段落排版 text-align:center;
7. CSS元素分类
   块状元素：可以设置宽高，margin，padding，每个元素独占一行
   行内元素：不可设置宽高 img 标签和 input除外，不会独占一行，可以设置padding, margin-left, margin-right
   行内块状元素：既拥有行内元素属性又有块状元素属性
   ！非常重要，面试可能会问的!
   怎么解决行内元素一行显示之间有间隙的问题？
   参考博客：问题答案
   
   
8. 三种布局模型：
   流动模型：按照规则自动排序 标准流
   浮动模型：float 脱离文档流(可添加父级标签并设置height)
   层模型：
   绝对定位 absolute(设置了上下左右后脱离文档流，相对于浏览器窗口，设置left和top则是相对于左上角)；
   相对定位 relative(以之前的位置为标准，比如设置right:20px;是指目前的盒子的右边与之前的位置相隔20px)；
   固定定位 fixed(相对于浏览器窗口)；
   继承 inherit 继承父元素的定位属性(除父元素为fixed时相对于浏览器窗口，其余相对于父元素位置)
   注：如果想使用绝对定位相对于其他元素：参照定位元素(是定位元素的父级标签)使用相对定位；定位元素使用绝对定位。
   
9. CSS盒模型
   
10. CSS层级关系
    定义了opacity属性的元素，层叠的优先级高于没有定义opacity属性的position:static的元素，等于position为relative或是absolute且默认z-index为1的元素，z-index越大，优先级就越高
    z-index: 改变层级关系；一般默认为 auto；ie6等默认为0，只作用于带有定位属性的
    • z-index可以设置元素的叠加顺序,但依赖于定位属性
    • z-index大的元素覆盖z-index小的元素
    • z-index为auto的元素不参与层级比较
    • z-index为负值，元素被普通流中的元素覆盖
11. 水平垂直居中问题，分为定宽高和不定宽高，参考：请移步
12. 隐形改变display类型：当使用position:absolute;或者float浮动以后就会自动变成内联块状元素。
13. text-indent: 100px; 文本缩进来控制位置