李大哥1

Html+CSS基础知识（一）

1 前端常识

1.1 HTML的作用

定义网页结构；

1.2 CSS的作用

修饰网页结构和样式；

1.3 javascript

定义网页之间的交互

2 HTML基础

2.1 什么是HTML

HTML是一种超文本标记语言，是一种标记语言；

2.1 HTML页面基本解释

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
head>

<body>
    静夜思 李⽩ 床前明⽉光 疑是地上霜 举头望明⽉ 低头思故乡
body>

html>

!DOCTYPE html 表示该文档是用的HTML5编写
meta标签
- 是一个自闭合标签；
- 提供网页的相关信息，源数据；
- charset=“utf-8” 中文网站设置格式；
- name=“keywords” content=“test,test1” 提供搜索网页的关键字；
- name=“description” content=“这个练习使用的标签” 提供网站的描述信息；

2.2 闭合标签和注释

常用的闭合标签：
- meta
- img
- input
- link
- hr
注释

<--注释的格式-->

2.3 常用语义化标签

什么是语义化标签：简单的来说就是标签的用途；
每一个语义化标签都有它的作用；
- 网站标题标签：title
- 网页内容标题：h
- 段落标签：p
- 强调标签：Strong
- 头部标签：header
- 导航标签：nav
- 主要内容：main
为什么要定义语义化标签：
- 在没有css的修饰下也有较为完整的结构；
- 增加关键字，增加seo的搜索权重，在网站中搜索比较靠前；

2.4 常用标签

2.4.1 超链接标签a的使用

锚点：用户可以标记一个位置，用户可以根据这个标记位置跳转到指定的位置；
- 标记格式： 文本
- 跳转格式： 文本
- 标记格式一般是使用name进行标记，为了提交精确度也可以加上id；
- 跳转其他页面的锚点是格式是： 文本
- 示例：

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
head>

<body>
    <a href="#001">跳转举头望明⽉a> 静夜思 李⽩ 床前明⽉光 疑是地上霜 举头望明⽉ 1
    <br/> 1<br/> 1<br/> 1 <br/>1<br/> 1 <br/>1 <br/>1<br/>1 <br/>1<br/>1<br/> 
    1<br/>1 <br/>1 <br/>1<br/> 1<br/>1 <br/>1 <br/>1<br/> 1<br/> 1<br/>1<br/> 
    1<br/> 1<br/> 1 <br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/> 
    1<br/> 1<br/>1 <br/>
    <a name="001"> 举头望明⽉a>
    低头思故乡
body>

html>

跳转
- 跳转格式： 文本
- 属性brank 打开新的浏览器标签：target=“brank”
路径
- 使用站外资源一般使用绝对路径；
- 站内资源使用相对路径；
  示例：

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
head>

<body>
    <a href="https://www.baidu.com" target="brank">跳转到百度a>
body>
html>

2.4.2 图像标签 img

常用属性
- src 图片的路径；
- ait 图片加载失败的提示；
- title 鼠标放在图片上面的展示的文字；
图片源
- 本地图片稳定；
- 线上图片容易丢失；
- base64图片；
  - 小图片占用的内存小，减少了网站对本地资源访问；
  - 大图片占用的内存大，增加了图片服务器的压力；
应用
- 点击图片跳转
- 示例：

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
head>

<body>

    <a href="https://www.baidu.com">
        <img title="小狗图片" src="
        https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.15lu.com%2Fdedecms%2Fuploads%2Fallimg%2F200327%2F1-20032G05H0-50.jpg&refer=http%3A%2F%2Fwww.15lu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663223045&t=6d8cc86961a97ee93a1b413bc1a1a4ea"
            alt="加载失败"/>
    a>
body>

html>

2.4.3 表格

在网页中生成一个表格
table标签的常用元素：
- th 表头；
- tr 表的行；
- td 表的单元格；
table的常用属性
- broder 设置边框；
- cellspacing 设置单元格之间空白的距离；
- cellpadding 设置内容和单元格之间的距离；
td的属性
- rowspan 跨行合并；
- colspan 跨列合并；
- 示例

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
head>

<body>
    <table border="5" cellpadding="10">
        <th>姓名th>
        <th>科目th>
        <th>分数th>

        <tr>
            <td>小赵td>
            <td>数学td>
            <td>125td>
        tr>

        <tr>
            <td>小钱td>
            <td>英语td>
            <td>100td>
        tr>

        <tr>
            <td>小曾td>
            <td>语文td>
            <td>100td>
        tr>
    table>

    <table border="1" cellpadding="20">

        <tr>
            <th>姓名th>
            <th>科目th>
            <th>分数th>

        tr>

        <tr>
            <td>小赵td>
            <td>数学td>
            <td rowspan="2">125td>
        tr>
        <tr>
            <td>小赵td>
            <td>数学td>
        tr>

    table>


    <table border="1" cellpadding="20">

        <tr>
            <th>姓名th>
            <th>科目th>
        tr>

        <tr>
            <td colspan="2">小赵td>
        tr>
        <tr>
            <td>小赵td>
        tr>
    table>
body>

html>

2.4.4 列表

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
head>

<body>

    
    <ol>
        <li>列表1li>
        <li>列表2li>
        <li>列表3li>
    ol>
    
    <ul>
        <li>列表1li>
        <li>列表2li>
        <li>列表3li>
    ul>
    
    <dl>
        
        <dt>姓名：dt>
        <dd>张三dd>
    dl>


body>
html>

2.4.5 表单

作用：收集用户提交到服务端；
form表单的常用的元素有：
- input元素：
  - type=“text”;
    - text 文本框；
  - type=“radio”;
    - radio 是单选框；
  - type=“submit”
    - submit 提交按钮；
  - type=“password”
    - password 密码框；
  - type=“checkbox”
    - checkbox 复选框
- Action 属性
  - action 属性定义在提交表单时执行的动作。
  - 向服务器提交表单的通常做法是使用提交按钮。
  - 通常，表单会被提交到 web 服务器上的网页
- label 元素
  - 增加用户的体验性；
  - 作用点击文字也可以选定按钮
- select 元素
  - select 是设置下拉框；
  - select 的元素option是选项的内同；
- button 元素
  - 按钮；
示例：

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
head>

<body>
    <form action="">
        <p>请输入姓名p>
        <input type="text">
        <p>请选择你的性别：p>
        
        <label for="001">男生label>
        <label for="002">女生label>
        <input type="radio" name="sex" value="男" id="001">
        <input type="radio" name="sex" value="女" id="002">
        <br>
        
        <input type="checkbox" name="0011" value="语文">语文
        <input type="checkbox" name="0012" value="数学">数学
        <input type="checkbox" name="0013" value="英语">英语
        <input type="checkbox" name="0014" value="科技">科技
        <input type="checkbox" name="0015" value="种果树">种果树
        <input type="checkbox" name="0016" value="养猪">养猪
        <br>
        <p>选择一个兴趣爱好p>
        <select name="habby">
            <option value="跑步">跑步option>
            <option value="唱歌">唱歌option>
            <option value="跳舞">跳舞option>
            <option value="打游戏">打游戏option>
        select>

        <br>
        <p>请输入密码提交p>
        <input type="password" name="0017">密码
        <input type="submit" name="00181">
    form>






