

刘流的博客

CSS3基础(第一周内容)

刘流的博客

CSS3基础(第一周内容)

CSS

Word count: 6.9kReading time: 29 min

 2020/12/07   Share

• 
• 
• 
• 
• 

这是学习 CSS3 第一周内容的笔记。

一：基础入门

0.目录

1. CSS3 简介

2. CSS3 基本使用

   1. CSS3 的书写位置。
   2. CSS3 的基本语法。

1.CSS3 简介

1. CSS（cascading style sheet，层叠样式表）是用来给 HTML 标签添加样式的语言。
2. CSS3 是 CSS 的最新版本，增加了大量的样式，动画，3D特性和移动端特性等。

2.前端三层

	语言	功能
结构层	HTML	搭建结构，放置部件，描述语义
样式层	CSS	美化页面，实现布局
行为层	JavaScript	实现交互效果，数据收发，表单验证等。

3.CSS 使样式和结构分离

1. CSS 使样式和结构分离，样式和结构不用“杂糅着写”，而是彼此分开：HTML就负责结构，CSS 负责样式。
2. HTML 和 CSS 怎样结合呢？“选择器”就是两者的纽带。

4.CSS 的本质

CSS 就是样式的“清单”，要书写合适的选择器，然后把指定元素的样式“一条一条罗列”出来

.tool{
    width: 266px;
    position: absolute;
    left: 1293px;
    top: 36px;
}

.tool .r1{
    width: 266px;
    float: left;
}

5.CSS3 的书写位置

1. 内嵌式

   1. 在学习CSS时，最常用的是内嵌式，顾名思义，内嵌在 .html 文件中。
   2. 在 标签对中，书写标签对，里面书写CSS语句。

2. 外链式

   1. 可以将 CSS 单独存为 .css 文件，然后使用 标签引入它

      <link rel="stylesheet" href="css/css.css">

      rel 关系 stylesheet 样式表 href 路径

3. 导入式

   1. 导入式是最不常用的样式表导入方法

<style>
	@import url(css/css.css)
</style>

​ 2. 使用导入式引入的样式表，不会等待css文件加载完毕，而是会立即渲染 HTML 结构，所以页面会有几秒钟的“素面朝天”的时间。

4. 行内式

   1. 样式可以直接通过 style 属性写在标签身上

      <h2 style="color: red;">我是一个二级标题</h2>

   2. 行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用。

6.CSS3 的注释

CSS3 的注释是 /**/

p{
	/*设置文字字号*/
	font-size: 40px;
}

二：CSS3选择器

0.目录

1. 传统CSS2.1选择器
   1. 标签选择器和id选择器
   2. class选择器
   3. 复合选择器
   4. 伪类
2. CSS3新增选择器
   1. 元素关系选择器
   2. 序号选择器
   3. 属性选择器
   4. CSS3新增伪类
   5. 伪元素
3. 层叠性和选择器权重计算

1标签选择器和id选择器

1. 标签选择器
   1. 标签选择器也称为元素选择器，类型选择器，它直接使用元素的标签名当作选择器，将选择页面上所有该种标签。

/*选择所有的span*/
span{
 color: red;
}

/*选择所有的 b*/
b {
 color: green;
}

​ 2. 标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅

<p>我们一定<span>不负韶华，只争朝夕</span></p>
<ul>
    <li>小明</li>
    <li>小红</li>
    <li><span>小强</span></li>
</ul>

2. 标签选择器的常见作用
   1. 标签选择器“覆盖面”非常大，所以通常用于标签的初始化。

/*list 列表，style 样式，none 没有*/
ul{
	list-style: none;
}

/*text 文本 decoration 装饰 none 没有*/
a{
	text-decoration: none;
}

2. id 属性

1. 标签可以有id属性，是这个标签的唯一标识

   <p id="para1">我是一个段落</p>

2. id的名称只能是由字母，数字，下划线，短横线构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母。

3. 同一个页面上不能有相同的id的标签

2.1 id选择器

CSS选择器可以使用井号#前缀，选择指定id的标签

<p id="para1">我是一个段落</p>

/*选择id为para1的标签*/
#para1 {
	color: red;
}

3. class类名

1. class 属性表示“类名”

   <p class="warning">我是段落</p>

2. 类名的命名规范和 id 的命名规范相同。

3. 使用点.前缀选择指定class的标签

/*选择class为warning的标签*/
.warning {
	color: red;
}

3.1 class 类名非常灵活

1. 多个标签可以为相同类名

<p class="warning">我是段落</p>
<p class="warning">我是段落</p>
<ul>
    <li>我是列表项</li>
    <li class="warning">我是列表项</li>
    <li>我是列表项</li>
    <li class="warning">我是列表项</li>
</ul>

2. 同一个标签可以同时属于多个类，类名用空格隔开。

   <!--同时属于两个类-->
   <li class="warning spec">我是列表项</li>
   
   .warning{
   	color: red;
   }
   .spec{
   	font-style: italic;
   }
   font 字体
   style 样式
   italic 斜体

4. 原子类

1. 在做网页项目前，可以将所有的常用字号，文字颜色，行高，外边距，内边距等都设置为单独的类。

/*
font 字体
size 尺寸
12px 12像素
*/

.fs12{
	font-size: 12px;
}
.fs14{
	font-size: 14px;
}
.fs16{
	font-size: 16px;
}

2. HTML 标签就可以“则需选择”它的类名了，这样可以非常快速的添加一些常见样式。

   <p class="fs18 color-green">我是一个文字</p>

5. 复合选择器

选择器名称	示例	示例的意义
后代选择器	.box .spec	选择类名为box的标签内部的类名为spec的标签
交集选择器	li.spec	选择即是li标签，也属于spec类的标签
并集选择器	ul, ol	选择所有ul和ol标签

5.1 后代选择器

1. CSS选择器中，使用空格表示“后代”

/*选择类名为box的标签，后代的 p 标签*/

.box p{
	color: red;
}

<div class="box">
	<!--.box里面的p标签会被选中-->
    <p>我是盒子中的段落</p>
    <p>我是盒子中的段落</p>
</div>
<p>我是段落</p>
<p>我是段落</p>

2. “后代”并不以一定是“儿子”

   /*选择类名为box的标签，后代的 p 标签*/
   
   .box p{
   	color: red;
   }
   
   <div class="box">
       <ul>
           <!--.box里面的p标签会被选中-->
           <li><p>我是盒子中的段落</p></li>
           <li><p>我是盒子中的段落</p></li>
       </ul>
   </div>
   <p>我是段落</p>
   <p>我是段落</p>

5.2 交集选择器

h3.spec {
	font-size: italic;
}

5.3 并集选择器

ul, ol{
	list-style: none;
}

6. 伪类

1. 伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态。

伪类	意义
a:link	没有被访问的超级链接
a:visited	已经被访问的超级链接
a:hover	正在鼠标悬停的超级链接
a:active	正被激活的超级链接（按下按键但是还没有松开按键）

6.1 爱恨准则

1. a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效。

   LOVE HATE

:link > :visited > :hover > :active

7. 元素关系选择器

名称	举例	意义
子选择器	div>p	div的子标签p
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选中
通用兄弟选择器	p~span	p元素之后的所有同层级span元素

7.1 子选择器

1. 当使用 > 符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系。

   .box > p{
   	color: red;
   }
   
   <div class="box">
   	<!--将被选择-->
       <p class="p1">我是段落</p>
   	<!--将被选择-->
       <p class="p1">我是段落</p>
       <div id="div">
           <p class="p1">我是段落</p>
           <p class="p1">我是段落</p>
   	</div>
   </div>

2. 后代选择器不一定限制是子元素

   .box p {
   
   }

7.2 相邻兄弟选择器

