py17day12

一、前端基础之HTML

1.web服务端本质：

from socket import *

s = socket(AF_INET,SOCK_STREAM)
s.bind(('127.0.0.1',8080))
s.listen(5)

print('waiting for connect...')

while True:
    conn,addr = s.accept()
    print('client  has been connected:', addr)
    while True:
        try:
            request = conn.recv(1024)
            print(request.decode('utf-8'))
            conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello</h1>", "utf8"))
　　　　　　　# 相应给客户端的数据的头信息和体必须换行
        except Exception as e:
            print(e)
            break

#运行结果：
waiting for connect...
client  has been connected: ('127.0.0.1', 59765)
＃　以下是客户端发送给服务端的请求头信息
GET / HTTP/1.1
Host: 127.0.0.1:8080
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: zh-CN,zh;q=0.8

　　客户端（浏览器）接收信息：

２.html的概念：

超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则
浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
静态网页文件扩展名：.html 或 .htm

　　HTML 不是一种编程语言，而是一种标记语言 (markup language)
　　HTML 使用标记标签来描述网页

3.html的结构：

<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
<title></title>定义网页标题，在浏览器标题栏显示。
<body></body>之间的文本是可见的网页主体内容

4.html标签格式：

标签的语法：

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名属性1=“属性值1” 属性2=“属性值2”…… />

5.常用标签：

1)<!DOCTYPE>标签：

　　<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat

2)<head>内常用标签：

　　a.<meta>标签：

　　<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
　　<meta>标签位于文档的头部，不包含任何内容。
　　<meta>提供的信息是用户不可见的

　　meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

　　(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="Dylan的博客，pydev,python3自动化开发">
 
<meta name="description" content="本博客记录了html的基础内容">

　　(2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)表示2秒后跳转到指定URL
 
<meta http-equiv="content-Type" charset=UTF8">
 
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

　　b.其他标签：

    <title>Elaine</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script>

3)<body>内常用标签：

　　a.基本标签（块级标签和内联标签）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

    <p>p标签1</p>
    <p>p标签2</p>

    <b>b标签</b>

    <strong>strong标签</strong>

    <strike>strike标签</strike>
    <!--换行-->
    <br>
    <!--水平线-->
    <hr>
    <!--一些特殊字符-->
    &lt; &gt；&quot；&copy;&reg;
</body>
</html>

基本标签（块级标签和内联标签）

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

特殊字符：
      &lt; &gt；&quot；&copy;&reg;

　　b.<div>和<span>：　

　　<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
　　<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

　　块级元素与行内元素的区别：
　　所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

    <div style="background-color: darkorange" >div标签</div>
    <span style="background-color: aqua">span标签</span>

　　c.图形标签<img>：

'''
src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

'''

　　d.超链接标签<a>（锚标签）：

　　什么是超级链接？

　　所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序

什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

URL

URL概念

'''

<a href="" target="_blank" >click</a>

target="_blank" 保留当前页跳转
href属性指定目标网页地址。该地址可以有几种类型：

    绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
    相对 URL - 指当前站点中确切的路径（href="index.htm"）
    锚 URL - 指向页面中的锚（href="#top"）

'''

　　e.列表标签：

'''
<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>: 有序列表
         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题
         <dd> 列表项

'''

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>

    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>

    <dl>
        <dt>列表标题</dt>
        <dd>定义列表1</dd>
        <dd>定义列表2</dd>
        <dd>定义列表3</dd>
    </dl>
</body>
</html>

列表标签

　　 f.表格标签<table>：

　　表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
　　表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
　　表格的基本结构：

<table>
         <tr>
                <td>标题1</td>
                <td>标题2</td>
         </tr>
         
         <tr>
                <td>内容1</td>
                <td>内容2</td>
         </tr>
</table>

　　table标签属性：

'''

<tr>: table row

<th>: table head cell

<td>: table data cell


属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列（即合并单元格）

'''

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" cellpadding="10" cellspacing="5">
        <tr>
            <th colspan="5">员工信息</th>
        </tr>

        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>email</th>
            <th>部门</th>
        </tr>

        <tr>
            <td>1</td>
            <td>Dylan</td>
            <td>29</td>
            <td>dylan@163.com</td>
            <td rowspan="2">PM</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Elaine</td>
            <td>30</td>
            <td>elaine@163.com</td>
        </tr>

    </table>
</body>
</html>

table_test

　　g.表单标签<form>：

　　①功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互，表单包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含textarea、select、fieldset和 label标签。

　　②表单属性：

　　action：表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

　　method：表单的提交方式 post/get默认取值就是get

　　基本概念：
　　HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
　　表单一般用来收集用户的输入信息
　　表单工作原理：
　　访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
　　服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

　　③<input>系列标签：