body>

html>

2.4.6 区块标签和行内标签

div
- 作为区块标签，可以作为其他html元素的容器；
- div没有特殊的含义，作为区块标签在网页的前后端会换行；
- 和css使用，div元素可以对大的内容块设置样式；
- div的作用是进行文档布局；
spn
- 作为行内标签，可以作为文本的容器
- 本身没有特殊的含义；
- 与css使用，可以设置文本属性的样式；

块级元素

块级元素在浏览器显示时，通常会以新⾏来开始（和结束）

, , 
, , 
      
   行内元素 
     
     ⾏内元素在显示时通常不会以新⾏开始 
     , 
, , , 
      
   
  3 CSS基础常识 
   
   css即层叠样式表,它是一种用来表现html或xml等文件样式的计算机语言； 
   
  3.2 CSS常用的几种写法 
   
   内部样式表：css代码写入到head标签里面style标签里面 
     
     格式： 
    
  
   
  DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        p {
            color: blue;
        }
    style>
head>
<body>
    <p>今天不学习，明天变垃圾p>
body>
html>
 
   
   内联样式表： css代码作为属性写入 
     
     格式： 
    
  
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">

head>

<body>
    <p style="color: red;">今天不学习，明天变垃圾p>
body>

html>
 
   
   外部样式表：通过link将css资源写入； 
     
     后定义的会把先定义的覆盖掉； 
     优点： 
       
       css和html分离有利于维护和阅读； 
       解决页面样式重复的问题； 
       页面缓存，提高了加载速度； 
      
  
     格式： 
    
  
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <link rel="stylesheet" href="CSS文件的路径">
head>
<body>
    <p >今天不学习，明天变垃圾p>
body>

html>
 
  3.3 常用的几种选择器 
  3.3.1 元素(标签)选择器 
   
   通过标签名来获取元素； 
   这种选择器的范围广，一般放在层级选择器中； 
   示例： 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /* 单个标签使用 */
        
        p {
            color: rgb(211, 29, 90);
        }
        /* 多个标签组合 */
        
        ul,table {
            color: rgb(34, 121, 92);
        }
    style>

head>

<body>
    <p>今天不学习，明天变垃圾p>
    <ul>
        <li>小黄li>
        <li>小绿li>
        <li>小狗li>
        <li>小王li>
    ul>

    <table border="5px">
        <tr>
            <th>姓名th>
            <th>年龄th>
        tr>

        <tr>
            <td>张三td>
            <td>22td>
        tr>

        <tr>
            <td>李四td>
            <td>23td>
        tr>


    table>

body>

html>
 
  3.3.2 类选择器 
   
   通过类class定位选择器，一个元素可以有多个类，一个类也可以应用多个元素； 
   单个类选择器； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*单个类使用的选择器*/
        .abc {
            color: rgb(46, 21, 231);
        }
    style>
head>

<body>
    <p class="abc">今天不学习，明天变垃圾p>
    <ul>
        <li>小黄li>
        <li>小绿li>
        <li>小狗li>
        <li>小王li>
    ul>

    <table border="5px">
        <tr>
            <th>姓名th>
            <th>年龄th>
        tr>

        <tr>
            <td>张三td>
            <td>22td>
        tr>

        <tr>
            <td>李四td>
            <td>23td>
        tr>

    table>

body>

html>
 
   
   组合标签选择器 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*标签结合类使用的选择器*/
        p.study {
            color: rgb(46, 21, 231);
        }
    style>
head>
<body>
    <p class="study">今天不学习，明天变垃圾第二版p>
    <p class="abc">今天不学习，明天变垃圾p>
body>
html>
 
   
   多类选择器 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style type="text/css">
        /*链接多个选择器*/
        
        .adv.adf {
            color: red;
            background-color: black
        }
    style>
head>

<body>
    <div class="adv">
        <p>今天不学习，明天变垃圾第二版p>
    div>
    <div class="adf">
        <p>今天不学习，明天变垃圾p>
    div>

body>
html>```

* 链接多个类选择器

```html
DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style type="text/css">
        /*链接多个选择器*/
        
        .adv.adf {
            color: red;
            background-color: black
        }
    style>
head>

<body>
    <div class="adv">
        <p>今天不学习，明天变垃圾第二版p>
    div>
    <div class="adf">
        <p>今天不学习，明天变垃圾p>
    div>

body>
html>
 
  3.3.3 id 选择器 
   
   使用id选择元素 
   示例 
   
  DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*使用id定位元素*/
        #adc {
            color: rgb(55, 208, 68);
        }
    style>
head>
<body>
    <p id="adc">今天不学习，明天变垃圾p>
body>
html>
 
  3.3.4 通配符选择器 
   
   格式： 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*使用通配符定位元素*/
       
        * {
            color: rgb(55, 208, 68);
        }
    style>
head>
<body>
    <p id="adc">今天不学习，明天变垃圾p>
    <p id="adc">今天不学习，明天变垃圾第二版p>
body>
html>
 
  3.3.5 派生选择器 
   
   后代派生器 
     
     第一个参数和第二个参数之间无论有多少层级都不会影响 
     格式： 
    
  
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*后代派生器*/
        /* 这点会取 div下的后代strong无论中间间隔多少代都会取到 */
        div strong {
            color: rgb(55, 208, 68);
        }
    style>
head>

<body>
    <div>
        <h1>今天不学习，明天变垃圾<strong>加粗1strong>h1>
        <p>今天不学习，明天变垃圾第二版p>
        <strong>加粗2strong>
        <strong>加粗3strong>
    div>

body>

html>
 
   
   子选择器 
     
     两个子元素中间用一个大于号>连接。 
    
  
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /**/
        /* 这点会取 div下的后代p标签 不会隔代取值 距离table下的table标签就不会被取值*/
        
        div>p {
            color: rgb(55, 208, 68);
        }
    style>
head>

<body>
    <div>
        <h1>今天不学习，明天变垃圾<strong>加粗1strong>h1>
        <p>今天不学习，明天变垃圾第二版p>
        <strong>加粗2strong>
        <strong>加粗3strong>
       <table>
        <tr>
      <td>
        <p>今天不学习，明天变垃圾第二版p>
      td>
    tr>
       table>
      




    div>

body>
html>
 
   
   相邻兄弟选择器 
     
     相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级 ； 
    
  
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /* 这点会取p的相邻兄弟标签Strong */
        
        p+strong {
            color: rgb(55, 208, 68);
        }
    style>
head>

<body>
    <div>
        <h1>今天不学习，明天变垃圾<strong>加粗1strong>h1>
        <p>今天不学习，明天变垃圾第二版p>
        <strong>加粗2strong>
        <strong>加粗3strong>
    div>

body>
html>
 
  3.4 特殊的几种选择器 
  3.4.1 伪类选择器 
   
   描述元素的特殊的一种状态； 
   
  3.4.1.1动态伪类选择器 
   
   link:匹配未被点击的超链接； 
   visited 匹配已经被点击过超链接； 
   hover 鼠标悬浮在某个元素上； 
   active 鼠标点击某个元素； 
   foucs 聚集某个焦点； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        a:link {
            color: rgb(158, 214, 38);
        }
        
        a:visited {
            color: bisque;
        }
        
        h1:hover {
            color: aqua;
        }
        
        h2:active {
            color: blue;
        }
        
        input:focus {
            color: rgb(234, 11, 11);
        }
    style>
