HTML 学习笔记 May 5，2017 选择器练习、块元素、行内元素、标准流、非标准流、盒子模型
优先级：id选择器>类选择器>html选择器>通配符选择器
通配符选择器
- { /* 所有的都要符合这个里边的方法 /
margin:0; / 内边距清0 /
padding:0; / 外边距 */
}
html：
css：/* 注释 */
js：// 注释
margin:10px 5px 10px 0px 上 右 下 左
margin:10px 5px 10px 上 左和右 下
padding和margin规定一样的
父子选择器
<span id="style1">这是一个<span id="style2">非常重要的新闻</span></span>
一般就是控制在两层（但是实际是可以多层的，就是比较乱了）
类选择器也可以做成父子选择器
如果一个元素被id 和class同时修饰时，id选择器优先级> class 选择器
可以有（指定）多个class 选择器，但是只能有一个 id 选择器
<span class="style1 style4">新闻3</span>
css里边style1 写在后边就以style1 为准，css 里边style4 写在后边就以 style4 为准
css中最后出现的样式为准
超链接：
<a href=""></a>
a:link { /超链接/
color: red;
font-size: 24px;
font-family: "华文新魏"; /* 字体设置/
text-decoration: underline; / 添加下划线*/
}
a.hover { /悬停/
color: blue;
font-size: 24px;
font-family: "华文新魏"; /* 字体设置/
text-decoration: none; / 不添加下划线*/
}
a.visited {
color: gray; /* 点击之后字体颜色变灰*/
}
块元素、行内元素：
行内元素：（只占内容的宽度，默认不换行）
<span>span1</span>
<a>a1</a>
块元素：（默认换行，同时占满整行）
<div>div1</div>
<p>p1</p>
行内元素是不能放块元素的，只能放文本或者其他元素 （与浏览器的版本和类型有关）
图片不是行内元素
块元素可以放文本，行内元素，或者块元素
一些css属性对行内元素不生效，比如margin，left，right，width，height。建议尽可能的使用块元素定位。（与浏览器版本和类型有关）
块元素和行内元素的转换：
行内元素改成块元素
<span style="display: block;" class="s1">span1</span>
.s1 {
background-color: pink;
display: block; /* 所有引用s1的元素都是按照块元素来显示的 */
}
块元素改成行内元素
<p style="display: inline;" class="s1">p1</p>
.s1 {
background-color: pink;
display: inline; /* 所有引用s1的块元素都是按照行内元素来显示的 */
}
标准流、非标准流、盒子模型
流：在现实生活中就是流水，在网页设计中就是指元素（标签）的排列方式。
标准流：元素在网页中就像流水，排在前面的元素（标签）内容前面出现，排后面的（标签）内容后面出现。
非标准流：当某个元素（标签）脱离了标准流【比如因为相对定位】排列，我们统称为非标准流排列。
盒子模型
网页设计中的属性名：内容（content）、填充（padding）、边框（border）、边界（margin），css盒子模式都具备这些属性。
body的样式可以这样写
body {
border: 1px solid red; /* 这里指定了body的宽度，样式，颜色，顺序可以随意 */
}
margin: 0 auto; /* 0表示上下边距为0，auto表示左右居中 */
padding 和margin的区别是参照物的不同，padding是按照外边的为参照物，margin是按照里边的为参照物。
vertical-align: middle; /* 上下的中间 /
margin:0 auto; / 左右的中间*/
细节说明：
1、html 元素都可以看做一个盒子；
2、盒子模型的参照物不同，则使用的 css 属性不一样，比如 margin 和 padding 使用的不同；
3、如果不希望破坏外观，尽量不要使用 padding，尽量使用 margin，因为 padding 可能会改变盒子的大小（相当于这个盒子是有弹性的），margin 如果过大，盒子内容被挤到盒子外边去，但是盒子本身没有变化。