'''
<1> 表单类型

type:        text 文本输入框

             password 密码输入框

             radio 单选框

             checkbox 多选框  

             submit 提交按钮            

             button 按钮(需要配合js使用.) button和submit的区别？

             file 提交文件：form表单需要加上属性 enctype="multipart/form-data" 
            
            上传文件注意两点：1)请求方式必须是post
                           2)加上enctype="multipart/form-data"

 <2> 表单属性

 name:    表单提交项的键.

           注意和id属性的区别：name属性是和服务器通信时使用的名称；
           而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的

value:表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
    
    当type="button", "reset", "submit" - 定义按钮上的显示的文本
                 
    当type="text", "password", "hidden" - 定义输入字段的初始值
                 
    当type="checkbox", "radio", "image" - 定义与输入相关联的值


checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

'''

　　test.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
    <form action="">
        <p>姓名：<input type="text" name="username"></p>
        <p>密码：<input type="password" name="pwd" ></p>

        <p>爱好：<input type="checkbox" name="hobby" value="basktball">篮球
                 <input type="checkbox" name="hobby" value="football">足球
                 <input type="checkbox" name="hobby" value="book">看书
        </p>
        <p>
           性别：<input type="radio" name="gender" value="1">男
                 <input type="radio" name="gender" value="0">女
        </p>
        <p><input type="image" alt="点击图片的位置"></p>
        <p><input type="hidden"></p>
        <p><input type="file"></p>
        <p><input type="button" value="button"></p>
        <p><input type="reset" value="reset"></p>
        <p><input type="submit" value="Submit"></p>
</form>
</html>

　　④select标签：

'''
 <select> 下拉选标签属性


          name:表单提交项的键.

          size：显示选项个数

          multiple：multiple 
                 <optgroup>为每一项加上分组

                 <option> 下拉选中的每一项 属性：

                       value:表单提交项的值.   
                       selected: selected下拉选默认被选中

'''

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <select>
            <option value="1">Dylan</option>
            <option value="2">Elaine</option>
            <option value="3" selected="selected">姓名</option>
        </select>

        <select size="3">
            <option>K264</option>
            <option>K573</option>
            <option>D26</option>
            <option selected="selected">车次</option>
        </select>

        <select multiple="multiple" size="3">
            <option>K264</option>
            <option>K573</option>
            <option>D26</option>
            <option>车次</option>
        </select>

        <select>
            <optgroup label="内蒙古">
                <option>包头</option>
                <option>包头东</option>
            </optgroup>
            <optgroup label="黑龙江">
                <option>哈尔滨</option>
                <option>哈尔滨西</option>
            </optgroup>
        </select>
</body>
</html>

　　⑤<textarea> 多行文本框：

'''
        <textarea cols=“宽度” rows=“高度” name=“名称”>
                   默认内容
        </textarea>

'''

<p>简介：</p>
        <p>
            <textarea cols="23" rows="10" name="resume">

            </textarea>
        </p>

View Code

　　⑥lable标签：

　　定义：<label> 标签为 input 元素定义标注（标记）。
　　说明：
　　　　1 label 元素不会向用户呈现任何特殊效果。
　　　　2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

        <p>
            <label for="user">姓名：</label>
            <input type="text" name="username" id="user">
        </p>

　　　　点击“姓名”会自动转到输入栏：

　　⑦lable标签：

        <fieldset>
            <legend>登录框</legend>
            用户名：<input type="text">
            密码：<input type="password">
        </fieldset>

二、前端基础之CSS

1.CSS语法：

　　CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

'''
        selector {
                  property: value;
                  property: value;
             ...  property: value
         
          }
         
'''

　　例如：

h1 {color:red; font-size:14px;}

2.CSS四种引入方式：

　　1)行内式：

　　行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

<p style="background-color: rebeccapurple">hello dylan</p>

　　2)嵌入式：

　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：　

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

　　3)链接式：

　　将一个.css文件引入到HTML文件中：

<head>

　　<link href="mystyle.css" rel="stylesheet" type="text/css"/>

</head>

　　4)导入式：

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

<style type="text/css">
 
          @import"mystyle.css"; 此处要注意.css文件的路径
 
</style>

注意：

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

3.CSS选择器：

1)基本选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/
        p{
            background-color: blue;
        }
        /*id选择器*/
        #p2{
            background-color: orange;
        }
        /*类选择器*/
        .p3{
            background-color: aqua;
        }
        /*通用选择器*/
        *{
            color: white;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p id="p2">p2</p>
    <p class="p3">p3</p>
    <p>p4</p>
</body>
</html>

基本选择器test

2)组合选择器：

　　a.多元素选择器：

　　E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔，如: div,p { color:#f00; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        p,div,.h1{
            color: blueviolet;
        }
    </style>
