【牛腩】HTML+CSS基础了解

从牛腩老师那里了解到了HTML和CSS的一部分基础知识。又在网上查了一些资料，有了一个初步的了解。

HTML:

标签：HTML 文档和 HTML 元素是通过 HTML 标签进行标记的

容器：与容器AOP概念不一样。

HTML（文字）标签选择器、类选择器、ID选择器

优先级：ID选择器>类选择器>标签选择器

标签选择器

例子

HTML中：

Body{
    2345
}

CSS中：

Body{
    Color:#fof;
}

类选择器

例子：

HTML中：

<span class="menu">• 1

CSS中：

.menu{ /*栏目样式*/
    Color:#f00;/* 文字颜色*/
}

ID选择器

例子：

HTML中：

<span id="special">• 1

CSS中：

#special{
    Font-weight:bold;/*粗体*/
}

选择器的父子关系、并列关系：

.title span{/*CSS 中的父子关系*/
    }

.menu, .title{ /*CSS 中的并列关系*/
    }

/*HTML 中的并列关系,冲突时，与CSS的排列顺序有关*/
    <Span class="menu niu">栏目吧</span>• 1

CSS:

CSS核心内容：标准流、盒子模型、浮动、定位

块级元素 block、行集元素 inline

块级元素：div p h1 h2 h3 h4 form ul

行内元素： a b br i span input select

<div ></div>/*单管一行*/• 1

<span></span>• 1

行级可以变块级，块比行好控制，在多个浏览器中显示一样

标准流：按顺序显示，类似代码的顺序执行

盒子模型：

内边距：上下左右；padding

外边距：上下左右；margin:

内容区域：宽，高；content:width,height

画框：宽。border-width

共14个参数。三层包围4个+中心2个。对称。

浮动 float：

用于控制浮动，把盒子横向排列。

.box{
    clear:left;  /*清除向左浮动*/
    clear:right; /*清除向右浮动*/
    clear:both;  /*同时清除向左向右浮动*/

定位 position：

相对定位 relative vs 绝对定位 absolute。

相对定位，不脱离标准流。偏移量，相对于原来的位置。

绝对定位，脱离标准流。会影响标准流中的其他元素。

在查找资料的过程中发现一个特别有意思的CSS学习资料：http://zh.learnlayout.com/no-layout.html 里面讲了CSS布局的基础属性。

HTML + CSS：

html是静态网页文本内容，css是对界面元素样式的设置。应用html+css把网页的内容和样式解耦，使之更易于维护。

初步进行了一些了解，接下来还要多用，多深入学习。