华清远见html+css笔记

<html lang="en">


<head>
    
    
    <meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>
</head>
<body>
    
</body>
</html>

3.属性和标签

什么是标签:
    html文档中，由 <>包裹起来的对象，比如：
    <head> <body> <html> 等等这些就称作为html文档中的标签
    标签也通常被称为元素！比如 head元素 body元素都是可以的
    注意： html中大多数的标签，都具备某种特殊的语义！
    利用标签的语义化，简单来说，用正确的标签做正确的事！
    标签大部分是成对出现的，比如： <head></head>   开始标签结束标签结束标签通常是以/开头
    但是html中的标签也有例外，某些标签不是成对出现的！只是具备单标签开始标签
什么是属性：
        属性就是标签中所额外向浏览器提供的额外的数据！相关的信息！

标签是具备语义化的，通过标签名可以大致的了解道该标签在作用或者相对应的语义!
但是两个相同的标签之间，可能所携带的属性信息是不同的！通过标签的属性值的变化，向外部展示的信息是有所不同的！
属性的构成：总是以属性名 = '属性值' 这种形式出现。并且总是在标签的开始部分出现！

<开始部分属性名='属性值'>内容部分（被嵌套的子标签）<结束部分>
一个标签可以同时具备多个属性值，如果存在多个属性值，属性名之间使用空格分隔即可
标签属性的分类：
        - 全局属性：全局属性就是任何标签都能使用的属性，称为全局属性！
            常见的全局属性： class 、 hidden 、 id 、 style 、 title等
        - 特定属性（私有属性）: 特定属性就是某些特定的标签才具备的属性称为特定属性！

4.html中常见的语义化标签

常见的语义化标签：
1. 标题标签 h1-h6

 <!-- h1-h6 标题标签  通常使用h1-h3就可以了，h4-h6基本不会使用！ -->
 <h1>标题一</h1>
 <h2>标题二</h2>
 <h3>标题三</h3>
 <h4>标题四</h4>
 <h5>标题五</h5>
 <h6>标题六</h6>

2. 段落标签 p

<!-- 段落标签 p通常表示一段文本 -->
<p>
   Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores odio quaerat, sapiente fugit at suscipit veritatis cumque saepe nihil totam! Asperiores un
</p>

3. 换行标签 br

 <!-- 换行标签  br -->
 xxxx
 <br/>
 yyyyy

4. 水平线标签 hr

 <!-- 换行标签  br -->
 xxxx
 <br/>
 yyyyy

5. i斜体标签（iconfont字体图标的容器来使用） i

 <!-- i斜体标签 -->
 <i>你好，世界！</i>

6. em 标签斜体字注重文本的语调加重

<!-- em 标签 斜体强调内容 -->
<em>hello world!</em>

7. b标签粗体字加粗

 <!-- b标签 粗体字 -->
 <b>今天天气不错！</b>

8. strong 粗体强调重要内容

  <!-- strong标签 粗体 -->
  <strong>今天天气还行！</strong>

9. blockquote 长引用标签

<!-- blackquote 长引用 -->
<blockquote>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate illum odio aperiam ea libero labore ad dolorem delectus. In, exercitationem. Cumque reprehenderit amet dolor cupiditate magnam illo consectetur repellendus provident!
</blockquote>

10. q 短引用

<!-- q 短引用 -->
<q>
   走的人多了世上便有了路！
</q>

11. sub 文本下角标

<!-- sub 下脚标 -->
角<sub>标</sub>

12. sup 文本上角标

 <!-- sup 上角标 -->
 角<sup>标</sup>

13. del 删除线

 <!-- 删除线 -->
 <del>1999</del>

14. ins 插入线

<!-- 插入线 -->
<ins>2999</ins>

5.元素的分类

元素是有类别划分的，从元素的排列位置来看，可以将元素分为两大类.
- 行内元素
    1.行内元素不会独占一行，会在一行上集中排列，直到该行无法排列为止
    2.通常是包裹其他的行内元素以及文本信息
    3.不允许设置元素的宽、高，行内元素的宽高由其内容决定！
- 块元素
    1.块元素会独占页面的一行排列显示
    2.块元素中可以嵌套任何的块元素(p元素除外，p元素不能嵌套其他的块元素！)或者行内元素或者文本信息
    3.可以设置元素的宽和高，默认的宽度是其父元素的宽度！
- 行内块元素
    1.可以设置宽高
    2.不会独占一行

6.空格问题

空格问题：
html中仅可以识别一个空格！如果是连续的多个空格!浏览器不会对其进行处理！
统一看成是一个空格来处理！
利用空格产生间隔！使文本进行居中！
实体字符：html标准中对一些特殊的字符进行了特殊编码，特殊编码的内容被称为实体字符！
常见的实体字符包括：> < 空格商业符号等
可以利用html中所规定的一些特殊的实体字符来完成需求！
使用实体字符： &实体字符编码;

7.div和span元素

div和span元素两个都不具备任何的语义！
div是典型的块级元素，div通常是作为一种布局容器使用！
span是典型的行内元素，span通常是作为行内元素以及文本信息的容器使用！

注意：p元素除外，p元素中不能嵌套其他的任何块级元素

8.列表标签

列表标签：HTML中将列表类型分为三类，有序列表(ol)、无序列表(ul)、定义列表(dl)
1. 有序列表
     1.铅笔
     2.橡皮擦
     3.文具盒

<!-- 有序列表  ol -->
<ol>
   <li>铅笔</li>
   <li>橡皮擦</li>
   <li>文具盒</li>
</ol>

有序列表在html中的表示是使用ol标签，列表中的每一项是使用li标签来表示
2. 无序列表
     #铅笔
     #橡皮擦
     #文具盒

<!-- 无序列表  ul -->
<ul>
   <li>铅笔</li>
   <li>橡皮擦</li>
   <li>文具盒</li>
</ul>

 <!-- 
    ol和ul标签都属于块级元素，并且它们的子项li标签也是块元素
  -->
 <span>456</span>

无序列表在html中的表示是使用ul标签，列表中的每一项是使用li标签来表示
3. 定义列表（类似于解释型列表）
名词解释
xxxx
     对xxx进行描述解析
yyyy
     对yyy进行描述解释
nnnn
     对nnn进行描述解释

<!-- 定义列表 -->
<dl>
   <dt>hello</dt>
   <dd>对其进行解释</dd>
   <dt>hello</dt>
   <dd>对其进行解释</dd>
   
   <dt>hello</dt>
   <dd>对其进行解释</dd>
</dl>

9.img标签

