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、float:left - 使用浮动块元素的幻灯片彼此相邻、
display:block - 显示块元素的链接,让整体变为可点击链接区域(不只是文本),它允许我们指定宽度
10、display:inline; -默认情况下,元素是块元素。在这里,我们删除换行符之前和之后每个列表项,以显示一行 。