1. 相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧要跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。说白了，a+b 就是选择“紧跟在a后面的一个b”

    <style>
      img+span {
        color: green;
      } 
     </style>
   </head>
   <body>
     <p>
       <img src="" alt="">
         <!--将被选择-->
       <span></span>
       <span></span>
     </p>
     <p>
       <img src="" alt="">
         <!--将被选择-->
       <span></span>
     </p>
     <span></span>
     <span></span>
   </body>

相邻兄弟选择器的一个题目。

  <style>
    div+p{
      color: red;
    }
  </style>
</head>
<body>
 <div>我是第1个div</div>
 <p>我是第1个P，我要变红色</p>
 <p>我是第2个P</p>
 <div>我是第2个div</div>
 <p>我是第3个P，我要变红色</p>
 <p>我是第4个p</p>
 <p>我是第5个P</p>
</body>
</html>

7.3 通用兄弟选择器

通用兄弟选择器（~），a~b选择a元素之后所有同层级 b 元素。

 <style>
   h3~span {
     color: green;
   } 
  </style>
</head>
<body>
  <span>我是后面的span</span>
  <h3>我是一个三级标题</h3>
  <!-- 将被选择 -->
  <span>我是后面的span</span>
  <!-- 将被选择 -->
  <span>我是后面的span</span>
  <!-- 将被选择 -->
  <span>我是后面的span</span>
  <!-- 将被选择 -->
  <span>我是后面的span</span>
  <p>我是一个段落</p>
  <!-- 将被选择 -->
  <span>我是后面的span</span>
  <!-- 将被选择 -->
  <span>我是后面的span</span>

</body>

通用兄弟选择器

<style>
    div p{
      color: pink;
    }
    div~p{
      color: green;
    }
  </style>
</head>
<body>
 <div>
   <p>aaaaa</p>
   <p>bbbbb</p>
   <p>ccccc</p>
 </div>
 <p>ddddd</p>
 <p>eeeee</p>
 <p>fffff</p>
</body>

8. 序号选择器

举例	意义
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(3)	第三个子元素
:nth-of-type(3)	第三个某类型子元素
:nth-last-child(3)	单数第三个子元素
:nth-last-of-type(3)	倒数第三个某类型子元素

8.1 :first-child

:first-child 表示“选择第一个子元素”，比如下面的例子中就是选择.box1 盒子中的第一个 p

<style>
.box1 p:first-child {
	color: red;
}
</style>
</head>
<body>
  <div class="box1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </div>
</body>

在上面的例子中，漏泄 p 是不对的。结果是样式没有生效。

8.1.1 习题:

 <style>
    li:first-child{
      color: red;
    }
  </style>
</head>
<body>
 <ul>
   <li>家用电器
     <ol>
       <li>冰箱</li>
       <li>洗衣机</li>
       <li>空调</li>
     </ol>
   </li>
   <li>
     清洁用品
     <ol>
       <li>洗衣液</li>
       <li>消毒液</li>
       <li>洗厕液</li>
     </ol>
   </li>
   <li>妇幼用品</li>
 </ul>
</body>

“家用电器”里的列表项字体颜色均是红色

“家用电器”里的列表项和“清洁用品”里的“洗衣液”项字体颜色是红色

8.2 :last-child

:last-child 表示“选择最后一个子元素”，比如下面的例子

<style>
.box1 p:last-child {
	color: red;
}
</style>
</head>
<body>
  <div class="box1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <!--选中这个-->
    <p>4</p>
  </div>
</body>

8.3 :nth-child()