img标签（图片标签）：利用img标签向文档内引入外部(网络资源/本地资源)的图片资源
img标签是一个单标签（自结束标签）
img标签的属性：
    src属性：外部资源的地址路径
    alt属性：对图片的描述属性，文字信息的描述，当图片加载不成功时，alt属性才会发生作用
    width属性：调整图片的宽度单位是px 像素单位
    height属性：调整图片的高度单位是px 像素单位
    注意:调整图片的宽度或者高度时，只需要调整其中一个即可，另一个会自适应调整！
    但是，在正常的开发中我们不会使用width属性和height属性！

10.超链接

超链接是可以让我们从一个页面跳转道其他页面(外部页面或者本地页面)，或者是当前页面的其他位
超链接的意义在于，通过超链接我们可以实现全世界的资源共享！全球的web资源（网页）进行互联!

html中使用a标签来定义创建一个超链接
    a标签的属性：
        href属性：指定跳转的目标路径
         - 值可以是一个外部网站的地址
         - 也可以是内部页面的地址
        traget属性：两个值
            - _blank:新网页以新窗口的方式打开
            - _self: 默认值，新网页在当前窗口中打开
注意：
    1.超链接是一个行内元素
    2.a标签比较特殊，a标签可以嵌套除它自身以外的任何元素！

a标签的三种跳转方式：
    1. 跳转到其他网页！（外部的或者本地的）
    2. 跳转到当前页面的任意位置（锚点跳转，了解）
    3. 暂时禁用跳转（#javaScript:;）

<!-- 跳转到外部网页 -->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<!-- 跳转到本地网页 -->
<a href="./作业二评讲.html">作业二评讲</a>
<!-- 跳转到当前页面的任意位置  锚点跳转-->
<!-- 锚点跳转要配合被跳转元素的id值进行使用！ -->
<a href="#p01">锚点跳转到，xxx段落</a>

<!-- 抖动跳转  href属性为空，就会导致页面的抖动跳转！-->
<!-- 预防抖动跳转，href属性值设置为 #JavaScript:; -->
<a href="#javaScript:;">抖动跳转</a>

11.路径问题

路径问题
路径：路径就是一份电子地图！通过这个'地图'可以找到对应的文件和资源！
路径的分类：
     - 绝对路径：任何文件和资源都存在一个绝对路径，通过绝对路径可以让其他任何位置的文件准备的找到！
     - 相对路径：以当前文件为中心，进行寻找对应的其他资源和文件！
            相对路径的书写方式： / (当前文件所在的根目录)   ./(当前文件所在目录路径) ../(当前文件所在的上一级目录路径)
总结：在项目的实际开发中，以相对路径为主！尽可能的不要使用绝对路径访问资源！
注意：以后在开发中，学习中如果发现你的某个文件的资源无法成功的导入到文件中！请先思考是否是路径错误！

<!-- 绝对路径访问图片 -->
<img src="C:\Users\JiangJJ\Desktop\221203-h5\html+css\day02\OIP-C.png" alt="">
<!-- 相对路径访问图片 -->
<img src="./OIP-C.png" alt="">

二.CSS主要内容

1.CSS简介

web标准：
    结构（HTML）
    表现（CSS）
    行为（js）
CSS（层叠样式表）：
css主要是用来设置html页面中的元素，美化元素，使得元素变得更加的好看！
css也可以让我们的页面变得更加的丰富多彩！页面的布局更加的灵活，排版更高效！
HTML文档中如何使用CSS:
有三种方式可以在HTML文档中引入和使用CSS
1、行内样式(内联样式) 了解即可
- 在html中每一个元素身上都存在一个全局属性，style ，通过style属性来设置元素的样式
- 该方式存在的问题：
    - 使用内联样式的方式，样式只能对一个标签元素生效
    - 如果有需求需要大量的整改页面的样式时，内联样式的修改是很麻烦的一件事情
    - style属性的优先级特别高！不利于后续选择器进行修改！
总结：在开发中切记一定不要使用style属性来设置样式！
2、内部样式表
- 在HTML文档中，通过style标签来设置文档相关的css样式属性
- 存在的问题：
    样式的复用率不高，建议开发中尽可能的不要使用该方式，在学习阶段可以使用
3、外联样式文件最佳方式
新建一个.css的样式文件，在该文件中编写相应的css样式属性
然后引入到有需要的html文档中进行使用！
html文档中引入css文件是利用link标签进行样式表的引入！link标签位置写于head标签中！

优点：
     - 文件的复用性强
     - 方便统一更改
     - 利于浏览器的缓存机制，加快网页的加载，提高用户体验！更优化！

<!-- 1. 行内样式 style属性 -->
<div style="color: red;">你好，世界！</div>
<div style="color: red;">hello world</div>
<!-- 2. 内部样式表  style标签 -->
<!-- 一般style标签是放在head标签中 -->
<div>你好世界！</div>
<div>hello world！</div>
<!-- 3. 外部样式表  css文件 -->
<div>你好世界！</div>
<div>hello world！</div>

2.css的注释语法

/* css中的注释语句：注释区 */

3.css的语法规则

css的基本语法规则：
css的语法规则，主要是由两个部分组成：选择器声明块
选择器：通过css所提供的合法的方式进行元素的选择
声明块：声明块就是{}所包裹的样式属性集合，声明块中的样式属性是可以同时具备多个的！
每个样式属性的格式：键值对的形式展示 key:value;


        div {
            /* color设置文本的颜色 */
            color: red;

            /* width设置元素的宽度  px是像素单位 */
            width: 200px;

            /* height设置元素的高度 px同上 */
            height: 200px;

            /* 设置元素的背景色  */
            background-color: yellow;
        }

4.css的基础选择器

选择器：利用css所提供的各种方式的选择器，对页面中的元素进行选择！
要更改一个元素的样式，前提是你要选中对应的元素！
基础选择器：
    元素选择器：通过元素的标签名进行选择，该方式会选择页面中所以同名的元素
    格式： div p span a h1 等都属于元素选择器
    id选择器：通过标签元素的id属性值，来选择对应的元素，注意id属性是唯一的（类似于人的身份证
    格式: #id值
    类选择器：通过标签元素的class属性值，来选择同类别的元素！
    注意：这里的同类别，不是说 div 和 div是同类别（并不是说标签名相同的才是同类别元素）
          同类别是指各元素的class值是相同的！
          class值不唯一！
          div class=demo
          span class=demo
    格式： .class值
    通配符选择器：选择页面中所以的元素
    格式： *



  /* 元素选择器  格式:  标签名 */
  div {
      color: red;
  }       
  
  span {
      color:pink;
  }
  p {
      color: yellow;
  }
  h1 {
      color: blue;
  }
  /* id选择器  格式： #id值 */
 #box1 {
  color: red;
 }
 /* 类选择器 格式： .class值 */
 .mydemo {
  color: red;
 }
 /* 通配符选择器  格式： * */
 * {
  color: red;
 }