<body>
    <p>p1</p>
    <div>div1</div>
    <h2 class="h1">h1</h2>
</body>
</html>

多元素选择器

　　b.后代元素选择器：

　　E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔，如: li a { font-weight:bold;｝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .outer p{
            color: darkorange;
        }
    </style>
<body>
    <div class="outer">
        <p>p2</p>
        <div>
            <p>p3</p>
        </div>
    </div>
</body>
</html>

后代元素选择器

　　c.子元素选择器：

　　E > F 子元素选择器，匹配所有E元素的子元素F，如: div > p { color:#f00; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .outer>p{
            color: darkorange;
        }
    </style>
<body>
    <div class="outer">
        <p>p2</p>
        <div>
            <p>p3</p>
        </div>
    </div>
</body>
</html>

子元素选择器

　　d.毗邻元素选择器：

　　E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F，如:div + p { color:#f00; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        p + div{
            background-color: blueviolet;
        }


    </style>
<body>
    <p>p1</p>
    <div>div1</div>
    <h2 class="h1">h1</h2>

    <div class="outer">
        <p>p2</p>
        <div>
            <p>p3</p>
        </div>
    </div>
</body>
</html>

毗邻元素选择器

　　e.普通兄弟元素选择器：

　　E ~ F 普通兄弟选择器（以破折号隔），如: .div1 ~ p{font-size:30px; }　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        .outer ~ p{
            background-color: blueviolet;
        }


    </style>
<body>
    <div class="outer">
        <p>p</p>
        <div>
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
    <p>p3</p>
</body>
</html>

兄弟选择器

注意，关于标签嵌套：

　　一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。

2)属性选择器：

E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
 
 
E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }
 
 
E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
                td[class~=”name”] { color:#f00; }
 
E[attr^=val]    匹配属性值以指定值开头的每个元素                    
                div[class^="test"]{background:#ffff00;}
 
E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}
 
E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

4.CSS属性操作：

1)css text：

　　a.文本颜色：color

　　颜色属性被用来设置文字的颜色。

　　颜色是通过CSS最经常的指定：

- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red

　　b.水平对齐方式：

　　text-align 属性规定元素中的文本的水平对齐方式。

- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。

　　想要达到竖直对齐的效果可以通过设置line-height属性实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
        h2 {text-align:center;}
        p.publish_time {text-align:right;}
        p.content {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align 水平居中</h1>
<p class="publish_time">2017 年 5 月 17 号</p>
<p class="content">
    有个落拓不得志的中年人每隔三两天就到教堂祈祷，而且他的祷告词几乎每次都相同。第一次他到教堂时，
    跪在圣坛前，虔诚地低语：“上帝啊，请念在我多年来敬畏您的份上。让我中一次彩票吧！阿门。”
    几天后，他又垂头丧气回到教堂，同样跪着祈祷：“上帝啊，为何不让我中彩票？我愿意更谦卑地来
    服侍你，求您让我中一次彩票吧！阿门。”又过了几天，他再次出现在教堂，同样重复他的祈祷。如此周而
    复始，不间断地祈求着。到了最后一次，他跪着：“我的上帝，为何您不垂听我的祈求？让我中一次彩票吧！
    只要一次，让我解决所有困难，我愿终身奉献，专心侍奉您……”就在这时，圣坛上发出一阵宏伟庄严的声
    音：“我一直垂听你的祷告。可是最起码？你也该先去买一张彩票吧!”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body>

</html>

test.html

5.外边距（margine）和内边距（padding）：

1)盒子模型：

margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding：用于控制内容与边框之间的距离；
Border(边框)：围绕在内边距和内容外的边框。
Content(内容)：盒子的内容，显示文本和图像。

2)margine(外边距)：

　　单边属性写法：

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

　　属性简写：

margin:10px 20px 20px 10px；

        上边距为10px
        右边距为20px
        下边距为20px
        左边距为10px

margin:10px 20px 10px;

        上边距为10px
        左右边距为20px
        下边距为10px

margin:10px 20px;

        上下边距为10px
        左右边距为20px

margin:25px;

        所有的4个边距都是25px

　　居中应用：

margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height:100px;width:800px;margin: 0 auto;background-color: aqua"></div>
</body>
</html>

3)padding(内边距)：

设置一个100*100的div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 100px;
            width: 100px;
            border: 20px;
            background-color: aqua;

        }
    </style>
</head>
<body>
    <div class="div1">DIV</div>　　　　　　
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 100px;
            width: 100px;
            border: 20px;
            background-color: aqua;
            padding: 100px;
        }
    </style>
</head>
<body>
    <div class="div1">DIV</div>
</body>
</html>