1. :nth-child()可以选择任意序号的子元素

 <style>
    .box2 p:nth-child(3) {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box2">
    <p>1</p>
    <p>2</p>
    <!--选择这个-->
    <p>3</p>
    <p>4</p>
  </div>
</body>

2. :nth-child() 可以写成 an+b 的形式，表示从b开始每a个选一个，注意不能写为 b + an

     <style>
       .box2 p:nth-child(3n+2) {
         color: greenyellow;
       }
     </style>
   </head>
   <body>
     <div class="box2">
       <p>1</p>
         <!--选择这个-->
       <p>2</p>
       <p>3</p>
         <!--选择这个-->
       <p>4</p>
       <p>5</p>
         <!--选择这个-->
       <p>6</p>
       <p>7</p>
         <!--选择这个-->
       <p>8</p>
     </div>
   </body>

3. 2n +1 等价于 odd ，表示奇数。2n 等于 even，表示偶数。

   .box2 p:nth-child(3n+2) {
   	color: greenyellow;
   }
   等价于
   .box2 p:nth-child(odd) {
   	color: greenyellow;
   }

8.4 :nth-of-type()

请问下面的选择器，会让哪个p文字变蓝？

 <style>
    .box2 p:nth-child(3) {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box2">
    <p>1</p>
    <p>2</p>
    <h3>1号h</h3>
    <h3>2号h</h3>
    <!--不会选择这个-->
    <p>3</p>
    <p>4</p>
  </div>
</body>

因为 p:nth-child(3) 中的 3 的意思是从上到下的第三个元素 ，如果第三个元素正好是 p的话，样式就生效，否则不生效。

此时使用 p:nth-of-type(3) 则对应的元素样式会生效。

8.5 :nth-last-child() 和 :nth-last-of-type()

:nth-last-child() 和 :nth-last-of-type() 都是倒数选择。

9. 序号选择器的兼容性

选择器	兼容性
:first-child	IE7
:last-child	IE9
:nth-child(3)	IE9
:nth-of-type(3)	IE9
:nth-last-child(3)	IE9
:nth-last-of-type(3)	IE9

10. 属性选择器

举例	意义
img[alt]	选择有alt属性的img标签
img[alt=”故宫”]	选择有alt属性是故宫的img标签
img[alt^=”北京”]	选择有alt属性是以北京开头的img标签
img[alt$=”夜景”]	选择有alt属性以夜景结尾的img标签
img[alt*=”美”]	选择有alt属性中含有美字的img标签
img[alt~=”手机摄影”]	选择有alt属性中有空格隔开的瘦子摄影字样的img标签
img[alt | =”参赛作品”]	选择有alt属性以“参赛作品-”开头的img标签

11. CSS3 新增伪类

伪类	意义
:empty	选择空标签
:focus	选择当前获得焦点的表单元素
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
:checked	选择当前已经勾选的单选按钮或者复选框
:root	选择根元素，即标签

  <style>
    .para {
      /* 宽度 高度 */
      width: 100px;
      height: 100px;
      /* 边框 */
      border: 1px solid #000000;
    }

    .para:empty {
      background-color: red;
    }

    input:focus {
      background-color: rgb(239,243,181);
    }

    input:disabled {
      border: 1px solid #000000;
    }

    input:enabled {
      border: 1px solid rgb(17,84,209);
    }

    /* :root 等价于 html */
    :root{
      font-size: 20px;
    }

    input:checked+span {
      color: greenyellow;
    }
  </style>
</head>
<body>
  <p class="para"></p>
  <p class="para"></p>
  <p class="para">123</p>
  <p class="para"> </p>

  <p>
    <input type="text">
    <input type="text" disabled>
    <input type="text">
  </p>

  <p>
    <input type="checkbox"> <span>CSS3</span>
    <input type="checkbox"> <span>CSS3</span>
    <input type="checkbox"> <span>CSS3</span>
  </p>
  
</body>

12. 伪元素

1. CSS3 新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素。
2. 伪元素用双冒号表示，IE8可以兼容单冒号。

12.1 ::before 和 :: after

1. ::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置 content 属性 表示其中的内容。

   a::before{
   	content: "♥";
   }

2. ::after 创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置 content 属性 表示其中的内容。

12.2 ::selection

::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

12.3 ::first-letter 和 ::first-line

1. ::first-letter 会选中某元素中（必须是块级元素）第一行的第一个字母。

2. ::first-line 会选中某元素中（必须是块级元素）第一行全部文字。

13.层叠性和选择器权重计算

13.1层叠性

1. CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质
2. 层叠性：多个选择器可以同时作用域同一个标签，效果叠加。

13.2层叠性的冲突处理

id权重 > class 权重 > 标签权重

13.3复杂选择器权重计算

复杂选择器可以通过（id的个数，class的个数，标签的个数）的形式计算，计算权重。

/*权重（2，0，1）*/
#box1 #box2 p{
	color: red;
}
/*权重（2，2，2）*/
#box1 div.box2 #box3 p{
	color: green;
}
/*权重（0，3，1）*/
.box1 .box2 .box3 p{css
	color: blue;
}