[点击并拖拽以移动]

5.css的复合选择器

复合选择器：是由两个或多个基础或其他选择器共同构成的！称为复合选择器！
- 交集选择器: 同时满足多个选择器的元素才能被选中
    语法：选择器1选择器2选择器3 {}
    注意：各选择器之间没有任何的符合包括空格
- 并集选择器：被选择的元素只需要满足其中一种选择器即可被选中！
    语法：选择器1,选择器2,选择器3 {}
    注意：各选择器之间是用,逗号进行分隔

/* 交集选择器 */
div.test {
    color: red;
}

 /* 并集选择器 */
 div,span,p,.test{
     color: red;
 }

6.css的关系选择器

关系选择器：由两个或多个其他选择器组合构成！
元素与元素之间的关系！
元素与元素之间存在哪些关系？
html中各元素，如果通过关系来区分的话，可以大致分为以下几种：
父元素、子元素、祖先元素、后代元素、兄弟元素
父元素：该元素直接去包含了子元素的元素称为父元素
子元素：被父元素直接包裹的元素，叫做子元素
兄弟元素：拥有共同的父元素的元素称为兄弟元素
祖先元素：包裹着其他元素的元素就是祖先元素，父元素其实也是特殊的祖先元素！二级嵌套或多级嵌套的元素！
后代元素：被祖先元素的嵌套包裹的元素都可以称为是后代元素，子元素是特殊的后代元素
基于以上的关系，css提供了以下几种，关系选择器！
子代选择器：
格式：选择器1>选择器2>选择器3...
注意：子代选择器主要是看直接的父子关系！
后代选择器：
格式：选择器1 选择器2 选择器3 ...
注意：后代选择器主要是看重祖先和后代元素的关系，（父元素和子元素都是特殊的元素）
总结：后代选择器所包含的范围更广！因为子元素也是特殊的后代元素！
子代选择器它只会去看父元素下的子元素！它不会管元素下的其他后代元素！

兄弟选择器:
格式：
- 1. 选择器1+选择器2 选中指定元素后面的第一个兄弟元素
- 2. 选择器1~选择器2 选中指定元素后面的所以兄弟元素


        /* 子代选择器 */
        .father>div{
            color: red;
        } 

        .father>.son2 {
            color: pink;
        } 

        .father>.son2>div {
            color: red;
        } 


        /* 后代选择器 */
        .father p{
            color: red;
        }
 
        .father>p {
            color: red;
        } 

        html  p {
            color: red;
        } 



        /* 兄弟选择器 */
        #li2+li {
            color: red;
        } 

        #li2~li {
            color: red;
        }

7.css的属性选择器

属性选择器: 通过标签元素自身的某个属性来选择元素的
格式: [属性相关语法]
1. [属性名] 选择所有含有该属性的元素
2. [属性名=属性值] 选择所有含有该属性并且值是指定数据的元素
3. [属性名^=属性值] 选择所有含有该属性并且也指定字符开头的元素
4. [属性名$=属性值] 选择所有含有该属性并且也指定字符结尾的元素
5. [属性名*=属性值] 选择所有含有该属性并且属性值中拥有指定的字符的元素

 [属性名]
 [title] {
     color: red;
 }
 [属性名=属性值]
 [title='div01'] {
     color: pink;
 }
 [属性名^=属性值]
 [title^='xyx'] {
     color: red;
 }
 [属性名$=属性值]
 [title$='01'] {
     color: pink;
 }
 [属性名*=属性值]
 [title*='0'] {
     color: blue;
 }

8.css的结构伪类选择器

伪类：不存在的类，是一些特殊的类！代表的是元素的某种状态
在css中可以将伪类进行分类，分成两大类：
    结构型伪类：与hmlt结构相关的类
    动态伪类：与用户的交互相互的类
伪类的语法一般是： :伪类名
注意：伪类选择器大多数情况下不会单独进行使用，通常和其他选择器配合使用！
结构伪类（常用的）：
    :first-child 父元素下的第一个子元素
    :last-child 父元素下的最后一个子元素
    :nth-child() 父元素下的第n各子元素
注意：以上这些伪类都是将父元素下的所有子元素进行排序的！包括不同类型的节点！
    :first-of-type 父元素下同类型的子元素进行排序中的第一个子元素
    :last-of-type 父元素下同类型的子元素进行排序中的最后一个子元素
    :nth-of-type() 父元素下同类型的子元素进行排序中的任意的子元素
注意：以上的三个伪类的功能和之前的三个伪类是类似的，不同点是他们只在同类型元素中进行排序

 :first-child {
    color: red;
 } 
 li:first-child {
     color: red;
 }
 li:last-child {
     color: blue;
 }
 li:nth-child(2n+1) {
     color: red;
 }
 span:first-of-type {
     color: red;
 }
 span:last-of-type {
     color: blue;
 }
 i:first-of-type {
     color: yellow;
 }
 p:nth-of-type(2) {
     color: red;
 }

9.css的动态伪类

动态伪类主要是和用户的交互相关
常用的动态伪类：
     :link 用来表示没有被访问过的超链接(只能用于a标签)
     :visited 用来表示已经被访问过的超链接(只能用于a标签)
     :hover 表示鼠标移入到某元素内（用于任何元素）
     :active 表示点击某元素 (用于任何元素)
注意：伪类尽可能的不要单独使用！请配合其他的选择器使用

a:link {
    color: yellow;
}
a:visited {
    color: red;
}
.box1 {
    width: 200px;
    height: 200px;
    background-color: pink;
}
.box1:hover {
    width: 500px;
    height: 500px;
    background-color: red;
}
.box1:active {
    background-color: yellow;
}

10.伪元素选择器

伪元素选择器：
伪元素，是一种假的页面元素！会动态的进行改变！更多是表示页面中一些特殊的位置！
伪元素通常是使用： ::伪元素名
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
注意：以下两个伪元素必须搭配css中的content属性进行使用！
::before 元素的最开始的位置
::after 元素的末尾位置

p::first-letter {
    color: red;
    font-size: 50px;
}
p::first-line {
    background-color: yellow;
}
p::selection {
    background-color: blue;
} 
div::before {
    content: 'xxxx';
    color: red;
    font-size: 50px;
}
div::after {
    content: 'yyyy';
    color: blue;
    font-size: 60px;
}

