css知识-易忽略知识点

使用dl、dd、dt来创建一个定义列表

单位

• px – 如果我们将一个图片放大的话，我们会发现一个图片 是有一个一个的小色块构成的，这一个小色块就是一 个像素，也就是1px，对于不同的显示器来说一个像素 的大小是不同的。
• 百分比 – 也可以使用一个百分数来表示一个大小，百分比是相 对于父元素来说的，如果父元素使用的大小是16px， 则100%就是16px，200%就是32px
• em – em和百分比类似，也是相对于父元素说的，1em就相 当于100%，2em相当于200%，1.5em相当于150%

行间距

• line-height用于设置行高，行高越大则行 间距越大。
• 行间距 = line-height – font-size

字母间距和单词间距

• letter-spacing用来设置字符之间的间距。
• word-spacing用来设置单词之间的间距。
• 这两个属性都可以直接指定一个长度或百 分数作为值。正数代表的是增加距离，而 负数代表减少距离。

css盒子模型：

内容区：content

通过width和height两个属性可以设置内容区的大 小
width和height属性只适用于块元素。

内边距：padding

• 顾名思义，内边距指的就是元素内容区与边框以内 的空间。
• 默认情况下width和height不包含padding的大小。
• 使用padding属性来设置元素的内边距。
• 例如： – padding:10px 20px 30px 40px
– 这样会设置元素的上、右、下、左四个方向的内边距
padding:10px 20px 30px;
– 分别指定上、左右、下四个方向的内边距
• padding:10px 20px;
– 分别指定上下、左右四个方向的内边距
• padding:10px;
– 同时指定上左右下四个方向的内边距

边框

• 可以在元素周围创建边框，边框是元素可见框的最外部。
• 可以使用border属性来设置盒子的边框：
– border:1px red solid;
– 上边的样式分别指定了边框的宽度、颜色和样式。
• 也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。

外边距

• 外边距是元素边框与周围元素相距的空间。
• 使用margin属性可以设置外边距

display&&visibility

display:
– block：设置元素为块元素
– inline：设置元素为行内元素
– inline-block：设置元素为行内块元素
– none：隐藏元素（元素将在页面中完全消失）

visibility:
– visible：可见的
– hidden：隐藏的

浮动

• 所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。 • 浮动使用float属性。
• 可选值：
– none：不浮动 – left：向左浮动 – right：向右浮动
• 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一 个块级元素。
• 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元 素时我们都会为其指定一个宽度。
• 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕 在元素的周围。
• 浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。 • 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他 浮动元素。
• 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也 就是浮动元素不会撑开父元素。
• 浮动元素默认会变为块元素，即使设置display:inline以后其依然是个 块元素。