13.4 !important 提升权重

如果我们需要将某个选择器的某天属性提升权重，可以在属性后面写!important

.spec{
	color: blue !important;
}

很多公司不允许使用 ！important ,因为这会不经意的带来样式冲突

三. 文字与字体属性

0. 目录

1. 常用文本样式属性
2. 字体属性详解
3. 段落和行相关属性
4. 继承性

1.常用文本样式属性

1.1 color 属性

1. color 属性可设置文本内容的前景色。
2. color 属性主要可以使用英语单词，十六进制，rgb()，rgba()等表示法。
3. 英语单词表示法，比如color: red;仅仅用于学习时临时设置一下颜色，工作时基本不适用这样的样式，因为追求精确。

1.1.1 color 属性 - 十六进制表示法

1. 十六进制表示法是所有软件设计中都通用的颜色表示法，设计师给我们的设计图上面标注的颜色，通常为十六进制表示color: #ff0000;
2. 比如十六进制ff就是十进制的255，每种颜色分量都是0~255的数字。
3. 如果颜色值是#aabbc的形式，就可以简写为#abc.
4. 黑色是 #000，白色是#fff，常见的灰色有#ccc，#333，#2f2f2f等。

1.1.2 color 属性 - rgb() 表示法

1. 颜色也可以使用 rgb() 表示法

   color: rgb(255, 0, 0);

1.1.3 color 属性 - rgba() 表示法

1. 颜色也可以使用 rgba() 表示法，最后一个参数表示透明度，介于0到1之间，0表示纯透明，1表示纯实心。

   color: rgb(255, 0, 0, .65);

2. rgba() 表示法从IE9开始兼容。

1.2. font-size 属性

1. font-size 属性常用来设置字号，单位通常为 px。font-size: 30px;

2. 网页正文字号通常是 16px，浏览器最小支持10px字号。

1.3. font-weight属性

font-weight 属性设置字体的粗细程度，通常就用 normal 和 bold 两个值。

示例	意义
font-weight: normal;	正常粗细，与400等值
font-weight: bold;	加粗，与700等值
font-weight: lighter;	更细，大多数中文字体不支持
font-weight: bolder;	更粗，大多数中文字体不支持

1.4 font-style 属性

font-style 属性设置字体的倾斜

示例	意义
font-style: normal;	取消倾斜
font-style: italic;	设置为斜体（常用）
font-style: oblique;	设置为倾斜字体（用常规字体模拟，不常用）

有的文章会去细细的比较 font-style: italic; 和 font-style: oblique; 之间的区别，只用记住font-style: italic; 的用法即可。

1.5 text-decoration 属性

text-decoration 属性用于设置文本的修饰线外观的（下划线，删除线）

示例	意义
text-decoration: none;	没有修饰线
text-decoration: underline;	下划线
text-decoration: line-through;	删除线

2. 字体属性详解

2.1 font-family 属性

1. font-family 属性用于设置字体 font-family:"微软雅黑";

2. 字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的”后备”字体。

   ​ font-family: serif, "Times New Roman", "微软雅黑";

   ​ 字体名称之间有空格，必须使用引号包裹。