11.css的三大特性

css的三大特性：
    - 层叠性
    - 优先级(选择器的权重)
    - 继承性

12.css的层叠性

层叠性：该特性是主要解决CSS样式冲突问题 (拉架）
样式冲突：当一个元素被多个相同的选择器选中时，设置了相同的属性但是属性值不一样！那么css就会
通过层叠性进行解决，层叠性的特点就是选择最后一个（最靠近元素的一个选择器）属性作为该元素的css属性值
注意：层叠性的作用只能体现在权重相同的选择器中，如果选择器的权重被打破，层叠性不再发挥作用！

13.css选择器优先级

css的选择器优先级：
    优先级：在css的各个基础选择器中，每一个基础选择器的权重是不同！
    基础选择器：元素元素选择器、id选择器、类选择器、通配符选择器
    权重原则：css权重指向选择器的优先级不同，有两条或多条样式作用于一个元素时，权重高的那条样式才会对元素起作用！
    如果权重相同就交给层叠性来处理！
    各选择器之间的权重值：从低到高
        继承的样式：无限低
        通配符选择器： 0，0，0，0
        元素选择器：   0，0，0，1
        类/属性/伪类选择器: 0，0，1，0
        id选择器：     0，1，0，0
        行内样式(标签的style属性)： 1，0，0，0
        !important        无穷大(注意该方式慎用！)

属性选择器、子代选择器、后代选择器、伪元素选择器这些选择器有没有权重？
以上这些选择器，也有权重问题！他们的权重是通过计算的来的！
总结：以上各选择器的权重都是基础值，但并不是最终的权重值！如果有多个选择器组合！那么会自动将各基础选择器
的权重值相加得到最终的权重值！但是不管选择器如何组合！它权重的最高位是由其最高的选择器来决定的!
权重的相加是不会进位的！

14.css的继承性

继承性：也叫做样式的继承，CSS为了方便开发，不至于相同的样式属性频繁的在元素中书写设置，就可以利用
样式的继承性进行解决，将属性传递下去继承下去!继承只发生在祖先元素和后代元素之间！
注意：css中并不是所有的样式属性都允许被继承，只是特定的一些属性才能够被继承！
可继承的属性：字体相关的（font-）文本相关的(text-) 列表相关的(list-) 字体颜色(color) 等等
w3c官网: https://www.w3schools.cn/
MDN官网: https://developer.mozilla.org/zh-CN/

15.文档流

文档流（常规流）：
- 网页是一个多层的结构，一层叠着一层！在整个网页中有各最底层，原始层就是我们的文档流！
所有的在网页中的元素默认都是应该遵循在文档流中排列的规则！
基于文档流这个概念，所有的html元素就会存在两个概念：
1、元素遵循文档流的规则（元素在文档流中的表现）
    块元素的特点：
        1.块元素会在页面中独占一行（自上而下垂直排列）
        2.默认宽度是其父元素的宽度（子元素的宽度默认是填满父元素）
        3.默认高度是被自身的内容撑开/或者靠自身的子元素/或者设置一些相关的css属性
    行内元素的特点：
        1.行内元素不会独占页面的一行，只占自身大小的区域
        2.行内元素在页面中是从左往右水平排列的，当一行无法容纳时才会自动换行
        3.行内元素的默认宽度和默认高度都是由自身的内容决定的！（行内元素不能设置width和height属性）
    行内块元素的特点：
        1.可以设置宽高
        2.不会独占一行

2、元素不遵循文档流的规则（元素不在文档流中的表现脱离文档流）
   1.元素脱离文档流后，不再占据文档流的实际位置！
   2.元素脱离文档流后，元素的层级会自动提高！
   3.元素脱离文档流后，将不在区分块元素，行内元素，行内块元素！统一视为一种元素，脱离文档流的元素
   4.元素脱离文档流后，默认的宽度和高度由内容决定的！也可以自行设置宽高！
   float:left;   浮动元素的特点、脱离文档流元素的特点

16.盒模型

盒模型（盒子模块、框模型）：
    - css将网页中的所有元素都看作成一个矩形盒子
    - 元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到合适的位置！
    - 每一矩形盒子都是由以下几个部分组成：
        1.内容区（content）
        2.内边距 (padding)
        3.边框    （border）
        4.外边距   (margin)
盒模型-内容区：
    盒子模型中的内容区是用于排列所有的子元素以及文本内容的区域，内容区的大小由csss的width和hight决定
    内容区的大小也会影响整个盒子的大小
盒模型-边框:
    边框属于盒子的边缘部分，边框以内属于盒子内部，超过边框的就是盒子外部区域，边框的大小将会影响到整个盒子的大小
    css中设置盒子的边框，由以下三个属性决定：
        边框的宽度： border-width
        边框的颜色： border-color
        边框的样式： border-style
        利用css提供的简写属性： border：1px solid red 同时设置了宽度、颜色、样式，这三个值没有顺序关系
    - border-width 可以同时指定四个方向的边框宽度，也可以定向指定，根据值的不同
        border-width：
            值的情况：
                四个值：上右下左   border-width: 10px 20px 30px 40px
                三个值：上左右下    border-width： 10px 20px 10px
                两个值：上下左右     border-width： 10px 20px
                一个值：上下左右      border-width： 10px
    - border-color 用法和border-width是一样的
    - border-style 边框的样式：
        值的情况：
            - solid 实线
            - dotted 点状虚线
            - dashed 虚线
            - double 双实线
            - none    无边框（默认值）

盒模型-内边距：
        - 内边距是指内容区与边框之间的距离
        - 每个盒子一共由四个方向的内边距
        可以分别通过css属性设置：
            padding-top 上内边距
            padding-right 右内边距
            padding-left   左内边距
            padding-bottom 下内边距
        大多数情况下使用简写方式： padding：
         根据值数量的不同，效果不同：
            四个值：上右下左
            三个值：上左右下
            两个值：上下左右
            一个值：上下左右
    注意：内边距的大小设置会影响盒子可见框的大小
盒模型-外边距
    - 外边距不在盒模型自身上，
    - 外边距不会影响盒子可见框的大小
    - 每个盒子具备四个方向的外边距：
        margin-top 上外边距设置正值或者负值
        margin-right 右外边距
        margin-left 左外边距
        margin-bottom 下外边距
    除了以上四个属性可以设置外边距之外，还可以利用简写形式margin同时为盒子的四个方向设置外边距
    margin属性的用法和padding是一模一样的。

.box {
    /* 盒子的内容区 内容区的设置会影响盒子可见框的大小*/
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 盒子的内边距  内边距的设置会影响盒子可见框的大小*/
    /* padding */
    padding: 10px 20px 30px 40px;
    /* 盒子的边框 边框的设置会影响盒子可见框的大小 */
    border: 10px solid black;
    /* 总结：默认情况下一个盒子可见框的大小由 内容区+内边距+边框 */
    /* 盒子的margin 外边距 外边距的设置会决定盒子的摆放位置！ */
    margin-top: 100px;
    margin-left: 50px;
}

17.元素的溢出

子元素是在父元素的内容区进行排列的
如果子元素的大小超过了父元素，则子元素就会从父元素中溢出
注意：子元素所溢出的部分不会占据文档实际的位置！

处理溢出通过css的overflow属性处理溢出的子元素部分
    可选值：
        visible,默认值子元素从父元素中溢出，在父元素外部的位置显示
        hidden，溢出的内容将会被裁剪，不会进行显示
        auto 根据溢出的方向生成滚动条，通过滚动条的方式查看子元素所有的内容

18.外边距折叠

垂直方向的外边距重叠（折叠）：相邻的垂直方向的外边距会发生重叠现象
- 兄弟元素
     - 兄弟元素间的垂直外边距会取两者之间的较大值作为两个元素的外边距
    兄弟元素之间的外边距折叠是对开发有利的！不需要过度的去处理！

- 父子元素
     - 父子元素间外边距，子元素的外边距会传递给父元素，导致父元素也会更改盒子的位置！
     - 父子外边距的折叠是不好的，会影响到页面的布局，必须要进行处理
     - 处理方式：
        1.给父元素开启BFC空间
            - BFC特殊的块级领域！不会影响其他元素！
            - overflow：hidden
        2.设置父元素的padding
        3.设置父元素的border

19.行内元素的盒模型

html文档中所有的元素（块元素、行内块元素、行内元素）都是一个矩形盒子！
但是，行内元素的盒模型比较特殊！
矩形盒子组成部分 = 内容区 + 内边距 + 边框 + 外边距
单独讨论：
    行内元素的盒模型：
       - 行内元素不支持设置宽度和高度！
       - 行内元素可以设置padding，但是垂直方向的padding不会影响页面，不起作用
       - 行内元素可以设置border，但是垂直方向的border不会影响页面的布局
       - 行内元素可以设置margin，但是垂直方向的margin不会影响布局

20.元素类型的转换

元素的类型转换，
    块元素 ==》行内元素，行内块元素
    行内元素 ==》块元素，行内块元素
    .....
通过css的样式属性，display实现转换
    可选值：
         inline：设置为行内元素
         block：设置为块元素
         inline-block：设置行内块元素
         table: 设置为表格元素了解
         none：将元素设置为不显示(是完全不存在于页面，不是简单的隐藏)
对应元素的隐藏设置，可以利用display：none进行切换
还可以visibility属性来设置元素的显示状态
    可选值：
        - visible 默认值，元素正常显示
        - hidden 元素在页面中隐藏元素不在页面中显示，但是元素依然占据着页面的位置！

span{
    background-color: pink;
    display: block;
    width: 500px;
    height: 500px;
    visibility: hidden;
}

21.盒子的尺寸大小

盒模型，将所有的元素看作为矩形盒子
盒模型组成 = 内容区 + 边框 + 内边距 +外边距
默认情况下，盒子的可见框大小由：内容区 + 边框 + 内边距共同决定的
w3c规定了两种盒模型：ie盒模型，标准盒模型
        标准盒模型大小：内容区 + 边框 + 内边距共同决定的
        ie（怪异）盒模型大小：width + height
通过css的box-sizing属性可以改变盒模型的类型！
    可选值：
        - content-box 默认值，标准盒模型内容区 + 边框 + 内边距共同决定的
        - border-box width + height决定可见框大小

div {
    width: 300px;
    height: 300px;
    padding: 100px;
    border: 10px solid black;
    background-color: pink;
    box-sizing: border-box;
}

22.默认的样式

默认样式：
- 通常情况下，浏览器会自动的为某些元素设置一些默认样式
- 默认样式的存在会影响页面的布局
通常情况下我们去选择清除默认样式的存在！
清除的方式大致分为两种：自己手动清除、利用样式重置表

reset.css文件，它是强硬的重置，它是将一些样式强行的设置为空！
normalize.css文件，它采用的思路，并不是强行的处理默认样式！而是进行默认样式的统一！

23.css常用的其他样式属性

 div {
     width: 100px;
     height: 100px;
     background-color: red;
     /* 元素的透明度 0-1范围值 0不显示 1不透明 */
     opacity: 1;
     /* 元素的轮廓属性 该属性和border类型 使用方式几乎一模一样 */
     /* outline和border的区别在于，outline不占据页面位置是虚化的，border是实化 */
     /* outline: 100px solid black; */
     /* 元素的阴影效果 4个值  阴影效果不占据页面位置 */
     /* box-shadow: 0px 0px 10px yellow; */
     /* 元素的圆角设置 */
     /* border-radius: 50%; */
 }
 ul {
     /* 列表的序号样式设置 */
     /* list-style: none; */
 }
 a {
     /* 清除超链接的下划线 */
     /* text-decoration: none;
     color: red; */
 }

24.布局小技巧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: red;
            text-align: center;

            /* 行间距 等于 自身的高度 */
            line-height: 300px ;
        }


        .son {
            width: 50px;
            height: 50px;
            background-color: yellow;
            margin: 0 auto;
        }
    </style>
    