padding:100px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 100px;
            width: 100px;
            border: 20px;
            background-color: aqua;
            padding-left: 100px;
        }
    </style>
</head>
<body>
    <div class="div1">DIV</div>
</body>
</html>

padding-left: 100

4)补充：

　　a.body的外边距：

　　边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上：

body{
    border: 1px solid;
    background-color: cadetblue;
}

　　>>>>解决方法：

body{
    margin: 0;
}

　　b.margin collapse(边界塌陷或者说边界重叠)：

　　1、兄弟div：
　　上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

　　2、父子div：
　　如果父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；

　　>>>> 解决方法：

overflow: hidden;

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;
        }

        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            overflow: hidden;

        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .div3{
            background-color:teal;
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div style="background-color: bisque;width: 300px;height: 300px"></div>

<div class="div1">

   <div class="div2"></div>
   <div class="div3"></div>
</div>

</body>

</html>

View Code

6.float属性：

1)块级元素和内联元素在文档流中的排列方式：

　　block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

　　inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

　　所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

　　假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: darkmagenta;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            float: left;

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: orange;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>

all_float_left

　　如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: darkmagenta;
            /*float: left;*/
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            float: left;

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: orange;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

r2,r3 float_left

　　脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。(浮动就相当于脱离文档流)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: darkmagenta;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            /*float: left;*/

        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>

</body>
</html>

由于这里的r1浮动了，所以r2就当做r1不存在，然后进行定位填充

2)非完全脱离文档流：

　　左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。一个浮动，一个没有，导致DIV不是在同个“平面”上，但内容不会造成覆盖现象，只有DIV形成覆盖现象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 100px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2">region2</div>




</body>
</html>

非完全脱离文档流

　　>>>>解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式

3)父级崩塌：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">

         * {
             margin:0;padding:0;
         }
        .container{
            border:1px solid blue;width:300px;
        }
        #box1{
            background-color:green;float:left;width:100px;height:100px;
        }
        #box2{
            background-color:deeppink; float:right;width:100px;height:100px;
        }
         #box3{
             background-color:pink;height:40px;
         }
</style>
</head>
<body>

        <div class="container">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
        </div>
        <div id="box3">box3</div>
</body>

</html>

父级崩塌

　　如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。

>>>>解决方法：

　　给.container设置固定高度，一般情况下文字内容不确定多少就不能设置固定高度，所以一般不能设置“.container”高度(当然能确定内容多高，这种情况下“.container是可以设置一个高度即可解决覆盖问题。

        .container{
            border:1px solid blue;width:300px;height: 100px;
        }

　　或者给.container加一个固定高度的子div：

<div class="container">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
                <div id="empty" style="height: 100px"></div>
</div>

　　但是这样限定固定高度会使页面操作不灵活，不推荐！

　　使用清除浮动的方法解决：

　　clear语法：
　　clear : none | left | right | both

　　取值：
　　none : 默认值。允许两边都可以有浮动对象
　　left : 不允许左边有浮动对象
　　right : 不允许右边有浮动对象
　　both : 不允许有浮动对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            float: left;
            clear: both;

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

clear_float_left

把握住两点：1、元素是从上到下、从左到右依次加载的。

　 2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。

    .clearfix:after {             <----在类名为“clearfix”的元素内最后面加入内容；
    　　content: ".";              <----内容为“.”就是一个英文的句号而已。也可以不写。
    　　display: block;            <----加入的这个元素转换为块级元素。
    　　clear: both;               <----清除左右两边浮动。
    　　visibility: hidden;        <----可见度设为隐藏。注意它和display:none;是有区别的。
                                       visibility:hidden;仍然占据空间，只是看不到而已；
    　　line-height: 0;            <----行高为0；
    　　height: 0;                 <----高度为0；
    　　font-size:0;               <----字体大小为0；
    }
    
    .clearfix { *zoom:1;}         <----这是针对于IE6的，因为IE6不支持:after伪类，这个神
                                       奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。


整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
<div class="head clearfix"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
        .clearfix:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;

            line-height: 0;
            height: 0;
            font-size:0;
        }
         * {
             margin:0;padding:0;
         }
        .container{
            border:1px solid blue;width:300px;
        }
        #box1{
            background-color:green;float:left;width:100px;height:100px;
        }
        #box2{
            background-color:deeppink; float:right;width:100px;height:100px;
        }
         #box3{
             background-color:pink;height:40px;
         }
</style>
</head>
<body>

        <div class="container clearfix">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
        </div>
        <div id="box3">box3</div>
</body>

</html>

解决父级崩塌

overflow:hidden ?

　　overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

posted @ 2017-07-16 22:58 Dylan_Wu 阅读(159) 评论(0) 收藏举报

刷新页面返回顶部

Dylan_Wu