head>

<body>
    <a href="https://blog.csdn.net/" target="blank">我的博客a>
    <h1>第一标题h1>
    <h2>第二标题h2>
    <h3>第三标题h3>

    <form>
        <input type="text">
    form>
body>
html>
 
  3.4.1.2 UI元素伪类选择器 
   
   UI元素状态伪类选择器主要是针对于HTML中的Form元素进行操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type=“checkbox”"有"checked"和"unchecked"两种状态。 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        input[type="text"]:disabled {
            color: rgb(242, 13, 13);
            font-size: 50px;
        }
        
        input[type="text"]:enabled {
            color: rgb(124, 242, 13);
            font-size: 50px;
        }
        
        input[type="checkbox"]:unchecked {
            color: rgb(242, 13, 13);
        }
    style>
head>

<body>
    <form>
        <input type="text" name="姓名" value="小王" disabled>
        <input type="text" name="姓名" value="小李" enabled>
        <br> 选修科目
        <input type="checkbox" name="kemu" value="语文" checked="unchecked">语文
        <input type="checkbox" name="kemu" value="语文" checked="unchecked">数学
        <input type="checkbox" name="kemu" value="语文" checked="unchecked">外语
    form>
body>

html>
 
  3.4.1.3 结构伪类选择器 
   
   结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素； 
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /* 参数n为选择的第几行 */
        
        p:nth-child(5) {
            color: aqua;
        }
        /* 匹配第一行参数 */
        
        p:first-child {
            color: rgb(167, 57, 57);
        }
        /* 匹配奇数项 */
        
        p:nth-child(2n+1) {
            color: rgb(54, 28, 207);
        }
        /* 匹配到偶数项 */
        
        p:nth-child(2n) {
            color: aquamarine;
        }
        /* 匹配到最后一项 */
        
        p:last-child {
            color: rgb(13, 116, 82);
        }
    </style>
</head>
<body>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <p>第四段</p>
    <p>第五段</p>
    <p>第六段</p>
</body>

</html>
 
  3.4.2 伪元素选择器 
   
   伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。 
     
     ::first-letter 匹配第一个汉字或者第一个字母； 
     ::first-line 在区块中匹配第一行； 
     seletion 用户选中的高亮显示； 
     before：匹配被选元素的内容前面插入内容，可以与 content 配合使用 
     after：匹配被选元素的内容后前面插入内容，可以与 content 配合使用 
    
  
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        p::first-letter {
            color: rgb(74, 219, 55);
        }
        
        p::first-line {
            color: rgb(137, 55, 219);
        }
        
        p::selection {
            color: rgb(219, 55, 55);
        }
        
        p::after {
            color: rgb(219, 55, 55);
            content: "领着我们上前去";
        }
        
        p::before {
            color: rgb(159, 55, 219);
            content: "盼望着，盼望着";
        }
    </style>
</head>

<body>

    <h5>春</h5>
    <p>盼望着，盼望着，东风来了，春天的脚步近了。 一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。 小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。 桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。
        “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，跟轻风流水应和着。牛背上牧童的短笛，这时候也成天嘹亮地响着。 雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟，树叶儿却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；地里还有工作的农民，披着蓑戴着笠。他们的房屋，稀稀疏疏的在雨里静默着。
        天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份儿事去，“一年之计在于春”；刚起头儿，有的是工夫，有的是希望。 春天像刚落地的娃娃，从头到脚都是新的，它生长着。 春天像小姑娘，花枝招展的，笑着，走着。 春天像健壮的青年，有铁一般的胳膊和腰脚，领着我们上前去。
    </p>


</body>

</html>
 
  3.5 盒子模型 
  3.5.1 什么是盒子模型 
   
   所有的html元素都可以看作是一个盒子 
   盒子的组成： 
     
     content 盒子的内容； 
     padding 盒子的内边距，内容和边框之间的距离； 
     border 盒子的边框指的是边框的宽度； 
     margin 盒子的外边距，最外界和边框的距离； 
    
  
   盒子的大小：
 设置内边距 
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        div {
            /* 设置背景颜色 */
            background-color: aqua;
            /* 设置内边距一种方式*/
            /* padding-left: 50px;
            padding-right: 50px;
            padding-top: 60px;
            padding-bottom: 60px; */
            /* 设置边距的第二种方式  顺时针方式 上 左 下 右*/
            /* padding: 10px 20px 30px 40px; */
            /* 设置边距的第三种方式  上下 左右*/
            /* padding: 10px 20px; */
            /* 设置边距的第四种方式  上 左右  下*/
            /* padding: 10px 20px 10px; */
            /* 设置边距的第五种方式 */
            padding: 60px;
        }
    </style>
</head>

<body>
    <div>
        朱自清
    </div>
</body>

</html>
 
  设置边框 
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        div {
            /* 设置背景颜色 */
            background-color: aqua;
            /* 设置边框一种方式*/
            /* border-left: 50px solid rgb(226, 9, 63);
            border-right: 50px solid rgb(226, 9, 63);
            border-top: 60px solid rgb(226, 9, 63);
            border-bottom: 60px solid rgb(226, 9, 63); */
            /* 设置边框的第二种方式 */
            border: 60px solid rgb(226, 9, 63);
        }
    </style>
</head>

<body>
    <div>
        朱自清
    </div>
</body>

</html>
 
  设置外边距 
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        div {
            /* 设置背景颜色 */
            background-color: aqua;
            /* 设置外边距一种方式*/
            /* margin-left: 50px;
            margin-right: 50px;
            margin-top: 60px;
            margin-bottom: 60px; */
            /* 设置外边距的第二种方式  顺时针方式 上 左 下 右*/
            /* margin: 10px 20px 30px 40px; */
            /* 设置外边距的第三种方式  上下 左右*/
            /* margin: 10px 20px; */
            /* 设置外边距的第四种方式  上 左右  下*/
            /* margin: 10px 20px 10px; */
            /* 设置外边距的第五种方式 */
            margin: 60px;
        }
    </style>
</head>

<body>
    <div>
        朱自清
    </div>
</body>
</html>
 
  3.5.2 怪异盒子模型 
   
   标准盒子模型’：采用的W3C标准，盒子的width宽度和height高度的content内容决定，添加padding内边距或border外边框后，宽高都会进行相应增长； 
   怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。 
   标准盒子和怪异盒子的转换 
     
     box-sizing:content-box; 盒模型设置为w3c标准盒子模型 
     box-sizing:border-box; 盒模型设置为怪异（IE）盒子模型 
    
  
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        div.abc {
            /* 设置背景颜色 */
            background-color: aqua;
            padding: 60px;
            border: 70px;
            margin: 80px;
        }
        
        .ibox1 {
            background-color: rgb(255, 166, 0);
            padding: 60px;
            border: 70px;
            margin: 200px;
            box-sizing: content-box
        }
        
        .ibox2 {
            background-color: rgb(89, 0, 255);
            padding: 60px;
            border: 70px;
            margin: 80px;
            box-sizing: border-box
        }
    </style>
