HTML 学习笔记 May 5，2017 选择器练习、块元素、行内元素、标准流、非标准流、盒子模型

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规定一样的

屏幕快照 2017-05-20 11.11.17.png

父子选择器
这是一个非常重要的新闻

一般就是控制在两层（但是实际是可以多层的，就是比较乱了）

类选择器也可以做成父子选择器

如果一个元素被id 和class同时修饰时，id选择器优先级> class 选择器

可以有（指定）多个class 选择器，但是只能有一个 id 选择器

新闻3
css里边style1 写在后边就以style1 为准，css 里边style4 写在后边就以 style4 为准
css中最后出现的样式为准

屏幕快照 2017-05-20 11.11.26.png

超链接：

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; /* 点击之后字体颜色变灰*/
}

块元素、行内元素：
行内元素：（只占内容的宽度，默认不换行）
span1
a1
块元素：（默认换行，同时占满整行）

div1

p1

行内元素是不能放块元素的，只能放文本或者其他元素 （与浏览器的版本和类型有关）
图片不是行内元素
块元素可以放文本，行内元素，或者块元素

一些css属性对行内元素不生效，比如margin，left，right，width，height。建议尽可能的使用块元素定位。（与浏览器版本和类型有关）

块元素和行内元素的转换：

行内元素改成块元素
span1

.s1 {
background-color: pink;
display: block; /* 所有引用s1的元素都是按照块元素来显示的 */
}

块元素改成行内元素

p1

.s1 {
background-color: pink;
display: inline; /* 所有引用s1的块元素都是按照行内元素来显示的 */
}

标准流、非标准流、盒子模型

流：在现实生活中就是流水，在网页设计中就是指元素（标签）的排列方式。
标准流：元素在网页中就像流水，排在前面的元素（标签）内容前面出现，排后面的（标签）内容后面出现。
非标准流：当某个元素（标签）脱离了标准流【比如因为相对定位】排列，我们统称为非标准流排列。

盒子模型

网页设计中的属性名：内容（content）、填充（padding）、边框（border）、边界（margin），css盒子模式都具备这些属性。

屏幕快照 2017-05-20 11.11.43.png

屏幕快照 2017-05-20 11.11.50.png

body的样式可以这样写
body {
border: 1px solid red; /* 这里指定了body的宽度，样式，颜色，顺序可以随意 */
}

margin: 0 auto; /* 0表示上下边距为0，auto表示左右居中 */

屏幕快照 2017-05-20 11.11.56.png

padding 和margin的区别是参照物的不同，padding是按照外边的为参照物，margin是按照里边的为参照物。

vertical-align: middle; /* 上下的中间 /
margin:0 auto; / 左右的中间*/

细节说明：
1、html 元素都可以看做一个盒子；
2、盒子模型的参照物不同，则使用的 css 属性不一样，比如 margin 和 padding 使用的不同；
3、如果不希望破坏外观，尽量不要使用 padding，尽量使用 margin，因为 padding 可能会改变盒子的大小（相当于这个盒子是有弹性的），margin 如果过大，盒子内容被挤到盒子外边去，但是盒子本身没有变化。

屏幕快照 2017-05-20 11.12.02.png