</head>
<body>
    <div class="father">
        <!-- <div class="son">11</div> -->
        <span>hello</span>
    </div>
    <!-- 需求1：如何让一个块元素水平居中在父元素内 -->
    <!-- margin: 0  auto -->

    <!-- 需求2：如何让行内元素水平居中在元素内 -->
    <!-- text-align: center; -->


    <!-- 需求3：如何让文本信息垂直居中在元素内 -->
    <!--   行间距 等于 自身的高度  line-height: 300px ; -->
</body>
</html>

25.样式小结

/* 字体颜色 */
color: ;
/* 字体大小 */
font-size: ;
/* 字体的粗细 */
font-weight: ;
/* 元素的宽度 */
width: ;
/* 元素的高度 */
height: ;
/* 元素的背景色 */
background-color: ;
/* 元素的外边距设置 */
margin: ;
/* 上外边距 */
margin-top: ;
/* 元素的内边距设置 */
padding: ;
/* 元素的左内边距 */
padding-left: ;
/* 元素的边框 */
border: ;
/* 元素的左边框 */
border-left: ;
border-top: ;
border-width: ;
border-style: ;
border-color: ;
/* 元素的透明度 */
opacity: ;
/* 列表的样式设置序号圆点 */
list-style: ;
/* 文本下划线相关的设置 */
text-decoration: ;
/* 文本的排列模式 left right center */
text-align: ;
/* 行间距 */
line-height: ;
/* 元素的阴影 */
box-shadow: ;
/* 元素的盒模型转换 */
box-sizing: ;
/* 元素的类型转换 */
display: ;
/* 元素的轮廓 */
outline: ;
/* 元素的圆角设置 */
border-radius: ;
/* 元素的溢出设置 */
overflow: ;
/* 元素的隐藏设置 */
visibility: ;