</head>

<body>
    <div class="abc">
        <div class="ibox1">小曾</div>
        <div class="ibox2">小李</div>


    </div>
</body>
</html>
 
  3.5.3 外边距重叠 
  3.5.3.1外边距重叠演示 
   
   什么是外边距重叠：外边距重叠又叫外边距塌陷，设置外边距时，两条垂直的外边距重合，外边距的长度取两条重合的外边距长的外边距（外边距取长的，两边都为负取小的，一正一负相加） 
   代码演示外边距重叠1 
     
     首先建立2个盒子 
    
  
   
  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>
</html>
 
   
   
   代码演示外边距重叠2 
     
     给子盒子增加外边距50px可以看到父盒子和子盒子同时下移了50px，实际上是我需要的是父盒子不移动，子盒子下移50px；
 代码： 
    
  
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>
 
   
  3.5.3.2 解决方法 
   
   第一种方法给子元素或者父元素添加display 
     
     代码： 
    
  
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>
</html>
 
   
   
   第二种方法：给父元素设置边框 
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
            border: 50px solid transparent;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>
 
   
   
   第三种方法：给父元素设置内边距 
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
            padding: 100px;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>
 
   
   
   第四种方法：给父元素加上overflow：hidden 
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>
 
   
   
   第五种方法：给父级或者子级设置position 
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>
 
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>
 
   
   
   第六种方法： 
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        
        #two::before {
            display: table;
            content: "";
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>

 
   
  3.6 CSS的常用属性 
  3.6.1 文字属性 
   
   font-size 文字的大小； 
   font-weight 加粗，常用值bold、bolder、normal或者设置参数值100-900； 
   font-family 设置字体； 
   font-style 设置斜体，italic、oblique、normal； 
   text-align设置水平对齐方式： 
     
     center 居中； 
     left 居左； 
     right 居右； 
     justify 两端对齐 
    
  
   text-decoration 文字修饰 underline下划线，overline上划线，line-thought删除线； 
   text-spacing 字间距； 
   text-transform 大小写转换： 
     
     capitalize 首字母大写； 
     lowercase 小写； 
     uppercase 大写； 
    
  
   text-indent 首行缩进； 
   line-weight 行高； 
   font 缩写 font-style，font-weight，font-size/line-weight font-family 
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            font-size: larger;
            font-family: 'Courier New', Courier, monospace;
            color: rgb(240, 11, 11);
            font-style: oblique;
            font-weight: 600;
            text-align: justify;
            text-decoration: underline;
            text-transform: capitalize;
            text-indent: 2em;
            letter-spacing: 0cm;
        }
    </style>
</head>

<body>
    <div id="first">
        adc燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢：如今（现在 [2] ）又到了哪里呢？ [3] 我不知道他们给了我多少日子，但我的手确乎（1）是渐渐空虚（2）了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔（3）而泪潸潸（4）了。 去的尽管去了，来的尽管来着；去来的中间，又怎样地匆匆呢？早上我起来的时候，小屋里射进两三方斜斜的太阳。太阳他有脚啊，轻轻悄悄地挪移了；我也茫茫然跟着旋转。于是——洗手的时候，日子从水盆里过去；吃饭的时候，日子从饭碗里过去；默默时，便从凝然的双眼前过去。我觉察他去的匆匆了，伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐俐（5）地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。
        在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊（6）罢了（7），只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝（8）样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢？但不能平的，为什么偏要白白走这一遭啊？ 你聪明的，告诉我，我们的日子为什么一去不复返呢？ [4-5]
    </div>

</body>

