Web前端之CSS常用知识点

    CSS是层叠样式表.作用来定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。CSS可以更加精细的控制网页的内容形式。

    一.CSS的三种样式：

    行内样式表、内部样式表、外部引入样式表。

    优先级：行内样式 > 内部样式 > 外部引入样式

    二.大多数块元素都有这两个属性

    id属性：用来作为页面中某个元素的唯一标识

    class属性：用来指定页面中的元素属于某一类（可以是不同标记的元素）

    选择器名称 { 属性名：属性值；属性名：属性值；…….}

    三.基本选择器：

    标签选择器：p { font-size:2em; }

    类选择器：.info { background:#ff0; }

    ID选择器： #info { background:#ff0; }

    组合选择器：(或) ul,li,a{color:red;}

    关联选择器：(与) ul li{background: #000;}

    伪类选择器：a:link{} 没有访问之前 a:visited{} 访问后 a:hover{} 鼠标点击之后 a:active{} 点击超链接时的状态

    margin:布局外边距

    padding:布局内边距

    四.关联选择器(类似于and关系)

    标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择，例：

    p { color:#00FF00;}

    p b { color:#FF000;}

    五.css布局模型

    清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。

    CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。