3. 中文字体也可以称呼他们的英语名字

   中文字体名	等价的英语字体名
   font-family: “微软雅黑”	font-family: “Microsoft Yahei”
   font-family: “宋体”	font-family: “SimSun”

4. 字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体的字体比较多，设置成其他字体较少。

5. 设置用户电脑里面没有的字体，就必须自己重新定义新的字体，这就需要我们有字体文件，用户加载网页的时候就会同时下载这些字体文件。

2.2 定义字体

1. 字体文件根据操作系统和浏览器不同，有 eot, woff2, woff, ttf, svg 文件格式，同时需要有这5个文件。

2. 当我们拥有字体文件后，就可以使用 @font-face 定义字体

   @font-face{
   	font-family: '字体名称';
   	font-display: swap;
   	src: url('eot字体文件地址');
   	src: url('eot字体文件地址') format('embedded-opentype'),
           url('woff2字体文件地址') format('woff2'),
           url('woff字体文件地址') format('woff'),
           url('ttf字体文件地址') format('truetype'),
           url('svg字体文件地址') format('svg');
   
   }

3. 段落和行相关属性

3.1 text-indent 属性

1. text-indent 属性定义首行文本内容之前的缩进量，缩进两个字符应该写作：text-indent: 2em; em 表示字符宽度。

3.2 line-height

line-height 属性用于定义行高

1. line-height 属性的单位可以是以 px 为单位的数值 line-weight: 30px;
2. line-height 属性的单位也可以是没有单位的数值，表示字号的倍数，这是最推荐的写法 line-height: 1.5
3. line-height 属性的单位也可以是百分数，表示字号的倍数line-height: 150%

3.3 单行文本垂直居中

1. 设置行高=盒子高度，即可实现单行文本垂直居中。
2. 设置text-align: center;即可实现文本水平居中。

3.4 font合写属性

font 属性可以用来作为 font-style，font-weight，font-size，line-height 和 font-family 属性的合写。

font: 20px/1.5 Arial, "微软雅黑";

20px 的意思是字号 ，1.5 的意思是行高，后面的是字体。

4.继承性

1. 文本相关的属性普遍具有继承性，只要给祖先标签设置，即可在后代所有标签中生效。

   1. color
   2. font- 开头的
   3. list - 开头的
   4. text - 开头的
   5. line - 开头的

2. 因为文字相关属性具有继承性，所以通常会设置body标签的字号，颜色，行高等，这样就能当作整个网页的默认样式了。

四：盒模型

0.目录

1. 盒模型基本概念
   1. 认识盒模型
   2. width 和 height 属性详解
   3. padding属性
   4. margin 属性
   5. 盒模型计算
   6. box-sizing 属性
2. 行内元素和块级元素
   1. display属性
   2. 行内元素和块级元素的相互转换
   3. 元素的隐藏

1. 认识盒模型

1. 所有的 HTML 标签都可以看成矩形盒子，由 width，height，padding，border构成，称为“盒模型”。

2. 盒子的总宽度 = width + 左右 padding + 左右border

3. 盒子的总高度 = height + 上下padding + 上下 border

2. padding 是四个方向的

1. padding 是盒子的内边距，即盒子边框内壁到文字的距离。

2. 四个方向的padding，分别可以用小属性进行设置

小属性	意义
padding-top	上padding
padding-right	右padding
padding-bottom	下padding
padding-left	右padding

​ padding 属性如果用四个数值以空格隔开进行设置，分别表示上，右，下，左的padding. padding: 10px 20px 30px 40px;

2.1 padding 的二数值写法

​ padding属性如果用两个数值以空格隔开进行设置，分别表示上下，左右的padding。padding: 10px 20px; 10px 表示上下，20px 表示左右。

3. margin 是盒子的外边距

​ margin是盒子的外边距，即盒子和其他盒子之间的距离。