26.浮动属性

通过css的浮动属性可以使得一个元素向其父元素的左侧或者右侧进行浮动
使用 float 属性设置元素的浮动情况：
    可选值：
        none 默认值元素不浮动
        left 元素向左浮动
        right 元素向右浮动
浮动属性是我们常用一种布局手段，该方式可以很便捷的将块元素横向摆放！
注意：元素一旦设置了浮动以后，水平布局是非常方便的！但是元素会完全从文档流中脱离！不再占用文档流中的位置！
元素是一种漂浮的状态！其他正常的元素就会自动的补占位置！
    浮动元素的特点：
        1.浮动元素会完全脱离文档流，不再占据文档流中位置
        2.设置浮动以后元素会向其父元素的左侧或右侧移动
        3.浮动元素默认情况下是不会脱离父元素的掌控
        4.浮动元素向左或向右浮动时，它不会超过它前面的其他浮动元素
        5.如果浮动元素的前面是一个没有浮动的块元素，则浮动元素无法上移

27.浮动元素导致的父元素的高度塌陷问题

解决高度塌陷问题：
    1.给父元素设置固定的高度，防止子元素浮动引起的塌陷
    2.给父元素开启BFC模块
        BFC就是一个特殊的领域！该领域不会受到其他元素的布局影响！
        overflow：hidden；目前来说最优解，影响是最小的对整个文档！
        给父元素设置浮动：
        float：left；该方式不建议使用！

28.清除浮动

clear: both;

29.高度塌陷问题的最终解决

.clearfix::after,
.clearfix::before{
    content: '';
    display: table;
    clear: both;
}
.father {
    border: 1px solid black;
    background-color: red;
}
.son1 {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* margin-top: 50px; */
    float: left;
}

30.字体图标的使用

<!-- 一般采用 i标签来渲染字体图标 -->
<!-- iconfont类是前置类必须要写！ -->
<i class="iconfont icon-sousuo" style="color: red;font-size: 50px;"></i>

31.定位

定位（position):
     - 定位是一种更高级的布局手段
     - 通过定位可以将元素摆放到页面的任意位置
- 如何对一个元素开启定位？
     通过css中的position属性来设置定位
         属性的可选值：
             - static 默认值元素是静止的没有开启定位的模式
             - relative 开启元素的相对定位
             - absolute 开启元素的绝对定位
             - fixed 开启元素的固定定位（了解，不常用）
             - sticky 开启元素的粘滞定位（了解，不常用）

- 元素开启了定位后，还需要设置定位的偏移量！如果不设置偏移量元素不会移动的
    利用css的4个偏移量属性是设置元素的偏移量！
      - top 定位元素和基准点上方向的距离
      - left 定位元素和基准点左方向的距离
      - right 定位元素和基准点右方向的距离
      - bottom 定位元素和基准点下方向的距离
     注意：一般情况下并不需要同时设置四个！通过两个即可！

32.相对单位

相对定位：
    当元素的position属性值，设置为relative则对该元素开启了相对定位模式！

    - 相对定位元素的特点：
        1.元素开启了相对定位后，如果不设置偏移量元素是不会发生任何变化的
        2.相对定位是参照于元素在文档流中的位置进行定位的（参照自身原本的位置，为基准）
        3.相对定位会提升元素的层级
        4.相对定位不会使元素脱离文档流
        5.相对定位不会改变元素的性质，块还是块，行内还是行内，....
     总结：相对定位是对页面布局影响最小的定位方式！

position: relative;

33.绝对定位

绝对定位
    - 当元素的position属性值设置为absolute就为元素开启了绝对定位
    - 绝对定位元素的特点：
        1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
        2.开启绝对定位后，元素会从文档流中脱离
        3.绝对定位会改变元素的性质，（脱离文档流的元素）
        4.绝对定位会让元素提升层级
        5.绝对定位元素是相对于其最近的开启了定位的包含块来定位的
        口诀：‘子绝父相’
    包含块：
        - 正常情况下：
         <html>
            <div>
                <div></div>
            </div>
        </html>
     - 绝对定位找的包含块：
            离它最近的开启了定位的祖先元素，作为它的包含块，并以它的位置为基准进行定位！
            如果它在找的过程中一直没有找到符合条件的包含块，那么它就会以html作为它的参照点来进行定位！

position: absolute;

34.固定定位

固定定位：
    - 将元素的position值设置为fixed则开启了固定定位
    - 固定定位也是一种特殊的绝对定位，所有固定定位的特点基本上和绝对定位的特点的一致！
    注意：唯一不同是固定定位永远参照于浏览器的视口进行定位

position: fixed;

35.粘滞定位

粘滞定位:
   - position设置为 sticky开启粘滞定位
   - 粘滞定位和相对定位的特点基本一致
   - 不同点是粘滞定位可以在元素到达某个位置时将其固定

position: sticky;

36.z-index属性只能用于开启了定位的元素！

37.元素背景相关属性

元素背景相关的一些css属性
1. 设置元素的背景颜色 bg-color
background-color: red;

2.设置元素背景图片 bg-image
background-image: url('./OIP-C.png');

背景图片的设置，与元素大小有关
    - 如果背景图片小于元素，则背景图片会自动在元素中平铺并且将元素填满
    - 如果背景图片大于元素，将会一个部分背景在元素显示
    - 背景图与元素大小一致，正好就显示背景图！

3.图片的背景重复方式的设置   bg-repeat

    可选值：
        1. repeat 默认值，背景会沿着元素x轴y轴双方向重复
        2. repeat-x x轴方向重复
        3. repeat-y y轴方向重复
        4. no-repeat 背景图片不重复


background-repeat: no-repeat;
4.图片的位置设置 bg-positon x，y

    图片位置的指定两种方式：
        - 具体的坐标值
        - 方位词 top left right....

