html非标准元素,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