div+css

第一阶段 div+css

>>选择器使用细节
>>块元素和行内元素
>>盒子模型
>>浮动
>>定位
>>浏览器兼容


1、选择器使用细节
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
a、元素选择器   
档的元素就是最基本的选择器
b、选择器分组
body, h2, p, table, th, td, pre, strong, em {color:gray;}
c、类选择器
d、id选择器
e、属性选择器
设置表单的样式：input[type="button"]
f、后代选择器
后代选择器可以选择作为某元素后代的元素
g、子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
h1 > strong {color:red;}
h、相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
h1 + p {margin-top:50px;}
i、CSS 伪类
锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

:first-child 伪类
p:first-child {font-weight: bold;}

2、块元素和行内元素

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:br、meta、hr、link、input、img

3、盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

4、浮动

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
实例：创建水平菜单
http://www.w3school.com.cn/tiy/t.asp?f=csse_float5

http://www.w3school.com.cn/css/css_positioning_floating.asp

5、定位

定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

        元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

6、浏览器兼容

浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

https://blog.csdn.net/weixin_38536027/article/details/79375411