background-position: top center;
5.设置背景展示的范围 bg-clip

    可选值：
        - border-box 默认值背景在边框的下方
        - padding-box 背景不会在边框，只出现在内容区和内边距
        - content-box

background-clip: content-box;
6.背景图片的大小设置
bg-size
注意：背景图片的大小设置，一般只设置一个值另一个值自适应！防止破坏图片比例！
- cover 之间将元素铺满，比例不变
- contain 铺满元素，但是通过单向设置图片的大小，保证图片比例不变情况下！尽量平铺元素
background-size: contain;
简写属性 bg
background: url('./OIP-C.png') top center no-repeat;

38.精灵图（雪碧图）

精灵图(雪碧图):就是将网页中大量用到的小图片,集合成一张大图片!
然后利用css的背景属性!进行使用!
好处:
1.一张完整的大图片所占的存储空间远远低于,每个单个的图片相加所需要的存储空间!
2.小图片的加载是频繁的!它会更加具体图片的数量进行加载
3.如果集合成一张精灵图,则网页只需要加载一次!优化网页!

39.html中的表格标签

表格:
    在现实生活中,我们经常是需要使用表格进行数据的展示!
    课程表成绩单.....
    在网页中我们是通过table标签来创建一个表格元素!
    H5中一个标准的表格组成:
        头部 thead
        主体 tbody
        底部 tfoot
        th 表示头部 thead中的单元格
        td 表示除头部外的单元格内容
        tr 表示行

单元格的合并：

<!-- rowspan 纵向合并 -->
<td rowspan="2">1</td>
<!-- calspan 横向合并 -->
<td colspan="2">1</td>

40.html中的表单标签

表单:
    - 对数据的收集!并且利用表单发送给服务器!
html中使用form标签来创建一个表单!
form的属性:
    action 表单要提交的服务器地址 ,填写服务器的地址!

表单的控件元素: input(输入型的控件根据该控件的type值的不同!所展示的控件形态也不同!)
input:
    - type属性:
        常见的type属性(常用的):
            - text 文本输入框
            - password 密码输入框
            - radio 单选框
            - checkbox 多选框
            - button 普通按钮控件
            - submit 提交按钮控件
            - reset   重置按钮控件
    - name属性
     注意:数据要想提交给服务器,那么每一个表单控件都应该指定一个name属性值
    - value属性
     value属性是与name属性进行搭配使用, 一个表单控件必须存在 name和value
     name和value就会构成一种数据格式: name=value
    - placeholder属性用于输入框的提示描述
    - disabled 禁用控件并且数据不能提交给服务器
    - readonly 只读控件数据不能修改但是可以提交给服务器
     - 其他的表单控件
        按钮 button
        下拉列表 select
                   下拉项 option
- label 标签,该标签的作用是用于绑定输入控件! 利用for属性绑定控件的id值

<form action="./06_服务器.html">
  
   <input type="text" name="user">
   <input type="password" name="pwd">
   <input type="radio" name="sex" value="男">
   <input type="radio" name="sex" value="女">
   <input type="checkbox" name="food" value="牛肉">
   <input type="checkbox" name="food" value="羊肉">
   <input type="checkbox" name="food" value="猪肉">
   <input type="button" value="普通按钮">
   <input type="submit" value="提交按钮">
   <input type="reset" value="重置按钮">
</form>

<form action="">
   <div>
        <label for="myuser">账号:</label>
        <input id="myuser" type="text" name="user"  value="admin"  >
   </div>
   <div>
       密码: <input type="password" name="pwd">
   </div>
   <div>
       性别: 
       男<input type="radio" name="sex" value="男">
       女<input type="radio" name="sex" value="女">
   </div>
   <div>
       爱好: 
       篮球<input type="checkbox" name="ah" value="篮球">
       游泳<input type="checkbox" name="ah" value="游泳">
   </div>
   <div>
       <input type="reset" value="重置按钮">
       <input type="submit" value="提交按钮">
   </div>
   <div>
       居住城市:
       <select name="city" id="">
           <option value="cd">成都</option>
           <option value="cq">重庆</option>
           <option value="sh">上海</option>
       </select>
   </div>
   <div><button type="button">按钮</button></div>
   <input type="file">
   
</form>

41.计算属性

 .father {
     width: 400px;
     height: 400px;
     background-color: pink;
     position: relative;
 }
 .son {
     width: 200px;
     height: 200px;
     background-color: red;
     position: absolute;
     left: calc(50% - 100px);
     /* 先往右侧移动200px,然后再往左侧移动100px */
     /* 50%-100px */
     /* calc是计算属性,专门用于参数值的计算,里面合法的运算符 + - * / */
     /* 计算属性中,运算符的左右两侧必须有空格 */

42.轮播图

css轮播图的做法有很多!
    - 移动式轮播图
    - 画面的渐入渐出
    - 定点切换
- 移动式轮播图
     - css的动画属性
     - 动画的概念:动画的本质就是一帧一帧的画面组成的!利用一定规律进行播放!从而形成动画!
     - 利用css动画属性, 为元素设置动画帧

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 为该元素设置动画帧 */
    /* 动画帧的名字  move */
    /* 动画整体持续的事件  5s */
    /* 动画整体播放的速度是匀速播放 linear */
    /* 动画重复播放  infinite*/
    animation: move 5s  linear  infinite;
}
/* 创建了一段动画帧 */
@keyframes move {
    from {
        margin-left: 0px;
    }
    to{
        margin-left: 500px;
    }
}

<style>
    @keyframes lunbotu {
        0%,10% {
            margin-left: 0px;
        }
        25%,35% {
            margin-left: -100%;
        }
        50%,60%{
            margin-left: -200%;
        }
        75%,85%{
            margin-left: -300%;
        }
        100%{
            margin-left: -400%;
        }
    }
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width: calc(5 * 100%);
        height: 400px;
        outline: 1px solid red;
        margin-left: 0px;
        animation: lunbotu linear 10s infinite;
    }
    .box {
        width: 400px;
        height: 400px;
        outline: 1px solid black;
        margin: 0 auto;
        overflow: hidden;
    }
    ul>li {
        width: 400px;
        height: 400px;
        float: left;
    }
    li:nth-child(1) {
       
        background-color: yellow;
    }
    li:nth-child(2) {
       
        background-color: red;
    }
    li:nth-child(3) {
       
        background-color: blue;
    }
    li:nth-child(4) {
       
        background-color: pink;
    }
    
    li:nth-child(5) {
       
       background-color: yellow;
   }
</style>

43.flex弹性盒

