css小tips

内容目录

属性

`box-sizing: border-box;`：这个属性可以让我们设置的盒子宽高包括内边距和边框。

`overflow: hidden;`：这个属性可以让我们设置的盒子超出部分隐藏。可以解决嵌套块级元素时发生的塌陷现象。

实操遇到的问题

脱离文档流的方式

float：left/right、position：absolute/fixed会脱离文档流。但是position：relative不会脱离文档流。

css 画三角形

将盒子宽高设为 0，颜色设置突出一边的 border 颜色，就能得到一个三角形：

div {
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: red;
}

关键词 :

相关笔记

css书写顺序

css 书写顺序：布局定位属性 > 自身样式 > 文本样式 > 其他样式。

css显示与定位

css 显示模式 css 块级元素会独占一行，比如 div、p、h1 等等。 css 行内元素不会独占一行，比如 span、a、strong 等等。 css 行内块级元素不会独占一行，但是可以设置宽高，比如 img、input 等等。

css盒子模型

盒子模型 html 标签中每个标签都可以看作是一个盒子，盒子模型中包括内容(content)、内边距(padding)、边框(border)、外边距(margin)。内容部分下面是一个简单的盒子模型。内容部分是指标签中的内容，如下图所示的蓝色区域: