before和after的理解

其实就是一个行内元素，只不过一个在元素前触发，一个后触发罢了

选择器

>：父子

+：兄弟

section [class^=“box”]：section元素中所有以box为前缀的元素

通配样式

*{
    margin: 0;
    padding:0;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    list-style: none; /*隐藏无序列表的表头 */
}

calc函数使用

width: calc(100% / 2 - 5px);

文字超出容器宽度自动换行

overflow-wrap: break-word;

文字超出内容省略显示

text-overflow: ellipsis;

calc函数使用

width: calc(100% / 2 - 5px);

隐藏元素

    visibility: hidden;  /* 隐藏元素 */
overflow: hidden;  /* 隐藏内容溢出部分 */

使容器在屏幕居中（放容器中）

    /* 使容器居中 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

一些经验：

• 行内块标签（inline-block​ ******）与行内标签（**​inline）的最大区别就是可以设置宽高，其他的和行内标签没区别

  行内标签的宽度受本身元素内容的影响，如果想去除掉这个影响，可以用 display：inline-block，转成行内块形式

  ==当绝对位置也达不到想要的效果时，这时候用 transform 平移一下即可==

  想要几个组件并排放置，可以使用浮动布局，float：left，同时需要设置一下width，不然就只会显示容器里面最大组件的宽度

  background的值里面一定要给no-repeat，background-image就不需要

  border-radius的起始点是左上角

  使用浮动框架时，记住一个理念即可：先确定高度，再平均分配宽度

  div标签里面设置文本居中，text-align: center;

  怪异盒子模型其实就是计算高度和宽度时和普通盒子模型不一样而已，就这么简单，box-sizing: boder-box;

  W3C：标准width: border+padding+content IE：怪异width:width

一、插件

① HTML CSS Support

② Live Preview：实时查看页面渲染

③ Auto Rename Tag：可以让你在修改html标签的时候，同步修改另一个标签

二、标签

• 图片标签：img

  段落标签：p

  列表标签：无序 ul-li、有序 ol-li

  超链接标签：

  标题标签：h1~h6

  其他标签：换行：br，水平线：hr

  表格标签：table-tr-td，th是表头标签

和标签

：通常用于创建块级容器，以便于组织页面的结构和布局：用于内联样式化文本，给一部分文本赋上样

‍

三、盒子模型

示例图如下所示：

复合样式时，哪边没有就找他对面的有没有

四、浮动 **（**​float​ ）

特点：用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使得元素进行浮动。

父元素高度出现塌陷：

# 父元素样式中加入以下代码
overflow: hidden;

五、定位（position）

特点：定位布局可以精准定位，但缺乏灵活性

定位方式：

**==占据文档流==**

• 相对定位：相对于元素在文档流中的正常位置进行定位。
  ==不占据文档流==
• 绝对定位​ ：相对于其最近的已定位祖先元素进行定位。
• 固定定位​ ：相对于浏览器窗口进行定位。固定在屏幕上的位置，不随滚动而移动。

六、flex弹性盒子

说明：在容器里面布局的一种方式

使用

/* 父盒子 */
display: flex;
flex-direction: 【排列方式】;
/* x方向对齐方式 */
justify-content:【对齐方式】;
/* y方向对齐方式 */
align-items:【对齐方式】;

七、CSS 样式优先级

1. 通配符：​0*****​ .
2. 标签选择器：​1****​ . 如:p,h3,h2。
3. 类选择器：​10****​ .
4. ID选择器：​100****​ .
5. **!important：**​ +无穷大​ .
   • *!important>ID选择器>类选择器>标签选择器>*​通配符