flex (弹性盒)：
    - 是css中的又一种高级的布局手段，它主要用来替代浮动的！
    - flex可以使得元素具有弹性！让元素可以跟随页面发送变化！
    - 弹性容器：为一个元素开启了flex时，该元素就是弹性容器，弹性盒
        - 利用css的属性 display 开启
           display:flex 将元素设置为块级弹性容器
           display：inline-flex 将元素设置为行内块的弹性容器
    - 弹性元素（项目元素）：弹性容器下的子元素就称作为，弹性元素！项目元素！
    元素一旦开启了flex布局，那么该容器就自动生成两个轴线！
    分别是主轴和侧轴
    - 主轴：默认情况下，主轴就是横向的x轴，方向是从左往右
    - 侧轴：默认情况下，侧轴就是纵向的y轴，方式是从上往下
    注意：弹性元素，就会在主轴和侧轴上进行排列！
    - css的属性设置
    - 弹性容器设置相关的css属性
    - 以下这些属性都是设置在弹性容器身上的！
     1. flex-direciton 指定容器中的主轴和侧重方向！
        可选值：
          - row 默认值主轴是x轴方向是从左往右，侧轴是y轴，方向是从上往下
          - column 主轴是y轴方向是从上往下，侧轴是x轴，方向是从左往右
     2. flex-wrap 设置弹性元素是否在弹性容器中换行
        可选值：
            nowrap 默认值弹性元素不会换行
            wrap 元素可以进行换行
    3. flex-flow 该属性是 direciton和wrap属性的简写！
    4. justify-content 分配主轴上的空白空间
       可选值：
        flex-start 元素从主轴的起点排列默认值
        flex-end   元素从主轴的终点排列
        center 元素居中排列
        space-around 空白分布到元素的两侧
        space-between 空白均匀分布的元素之间，开始元素顶格容器边缘，末尾元素顶格容器的边缘
        space-evenly 空白均匀分布到元素
    5. align-items 设置元素在侧轴上对齐的方式
         可选值：
            - streth 默认值，如果元素未设置高度或者宽度，则将元素沿着侧轴填满
            - flex-start 元素不会拉伸，沿着侧轴起点对齐
            - flex-end 元素不会拉伸，沿着侧轴终点对齐
            - center 侧轴居中对齐
            - baseline 文本基线对齐了解
    6. align-content   分配侧轴上的空白空间，
       注意：该属性只能用于容器开启了换行模式才能生效 flex-wrap：wrap
       可选值：
         flex-start 所有元素向侧轴的起点对齐
         flex-end   所有元素向侧轴的终点对齐
         center   所有元素向侧轴的中间对齐
         space-around 空白分布到元素的两侧
         space-between 空白均匀分布的元素之间
         stretch      空白单向向元素一侧分配，产生间隙

- 弹性元素的属性：
    1. order 排序数值越小排列越靠前默认为0
    2. flex-grow 指定弹性元素的伸展系数元素的扩充默认情况元素不会自动扩充
    3. flex-shrink 指定弹性元素的压缩当空间不够时对元素进行压缩默认压缩系数是1
    4. flex-basis 指定元素的初始值大小，元素的宽高属性！该属性要优于元素的宽高属性！
    5. flex 属性是 flex-grow ， flex-shrink ， flex-basis 的简写
        - flex
          auto ： 1 1 auto
          none ： 0 0 auto
    6. align-self 该属性是用来覆盖当前弹性元素上的aline-items属性值的，特殊化的对待
            - flex-start
            - flex-end
            - center
            - baseline 了解
            - stretch 拉满侧轴
    注意：弹性元素既可以作为某一个弹性容器的弹性元素，也可以作为其他元素的弹性容器！
          元素一旦变成弹性元素后，则不再区分行元素，块元素，行内块元素

筛子练习：

.box1 {
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 15px;
  display: flex;
  margin: 0 auto;
  /* 1.让元素在主轴上 水平居中 */
  justify-content: center;
  /* 2.让元素在侧轴上 居中 */
  align-items: center;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 15px;
  margin: 20px auto;
  /* 开启弹性布局 */
  display: flex;
  /* 1.如何让第二个子元素在主轴的终点处 */
  justify-content: space-between;
  /* 2.如何让第二个子元素，在侧轴的终点处排列 */
}
.item {
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
}
.box2 > .item:nth-child(2) {
  align-self: flex-end;
}
.box2 > .item {
  margin: 10px;
}
.box4 {
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 15px;
  margin: 0 auto;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
}
.son1 {
  display: flex;
  justify-content: space-around;
  margin-top: 5px;
}
.son2 {
  display: flex;
  justify-content: space-around;
  margin-bottom: 5px;
}

44.大小单位

em: 当前元素的字符宽度 1em = 1个字符宽(font-size) 1em = font-size值
rem: 根节点(html元素)的字符宽 1rem = html元素的一个字符宽(font-size)
height: 2em;
font-size: 20px;

45.颜色值

颜色值的表达方式有多种：

预置文本: 代表颜色的英文单词
transparent: 透明
background-color: transparent;
rgb值: 在计算机图形学中，红(red)绿(green)蓝(blue)是计算机的三原色
使用rgb函数来定义一个颜色值，其中第一个参数代表红色，第二个参数代表绿色，第三个参数代表蓝色
每个参数的取值范围是：0~255 (256是一个字节的大小Byte)
background-color: rgb(74, 40, 40);
rgba值: rgb代表红绿蓝，a(alpha通道)代表透明度，取值范围0~1，值越大，越不透明
background-color: rgba(204, 20, 20, 0.5);
HSL值: H色调 S饱和度（灰度） L代表亮度
background-color: hsl(0, 36%, 41%);
十六进制值: 以井号开头
十六进制数由1~10超过10的部分由A~F表示
前两个数代表红色，中间两个数代表绿色，最后两个数代表蓝色
background-color: #2233ff; 如果颜色值成对出现，可以简写为： #23f
background-color: #f00;
带透明度的十六进制
background-color: #ff00ff7b;

46.通过边框画三角形

 .box {
   /* 必须设置宽和高 并且必须为0 */
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 50px;
   border-color: #ff0000 transparent transparent transparent;
 }
 .box1 {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 50px;
   border-color: transparent #ffff00 transparent transparent;
 }
 .box2 {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 50px 20px;
   border-color: #ffff00 #ffff00 transparent transparent;
 }

qq_51989351

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
华清远见html+css笔记

web标准：结构（HTML）表现（CSS）行为（js）CSS（层叠样式表）：css主要是用来设置html页面中的元素，美化元素，使得元素变得更加的好看！css也可以让我们的页面变得更加的丰富多彩！页面的布局更加的灵活，排版更高效！
复制链接

扫一扫