3.1 margin 有也四个方向

小属性	意义
margin-top	上margin,“向上端”
margin-right	右margin,“向右端”
margin-bottom	下margin,“向下端”
margin-left	左margin,“向左端”

3.2 margin的塌陷

​ 竖直方向的margin有塌陷现象：小的margin会坍塌到大的margin中，从而margin不叠加，只以大值为准。

3.3 一些元素有默认的margin

一些元素（比如body，ul，p等）都有默认的margin，在开始制作网页的时候，要将他们清除。

/*统配符选择器，表示选择所有元素*/
* {
    margin: 0;
    padding: 0;
}

/*通配符有效率问题，应该使用并集选择器*/
body, ul, p{
    margin: 0;
    padding: 0;
}

4. 盒子的水平居中

将盒子左右两边的margin都设置为auto，盒子将水平居中。

.box{
    /*上下是0，左右自动*/
	margin: 0 auto; 
}

5. box-sizing属性

1. 将盒子添加了 box-sizing: border-box;之后，盒子的 width，height 数字就表示盒子实际占有的宽度（不含margin）了，即 padding，border变为“内缩”的，不在”外扩“

.box {
	box-sizing: border-box;
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	padding: 10px;
}

2. box-sizing 属性大量应用于移动网页制作中，因为它结合百分比布局，弹性布局等非常好用，在 PC 页面中开发使用较少。
3. box-sizing 属性兼容到 IE9.

6. 行内元素和块级元素

display属性类型	是否能并排显示	是否能设置宽高	当不设置width属性时	举例
块级元素	不能	能	width自动撑满	div,section,header,h系列，li，ul
行内元素	能	不能	width会自动收缩	a,span,em,b,u,i等

7. 行内块

img和表单元素是特殊的行内块，它们既能够设置宽度高度，也能够并排显示。

8. 行内元素和块级元素的相互转换

1. 使用 display: block;即可将元素转换为块级元素

2. 使用 display: inline; 即可将元素转为行内元素，将元素转为行内元素的应用不多见。

3. 使用 display: inline-block; 即可将元素转为行内块。

9. 元素的隐藏

1. 使用 display: none; 可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样。
2. 使用 visibility: hidden; 也可以将元素隐藏，但是元素放弃自己的位置。

Author：John Doe

原文链接：http://example.com/2020/12/07/2020-12-07-CSS3-basic-1/

发表日期：December 7th 2020, 12:00:00 am

更新日期：December 11th 2020, 8:40:01 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

• Next Post
  CSS3基础(第二周内容)
• Previous Post
  HTML5基础学习

Powered by Hexotheme Archer

PV: :)

CATALOG

1. 1. 一：基础入门
   1. 1.1. 0.目录
   2. 1.2. 1.CSS3 简介
   3. 1.3. 2.前端三层
   4. 1.4. 3.CSS 使样式和结构分离
   5. 1.5. 4.CSS 的本质
   6. 1.6. 5.CSS3 的书写位置
   7. 1.7. 6.CSS3 的注释
2. 2. 二：CSS3选择器
   1. 2.1. 0.目录
   2. 2.2. 1标签选择器和id选择器
   3. 2.3. 2. id 属性
      1. 2.3.1. 2.1 id选择器
   4. 2.4. 3. class类名
      1. 2.4.1. 3.1 class 类名非常灵活
   5. 2.5. 4. 原子类
   6. 2.6. 5. 复合选择器
      1. 2.6.1. 5.1 后代选择器
      2. 2.6.2. 5.2 交集选择器
      3. 2.6.3. 5.3 并集选择器
   7. 2.7. 6. 伪类
      1. 2.7.1. 6.1 爱恨准则
   8. 2.8. 7. 元素关系选择器
      1. 2.8.1. 7.1 子选择器
      2. 2.8.2. 7.2 相邻兄弟选择器
      3. 2.8.3. 7.3 通用兄弟选择器
   9. 2.9. 8. 序号选择器
      1. 2.9.1. 8.1 :first-child
         1. 2.9.1.1. 8.1.1 习题:
      2. 2.9.2. 8.2 :last-child
      3. 2.9.3. 8.3 :nth-child()
      4. 2.9.4. 8.4 :nth-of-type()
      5. 2.9.5. 8.5 :nth-last-child() 和 :nth-last-of-type()
   10. 2.10. 9. 序号选择器的兼容性
   11. 2.11. 10. 属性选择器
   12. 2.12. 11. CSS3 新增伪类
   13. 2.13. 12. 伪元素
       1. 2.13.1. 12.1 ::before 和 :: after
       2. 2.13.2. 12.2 ::selection
       3. 2.13.3. 12.3 ::first-letter 和 ::first-line
   14. 2.14. 13.层叠性和选择器权重计算
       1. 2.14.1. 13.1层叠性
       2. 2.14.2. 13.2层叠性的冲突处理
       3. 2.14.3. 13.3复杂选择器权重计算
       4. 2.14.4. 13.4 !important 提升权重
3. 3. 三. 文字与字体属性
   1. 3.1. 0. 目录
   2. 3.2. 1.常用文本样式属性
      1. 3.2.1. 1.1 color 属性
      2. 3.2.2. 1.1.1 color 属性 - 十六进制表示法
      3. 3.2.3. 1.1.2 color 属性 - rgb() 表示法
      4. 3.2.4. 1.1.3 color 属性 - rgba() 表示法
      5. 3.2.5. 1.2. font-size 属性
      6. 3.2.6. 1.3. font-weight属性
      7. 3.2.7. 1.4 font-style 属性
      8. 3.2.8. 1.5 text-decoration 属性
   3. 3.3. 2. 字体属性详解
      1. 3.3.1. 2.1 font-family 属性
      2. 3.3.2. 2.2 定义字体
   4. 3.4. 3. 段落和行相关属性
      1. 3.4.1. 3.1 text-indent 属性
      2. 3.4.2. 3.2 line-height
      3. 3.4.3. 3.3 单行文本垂直居中
      4. 3.4.4. 3.4 font合写属性
   5. 3.5. 4.继承性
4. 4. 四：盒模型
   1. 4.1. 0.目录
   2. 4.2. 1. 认识盒模型
   3. 4.3. 2. padding 是四个方向的
      1. 4.3.1. 2.1 padding 的二数值写法
   4. 4.4. 3. margin 是盒子的外边距
      1. 4.4.1. 3.1 margin 有也四个方向
      2. 4.4.2. 3.2 margin的塌陷
      3. 4.4.3. 3.3 一些元素有默认的margin
   5. 4.5. 4. 盒子的水平居中
   6. 4.6. 5. box-sizing属性
   7. 4.7. 6. 行内元素和块级元素
   8. 4.8. 7. 行内块
   9. 4.9. 8. 行内元素和块级元素的相互转换
   10. 4.10. 9. 元素的隐藏



• Archive
• Tag
• Cate

Total : 16

2020

• 12/14JavaScript 基础(第一周内容)
• 12/11CSS3基础(第二周内容)
• 12/07CSS3基础(第一周内容)
• 12/05HTML5基础学习
• 12/04秦风·无衣
• 09/01电视剧《摩天大楼》观后感
• 08/30ES6. 7.解构赋值
• 08/30ES6. 3.类
• 08/30ES6. 4.function
• 08/30ES6. 6.Set 和 Map
• 08/30ES6. 5.导入和导出
• 08/28ES6. 2.Array
• 08/22ES6基础学习
• 08/22在小程序中使用自定义组件
• 08/20在小程序中使用flex布局
• 08/19KOA 基础

小程序 NodeJS ES6 杂记 HTML CSS JavaScript



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true

CSS 小程序 Node JavaScript 杂记 HTML 前端

