1、盒模型
内容区、边框、内边距(内填充)、外边距
2、行内元素&块级元素
(1)行内元素与块级元素直观上的区别。
行内元素会在一条直线上排列,都是同一行的,水平方向排列。
块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。
(2)块级元素可以包含行内元素和块级元素。行内元素只能包含其他行内元素和文本。
(3)行内元素与块级元素属性的不同,主要是盒模型属性上。
行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。
行内元素与块级元素之间的相互转化:display
3、浮动 float
清除浮动的几种常见的方法:
(1)直接为父元素设置高度;
(2)在父元素结束标签之前添加额外的元素,设置clear:both的样式;
(3)使用伪元素(推荐)
(4)通过触发BFC方式,实现清除浮动
(BFC(Block formatting context)直译为"块级格式化上下文"。是一个完全独立的渲染区域,计算BFC高度时,浮动元素也会参与计算 )
4、定位 position (top、right、bottom、left)
relative 相对定位
absolute 绝对定位
fixed 固定定位
5、CSS简单的选择器
*(通配符)、元素选择器、class选择器、id选择器
6、CSS分组和嵌套选择器
分组选择器:同时为多个元素设置相同的样式;
嵌套选择器:通过多个选择器嵌套匹配元素;
7、CSS组合选择器
(1)后代选择器:用空格将2个选择器隔开,表示上下级关系;
(2)子元素选择器:用>将2个选择器间隔开,表示父子关系;
(3)相邻兄弟选择器:用+将2个选择器间隔开,可选择紧接在另一元素后的元素,且二者有相同父元素;
(4)后续兄弟选择器:用~将2个选择器间隔开,选取所有指定元素之后的相邻兄弟元素
8、CSS伪类:CSS伪类是用来添加一些选择器的特殊效果。
:hover :设置鼠标滑过时候的样式
9、CSS层叠样式表:
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言 动态地对网页各元素进行格式化。/*-- Cascading [kæˈskeɪdɪŋ] Sheets [ʃiːts]*/
10、CSS 能够对网页中元素位置的排版进行像素级别精确控制,支持几乎所有 的字体字号样式,拥有对网页对象和模型样式编辑的能力。
工作原理:CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式 规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样 式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。 名称 CSS 中的“层叠(cascading)”表示样式单规则应用于 HTML文档元素的方式。具体地说,CSS 样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由 CSS 根据这个层次结构决定,从而实现级联效果。