</html>
 
  3.6.2 CSS的列表属性 
   
   list-style-type 列表的标记：dis实心圆；circle空心圆；square正方体；none去除标记； 
   list-style-image 以图片为列表标记，格式list-style-image:url(); 
   list-style-position:outside 项目标记在项目外； 
   list-style-position:inside 项目标记在项目内；
 示例： 
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /* 列表项是石心圆 */
        
        ul.test1 {
            list-style-type: disc;
        }
        /* 列表项是空心圆 */
        
        ul.test2 {
            list-style-type: circle;
        }
        /* 列表项是正方形 */
        
        ul.test3 {
            list-style-type: square;
        }
        /*无列表项 */
        
        ul.test4 {
            list-style-type: none;
        }
        /*列表项标记在表格外*/
        
        ul.test5 {
            list-style-position: outside;
        }
        /*列表项标记在表格内*/
        
        ul.test6 {
            list-style-position: inside;
        }
        /*列表项标记在表格内*/
        
        ul.test7 {
            list-style-image: url(https://photo.16pic.com/00/13/41/16pic_1341625_b.jpg);
        }
    </style>
</head>

<body>
    <ul class="test1">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>

    <ul class="test2">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>

    <ul class="test3">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>

    <ul class="test4">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>
    <ul class="test5">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>
    <ul class="test6">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>
    <ul class="test7">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>
</body>

</html>
 
  3.6.3 背景属性 
   
   background-color 背景颜色； 
   background-repeat 背景平铺； 
     
     参数值： 
       
       repeat 图片平铺； 
       no-repeat 图片不平铺； 
       repeat-x 图片沿着x轴平铺； 
       repeat-y 图片沿着y轴平铺； 
      
  
    
  
   background-image 
     
     参数值： 
       
       url(‘’); 
       none； 
      
  
    
  
   background-position 
     
     参数值： 
       
       精确数值定位x轴 y轴第一个数值为 x 第二个数值为y的坐标，如果只有一个数值第一个是x的坐标，第二个为默认居中对齐； 
       方位值：top bouttom right left center； 
       数值和方位混合使用 第一个值x的坐标，第二个值为y坐标； 
      
  
    
  
   background-attachment 背景图像固定 
     
     fixed 背景图像固定不会随着内容； 
     scroll 背景图像随着内容一起滑动； 
    
  
   简写： background：图像背景颜色，图像背景地址，图像铺平，图像固定，图像位置； 
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        div.test1 {
            background-color: rgba(0, 0, 0, 0.5);
            ;
            padding: 500px;
            margin: 500px;
            background-image: url('https://img0.baidu.com/it/u=1692311172,2998053149&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500');
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <div class="test1">
    </div>
</body>
</html>
 
  3.6.4 css层叠和选择器优先级 
  3.6.4.1 css层叠 
   
   css层叠：一个属性被多次定义的时候，会根据优先级和定义的顺序来计算使用什么样式。 
   
  <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test1 {
            padding: 100px;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .test1 {
            padding: 100px;
            background-color: rgba(241, 20, 20, 0.5);
        }
    </style>
</head>

<body>
    <div class="test1">
        <p>测试测试</p>
    </div>
</body>
</html>
 
  3.6.4.2 css选择器的优先级 
   
   选择器顺序高低(从高到底) 
     
     !important 最高级，一般不使用； 
     行内样式； 
     id选择器； 
     类选择器； 
     标签选择器； 
     通配符选择器； 
    
  
   代码是按照从上到下执行 
   
  DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    

    <style>
        /*通配符选择器*/
    * {
    color:red;
    }
        /*标签选择器*/
     p{
        color:black !important;
     }
        /*类选择器*/
      .test{
          color:green;
      }
      id选择器
    #002{
        color:palegoldenrod;
    }

    style>
head>
<body>

<p class="test" id="002"  style="color:lightcoral">HtmlStudyp>
body>
html>
 
  3.6.5 css的可继承的属性 
   
   什么是继承：是继承父类的属性，简化代码，利于维护； 
   常继承的属性 
     
     文件属性 文本属性 行高 对齐 
    
  
   
  DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
    div.accordion002{
        color:palegoldenrod;
        font-family: Calibri;
        font-size: 100px;
        font-weight: bolder;
        font-style:italic;
        text-align: justify;
        text-decoration: underline;
        text-ident:20px;
        text-spece:20px;
        text-transform: capitalize;
    }
    style>
head>
<body>
   <div class="accordion002">
       第一层
       <div>第二层
           <div>第三层div>
       div>
   div>
body>
html>
 
  3.7 CSS 布局 
  3.7.1 CSS布局的前置知识 
   
   块级元素的宽度和父级元素的宽度相同，其高度由内容决定； 
   行内元素的高度和宽度都由内容决定，不能设置高度和宽度，但是可以加上属性display：‘‘bloack’’ ； 
   什么是文档流：块级元素占一行按照窗口按照顺序从上到下排列，行内元素按照从左往右的方式排列，一行满后自动换行； 
   什么是行内块级元素：拥有行内元素和块级元素的特性，不换行但是可以设置宽度； 
   
  3.7.2 folat 布局 
  3.7.2.1 folat格式 
  float: none; //默认值，元素不浮动
float: left; //元素像左浮动
float: right; //元素像右浮动
 
  3.7.2.2 特点 
   
   特点一：浮动的元素的不会占用文档流； 
   特点二：浮动的元素会按照从左到右依次排列； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*特点一：悬浮的元素的不会占用文档流*/
        div.test1{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        div.test2{
            background: red;
            width: 200px;
            height: 200px;
            /*float: left;*/
        }
        /*特点二：悬浮的元素会按照从左到右依次排列*/
        div.test4{
            background: red;
            width: 600px;
            height: 200px;
            float: left;
        }
        div.test5{
            background: red;
            width: 600px;
            height: 200px;
            float: left;
        }
        div.test6{
            background: red;
            width: 600px;
            height: 200px;
            float: left;
        }

    style>
head>

<body>

    <p>特点一<p>
    <div class="test1">div>
    <div class="test2">div>

    <p>特点二<p>
    <div class="test4">div>
    <div class="test5">div>
    <div class="test6">div>

body>

html>
 
   
   
   特点三：前面的元素的不为浮动元素，浮动元素无法上移； 
   特点四：块级元素和行内元素被浮动属性修饰后，会变成块级元素； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*特点`三：前面的元素的不为浮动元素，浮动元素无法上移*/
        div.test1{
            background: green;
            width: 100px;
            height: 100px;
        }
        div.test2{
            background: red;
            width: 200px;
            height: 200px;
            float: left;
        }
        /*特点四：块级元素和行内元素被浮动属性修饰后，会变成块级元素；*/
        spn.test3{
            width: 300px;
            height: 300px;
            float: left;
            background: greenyellow;
        }


    style>
head>

<body>

    <p>特点三<p>
    <div class="test1">div>
    <div class="test2">div>

    <p>特点四<p>
    <spn class="test3">学习学习学习学习学习学习学习学习学习学习spn>
body>
html>
 
   
   
   特点五：悬浮标签不会遮挡文字会可以设置文字环绕； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*特点五：前面的元素的不为浮动元素，浮动元素无法上移*/
        div.test1{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }

    style>
head>

<body>

    <p>特点五<p>
    <div class="test1">div>
    <spn>盼望着，盼望着，东风来了，春天的脚步近了。 一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。 小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。 桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的spn>
body>

html>
 
   
  3.7.2.3 清除float浮动 
   
   为什么要清理float浮动布局：高度坍塌（拥有多级层级标记，父元素的高度自适应，没有设置高度，子元素浮动，浮动标签不占用文档流，就会导致父标签被压缩成一条线）；
 示例：高度坍塌 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
            .test1 {
            background-color: rgba(0, 0, 0, 0.5);
            border: 10px solid red;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            float: left;
    style>
head>

<body>
    <div class="test1">
        <div class="test2">div>
    div>
body>

html>
 
   
   
   清除浮动
 *使用伪元素选择器 
   
  clear:"both"；
display:"block"；
content:""；
 
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test1 {
            background-color: rgba(0, 0, 0, 0.5);
            border: 10px solid red;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            float: left;
        }
        
        .test1::after {
            content: "";
            display: block;
            clear: both;
        }
    style>
head>
<body>
    <div class="test1">
        <div class="test2">div>
    div>
body>
html>
 
  3.7.2 flex布局 
  3.7.2.1 flex的基本概念 
   
   flex全称是flexible box 是弹性布局； 
   使用flex的元素的标签，被称为flex容器(flex container ),flex容器下的子元素是称为flex的项目； 
   声明方式： 
   
  块级元素的声明flex
display:flex;
行内块级元素声明flex
display：online-flex；
使用webkit内核浏览器声明flex
 
   
   在flex容器中存在着一条水平轴（main axis）和交叉轴（cross axis） 水平轴和边框的交点起始位置称为main start 结束位置称为main end,交叉轴和边框的交叉点成为起始位置cross start 结束位置cross end ，按照水平轴排列的项目称为main size,按照交叉轴排列的顺序为cross size。 
   
  3.7.2.2 容器的属性 
  3.7.2.2.1 flex-dirtection：项目在轴的排列方式 
   
   row 按照水平轴的方向从左往右排列； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 100px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
        <div class="test4">盒子4div>
    div>
body>

html>
 
   
   
   row-reverse按照水平轴的方向从右往左排列； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-direction: row-reverse;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 100px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
        <div class="test4">盒子4div>
    div>
body>

html>
 
   
   
   colum 按照交叉轴的方式从上到下排列； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-direction: column;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 100px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
        <div class="test4">盒子4div>
    div>
body>

html>
 
   
   
   colum-resever 按照交叉轴的方向从下到上排列； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-direction: column-reverse;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 100px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
        <div class="test4">盒子4div>
    div>
body>

html>
 
   
  3.7.2.2.2 flex-wrap 项目在水平轴上的一行，排列不下的换行方式 
   
   nowrap 默认不换行； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-wrap: nowrap;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
        
        .test5 {
            width: 200px;
            height: 100px;
            background: rgb(19, 218, 122);
        }
        
        .test6 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
        
        .test7 {
            width: 200px;
            height: 100px;
            background: rgb(129, 12, 145);
        }
        
        .test8 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 68);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
        <div class="test4">盒子4div>
        <div class="test5">盒子5div>
        <div class="test6">盒子6div>
        <div class="test7">盒子7div>
        <div class="test8">盒子8div>
    div>
body>

html>
 
   
   
   wrap 换行； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-wrap: wrap;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
        
        .test5 {
            width: 200px;
            height: 100px;
            background: rgb(19, 218, 122);
        }
        
        .test6 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
        
        .test7 {
            width: 200px;
            height: 100px;
            background: rgb(129, 12, 145);
        }
        
        .test8 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 68);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
        <div class="test4">盒子4div>
        <div class="test5">盒子5div>
        <div class="test6">盒子6div>
        <div class="test7">盒子7div>
        <div class="test8">盒子8div>
    div>
body>

html>
 
   
   
   wrap-reverse 换行倒立换行； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-wrap: wrap-reverse;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
        
        .test5 {
            width: 200px;
            height: 100px;
            background: rgb(19, 218, 122);
        }
        
        .test6 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
        
        .test7 {
            width: 200px;
            height: 100px;
            background: rgb(129, 12, 145);
        }
        
        .test8 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 68);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
        <div class="test4">盒子4div>
        <div class="test5">盒子5div>
        <div class="test6">盒子6div>
        <div class="test7">盒子7div>
        <div class="test8">盒子8div>
    div>
body>

html>
 
   
  3.7.2.2.3 justify-content 水平轴的对齐方式 
   
   flex-start 左对齐； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            justify-content: flex-start;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
   
   flex-end 右对齐 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            justify-content: flex-end;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
   
   center 居中 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            justify-content: center;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
   
   space-between 两端对齐； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            justify-content: space-between;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
   
   space-around 项目之间的间隔相等，项目之间的间隔是边框的2倍； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            justify-content: space-around;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
  3.7.2.2.4 align-items 交叉轴的对齐方式； 
   
   flex-start 以交叉轴的起点排列 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 800px;
            height: 800px;
            display: flex;
            align-items: flex-start;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
   
   flex-end从交叉轴的终点排列 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 800px;
            height: 800px;
            display: flex;
            align-items: flex-end;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
   
   center 交叉轴的中点对齐； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 800px;
            height: 800px;
            display: flex;
            align-items: center;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
   
   baseline 按照文档流基准线排列
 基准线概念：https://blog.csdn.net/weixin_44653329/article/details/108172478 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 800px;
            height: 800px;
            display: flex;
            align-items: baseline;
        }
        
        .test1 {
            
            line-height: 50px;
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>
html>
 
   
   
   stretch 在项目没有设置高度的情况，子项目的高度会被拉伸到窗口一致； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 800px;
            height: 800px;
            display: flex;
            align-items: stretch;
        }
        
        .test1 {
            width: 200px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
  3.7.2.2.5 align-content 用来设置在自由盒内各个项目的垂直排列方式； 
   
   使用条件: 
   
  必须在父元素上设置(只有多行才能展示效果)：
display:flex;
flex-direction:row;
flex-wrap:wrap;
 
   
   flex-start 去除项目因为换行的空白交叉轴的起点垂直排列； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        
        .test1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 300px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 300px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
   
   flex-end 去除项目之间的空白，以交叉轴终点垂直排列; 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-end;
        }
        
        .test1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 300px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 300px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
  
 *center 去除项目之间的空白 以交叉轴的中点垂直排列； 
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
        }
        
        .test1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 300px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 300px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
   
   space-around按照交叉轴垂直排列，项目之间的距离是是边框之间的距离的2倍； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-around;
        }
        
        .test1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 300px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 300px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
   
   space-between以交叉轴多行两端对齐 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-between;
        }
        
        .test1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 300px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 300px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
   
   Stretch 以交叉轴方向拉伸项目，向容器底部方向拉伸； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: stretch;
        }
        
        .test1 {
            /* width: 300px; */
            /* height: 100px; */
            background: yellowgreen;
        }
        
        .test2 {
            /* width: 300px; */
            /* height: 100px; */
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            /* width: 300px; */
            /* height: 100px; */
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
  3.7.2.3 项目属性 
  3.7.2.3.1 order 项目的排列顺序，数值越小排列越靠前； 
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
            order: 2;
        }
        
        .test2 {
            width: 300px;
            height: 100px;
            background: rgb(68, 50, 205);
            order: 1;
        }
        
        .test3 {
            width: 300px;
            height: 100px;
            background: rgb(205, 50, 179);
            order: 0;
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>
html>
 
   
  3.7.2.3.2 flex-grow项目扩大至剩余的空间 
   
   0 默认，不扩大 ；1 扩大至2倍； 
   如果容器没有空间则不扩大； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500x;
            height: 500px;
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            flex-grow: 1;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
  3.7.2.3.3 flex-shrink 设置项目在容器缩小； 
   
   0 默认 不缩小；1 缩小； 
   只有空间不足的才会缩小； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500x;
            height: 500px;
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 400px;
            height: 100px;
            background: yellowgreen;
            flex-shrink: 1;
        }
        
        .test2 {
            width: 400px;
            height: 100px;
            background: rgb(68, 50, 205);
            flex-shrink: 1;
        }
        
        .test3 {
            width: 400px;
            height: 100px;
            background: rgb(205, 50, 179);
            /* flex-shrink: 1; */
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
  3.7.2.3.4 flex-basis设置项目的宽度； 
   
   如果basis和width同时设置basis的优先级比width高； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500x;
            height: 500px;
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            flex-basis: 200px;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
            flex-shrink: 1;
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
            /* flex-shrink: 1; */
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>
html>
 
   
  3.7.2.3.5 flex 是flex-grow 、flex-shrink、flex-basis 的简写 
  flex：1,1,100px;
 
  3.7.2.3.6 align-self 设置子项目与其他项目不同的对齐方式; 
   
   参数和父属性的align-items一致； 
   
  DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500x;
            height: 500px;
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            align-self: center;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
            flex-shrink: 1;
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
            /* flex-shrink: 1; */
        }
    style>
head>


<body>
    <div class="test">
        <div class="test1">盒子1div>
        <div class="test2">盒子2div>
        <div class="test3">盒子3div>
    div>
body>

html>
 
   
  

                            
                        
                    
                    
                    
                    
                    
                    
                
                
                    
                        
                        
                             
                        
                        
                        
                            
                        
                        
                        
                            
                        
                    
                
            
        
    
    
        你可能感兴趣的:(html,css,前端)
        
            
                
                    Long类型前后端数据不一致
                        igotyback
前端
                        响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
                    
                    swagger访问路径
                        igotyback
swagger
                        Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
                    
                    html 中如何使用 uniapp 的部分方法
                        某公司摸鱼前端
htmluni-app前端
                        示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
                    
                    四章-32-点要素的聚合
                        彩云飘过

                        本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
                    
                    DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
                    
                    【加密社】Solidity 中的事件机制及其应用
                        加密社
闲侃区块链智能合约区块链
                        加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
                    
                    关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
                    
                    HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
                    
                    webpack图片等资源的处理
                        dmengmeng

                        需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
                    
                    springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
                    
                    博客网站制作教程
                        2401_85194651
javamaven
                        首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
                    
                    00. 这里整理了最全的爬虫框架（Java + Python）
                        有一只柴犬
爬虫系列爬虫javapython
                        目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
                    
                    详解：如何设计出健壮的秒杀系统？
                        夜空_2cd3

                        作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
                    
                    最简单将静态网页挂载到服务器上(不用nginx)
                        全能全知者
服务器nginx运维前端html笔记
                        最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
                    
                    补充元象二面
                        Redstone Monstrosity
前端面试
                        1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
                    
                    微信小程序开发注意事项
                        jun778895
微信小程序小程序
                        微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
                    
                    字节二面
                        Redstone Monstrosity
前端面试
                        1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
                    
                    斟一小组鸡血视频
                        和自己一起成长

                        http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
                    
                    前端代码上传文件
                        余生逆风飞翔
前端javascript开发语言
                        点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
                    
                    Dockerfile命令详解之 FROM
                        清风怎不知意
容器化java前端javascript
                        许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
                    
                    《HTML 与 CSS—— 响应式设计》
                        陈在天box
htmlcss前端
                        一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
                    
                    【C语言】- 自定义类型：结构体、枚举、联合
                        Cavalier_01
C语言
                        【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
                    
                    uniapp实现动态标记效果详细步骤【前端开发】
                        2401_85123349
uni-app
                        第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
                    
                    html+css网页设计 旅游网站首页1个页面
                        html+css+js网页设计
htmlcss旅游
                        html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
                    
                    spring mvc @RequestBody String类型参数
                        zoyation
spring-mvcspringmvc
                        通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
                    
                    ubuntu安装opencv最快的方法
                        Derek重名了

                        最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
                    
                    处理标签包裹的字符串，并取出前250字符
                        周bro
前端javascript开发语言
                        //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
                    
                    css设置当字数超过限制后以省略号（...）显示
                        周bro
css前端vuecss3html经验分享
                        1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
                    
                    360前端星计划-动画可以这么玩
                        马小蜗

                        动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
                    
                    h5小游戏定制开发
                        红匣子实力推荐

                        随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
                    
                                分享100个最新免费的高匿HTTP代理IP
                                    mcj8089
代理IP代理服务器匿名代理免费代理IP最新代理IP
                                      
推荐两个代理IP网站： 
  
1. 全网代理IP：http://proxy.goubanjia.com/ 
  
2. 敲代码免费IP：http://ip.qiaodm.com/ 
  
  
120.198.243.130:80,中国/广东省
58.251.78.71:8088,中国/广东省
183.207.228.22:83,中国/
                                
                                mysql高级特性之数据分区
                                    annan211
java数据结构mongodb分区mysql
                                    


mysql高级特性
  1 以存储引擎的角度分析，分区表和物理表没有区别。是按照一定的规则将数据分别存储的逻辑设计。器底层是由多个物理字表组成。
  
  2 分区的原理
     分区表由多个相关的底层表实现，这些底层表也是由句柄对象表示，所以我们可以直接访问各个分区。存储引擎管理分区的各个底层
	 表和管理普通表一样(所有底层表都必须使用相同的存储引擎)，分区表的索引只是
                                
                                JS采用正则表达式简单获取URL地址栏参数
                                    chiangfai
js地址栏参数获取
                                    GetUrlParam:function GetUrlParam(param){
		var reg = new RegExp("(^|&)"+ param +"=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if(r!=null
                                
                                怎样将数据表拷贝到powerdesigner (本地数据库表)
                                    Array_06
powerDesigner
                                    ================================================== 
 
1、打开PowerDesigner12，在菜单中按照如下方式进行操作 
file->Reverse Engineer->DataBase 
点击后，弹出 New Physical Data Model 的对话框 
2、在General选项卡中 
Model name:模板名字，自
                                
                                logbackのhelloworld
                                    飞翔的马甲
日志logback
                                    一、概述 
 
1.日志是啥？ 
当我是个逗比的时候我是这么理解的：log.debug()代替了system.out.print(); 
当我项目工作时，以为是一堆得.log文件。 
这两天项目发布新版本，比较轻松，决定好好地研究下日志以及logback。 
传送门1：日志的作用与方法： 
http://www.infoq.com/cn/articles/why-and-how-log 
上面的作
                                
                                新浪微博爬虫模拟登陆
                                    随意而生
新浪微博
                                    转载自：http://hi.baidu.com/erliang20088/item/251db4b040b8ce58ba0e1235 
  
  
近来由于毕设需要，重新修改了新浪微博爬虫废了不少劲，希望下边的总结能够帮助后来的同学们。 
     现行版的模拟登陆与以前相比，最大的改动在于cookie获取时候的模拟url的请求
                                
                                synchronized
                                    香水浓
javathread
                                        Java语言的关键字，可用来给对象和方法或者代码块加锁，当它锁定一个方法或者一个代码块的时候，同一时刻最多只有一个线程执行这段代码。当两个并发线程访问同一个对象object中的这个加锁同步代码块时，一个时间内只能有一个线程得到执行。另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块。然而，当一个线程访问object的一个加锁代码块时，另一个线程仍然
                                
                                maven 简单实用教程
                                    AdyZhang
maven
                                    1. Maven介绍  1.1. 简介 java编写的用于构建系统的自动化工具。目前版本是2.0.9，注意maven2和maven1有很大区别，阅读第三方文档时需要区分版本。 1.2. Maven资源 见官方网站；The 5 minute test，官方简易入门文档；Getting Started Tutorial，官方入门文档；Build Coo
                                
                                Android 通过 intent传值获得null
                                    aijuans
android
                                    我在通过intent 获得传递兑现过的时候报错，空指针,我是getMap方法进行传值，代码如下        1   2   3   4   5   6   7   8   9      
public 
void 
getMap(View view){       
         
Intent i =
                                
                                apache 做代理 报如下错误：The proxy server received an invalid response from an upstream
                                    baalwolf
response
                                    网站配置是apache＋tomcat,tomcat没有报错，apache报错是： 
The proxy server received an invalid response from an upstream server. The proxy server could not handle the request GET /. Reason: Error reading fr
                                
                                Tomcat6 内存和线程配置
                                    BigBird2012
tomcat6
                                    1、修改启动时内存参数、并指定JVM时区 （在windows server 2008 下时间少了8个小时） 
在Tomcat上运行j2ee项目代码时，经常会出现内存溢出的情况，解决办法是在系统参数中增加系统参数：  
window下， 在catalina.bat最前面 
  set JAVA_OPTS=-XX:PermSize=64M -XX:MaxPermSize=128m -Xms5
                                
                                Karam与TDD
                                    bijian1013
KaramTDD
                                    一.TDD 
        测试驱动开发（Test-Driven Development,TDD）是一种敏捷（AGILE）开发方法论，它把开发流程倒转了过来，在进行代码实现之前，首先保证编写测试用例，从而用测试来驱动开发（而不是把测试作为一项验证工具来使用）。 
        TDD的原则很简单： 
a.只有当某个
                                
                                [Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States
                                    bit1129
zookeeper
                                        public enum States {
        CONNECTING, //Zookeeper服务器不可用，客户端处于尝试链接状态
        ASSOCIATING, //？？？
        CONNECTED, //链接建立，可以与Zookeeper服务器正常通信
        CONNECTEDREADONLY, //处于只读状态的链接状态，只读模式可以在
                                
                                【Scala十四】Scala核心八：闭包
                                    bit1129
scala
                                    Free variable A free variable of an expression is a variable that’s used inside the expression but not defined inside the expression. For instance, in the function literal expression (x: Int) => (x
                                
                                android发送json并解析返回json
                                    ronin47
android
                                    package com.http.test; 
 
 
import org.apache.http.HttpResponse; 
import org.apache.http.HttpStatus; 
import org.apache.http.client.HttpClient; 
import org.apache.http.client.methods.HttpGet; 
import 
                                
                                一份IT实习生的总结
                                    brotherlamp
PHPphp资料php教程php培训php视频
                                    今天突然发现在不知不觉中自己已经实习了 3 个月了，现在可能不算是真正意义上的实习吧，因为现在自己才大三，在这边撸代码的同时还要考虑到学校的功课跟期末考试。让我震惊的是，我完全想不到在这 3 个月里我到底学到了什么，这是一件多么悲催的事情啊。同时我对我应该 get 到什么新技能也很迷茫。所以今晚还是总结下把，让自己在接下来的实习生活有更加明确的方向。最后感谢工作室给我们几个人这个机会让我们提前出来
                                
                                据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。 将重物放到天平左侧，问在两边如何添加砝码
                                    bylijinnan
java
                                    
public class ScalesBalance {

	/**
	 * 题目：
	 * 给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。 （假设N无限大，但一种重量的砝码只有一个）
	 * 将重物放到天平左侧，问在两边如何添加砝码使两边平衡
	 * 
	 * 分析：
	 * 三进制
	 * 我们约定括号表示里面的数是三进制，例如 47=(1202
                                
                                dom4j最常用最简单的方法
                                    chiangfai
dom4j
                                    要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/目前最新dom4j包下载地址:http://nchc.dl.sourceforge.net/sourceforge/dom4j/dom4j-1.6.1.zip 
解开后有两个包,仅操作XML文档的话把dom4j-1.6.1.jar加入工程就可以了,如果需要使用XPath的话还需要
                                
                                简单HBase笔记
                                    chenchao051
hbase
                                     一、Client-side write buffer 客户端缓存请求   描述：可以缓存客户端的请求，以此来减少RPC的次数，但是缓存只是被存在一个ArrayList中，所以多线程访问时不安全的。   可以使用getWriteBuffer()方法来取得客户端缓存中的数据。 默认关闭。      二、Scan的Caching   描述： next( )方法请求一行就要使用一次RPC,即使
                                
                                mysqldump导出时出现when doing LOCK TABLES
                                    daizj
mysqlmysqdump导数据
                                    　　执行　mysqldump -uxxx -pxxx -hxxx -Pxxxx database tablename > tablename.sql　 
导出表时，会报 
 
mysqldump: Got error: 1044: Access denied for user 'xxx'@'xxx' to database 'xxx' when doing LOCK TABLES 
 
解决
                                
                                CSS渲染原理
                                    dcj3sjt126com
Web
                                       从事Web前端开发的人都与CSS打交道很多，有的人也许不知道css是怎么去工作的，写出来的css浏览器是怎么样去解析的呢？当这个成为我们提高css水平的一个瓶颈时，是否应该多了解一下呢？   
  
       一、浏览器的发展与CSS      
  
   
                                
                                《阿甘正传》台词
                                    dcj3sjt126com

                                    Part Ⅰ: 
《阿甘正传》Forrest Gump经典中英文对白 
Forrest: Hello! My names Forrest. Forrest Gump. You wanna Chocolate? I could eat about a million and a half othese. My momma always said life was like a box ochocol
                                
                                Java处理JSON
                                    dyy_gusi
json
                                    Json在数据传输中很好用，原因是JSON 比 XML 更小、更快，更易解析。 
在Java程序中，如何使用处理JSON，现在有很多工具可以处理，比较流行常用的是google的gson和alibaba的fastjson，具体使用如下： 
1、读取json然后处理 
class ReadJSON
{
    public static void main(String[] args)
    
                                
                                win7下nginx和php的配置
                                    geeksun
nginx
                                    1.  安装包准备 
nginx :  从nginx.org下载nginx-1.8.0.zip 
php： 从php.net下载php-5.6.10-Win32-VC11-x64.zip， php是免安装文件。 
RunHiddenConsole: 用于隐藏命令行窗口 
  
2. 配置 
# java用8080端口做应用服务器，nginx反向代理到这个端口即可 
p
                                
                                基于2.8版本redis配置文件中文解释
                                    hongtoushizi
redis
                                    转载自： http://wangwei007.blog.51cto.com/68019/1548167 
       在Redis中直接启动redis-server服务时, 采用的是默认的配置文件。采用redis-server   xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务。下面是Redis2.8.9的配置文
                                
                                第五章 常用Lua开发库3-模板渲染
                                    jinnianshilongnian
nginxlua
                                    动态web网页开发是Web开发中一个常见的场景，比如像京东商品详情页，其页面逻辑是非常复杂的，需要使用模板技术来实现。而Lua中也有许多模板引擎，如目前我在使用的lua-resty-template，可以渲染很复杂的页面，借助LuaJIT其性能也是可以接受的。 
  
如果学习过JavaEE中的servlet和JSP的话，应该知道JSP模板最终会被翻译成Servlet来执行；而lua-r
                                
                                JZSearch大数据搜索引擎
                                    颠覆者
JavaScript
                                    系统简介： 
 
 大数据的特点有四个层面：第一，数据体量巨大。从TB级别，跃升到PB级别；第二，数据类型繁多。网络日志、视频、图片、地理位置信息等等。第三，价值密度低。以视频为例，连续不间断监控过程中，可能有用的数据仅仅有一两秒。第四，处理速度快。最后这一点也是和传统的数据挖掘技术有着本质的不同。业界将其归纳为4个“V”——Volume，Variety，Value，Velocity。大数据搜索引
                                
                                10招让你成为杰出的Java程序员
                                    pda158
java编程框架
                                    如果你是一个热衷于技术的  
Java 程序员， 那么下面的 10 个要点可以让你在众多 Java 开发人员中脱颖而出。   　　 
1. 拥有扎实的基础和深刻理解 OO 原则   　　对于 Java 程序员，深刻理解 Object Oriented Programming（面向对象编程）这一概念是必须的。没有 OOPS 的坚实基础，就领会不了像 Java 这些面向对象编程语言
                                
                                tomcat之oracle连接池配置
                                    小网客
oracle
                                    tomcat版本7.0 
配置oracle连接池方式： 
修改tomcat的server.xml配置文件： 
 <GlobalNamingResources>
 
			  <Resource name="utermdatasource" auth="Container"  
 type="javax.sql.DataSou
                                
                                Oracle 分页算法汇总
                                    vipbooks
oraclesql算法.net
                                        这是我找到的一些关于Oracle分页的算法，大家那里还有没有其他好的算法没？我们大家一起分享一下！ 
 
 

-- Oracle 分页算法一
select * from (
       select page.*,rownum rn from (select * from help) page 
       -- 20 = (currentPag
                                
                
            
        
    


    
        
            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    


    
        
            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.