1布局float

在这里插入图片描述

2垂直居中和水平居中

在这里插入图片描述

3 表格

在这里插入图片描述

4列表

在这里插入图片描述

5 form

5.1 文本框

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

在这里插入图片描述

5.2 密码框

<form>
Password: <input type="password" name="pwd">
</form>

在这里插入图片描述

5.3单选按钮

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

在这里插入图片描述

5.4 复选框（Checkboxes）

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

在这里插入图片描述

5.5 提交按钮

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

在这里插入图片描述

5.6 下拉列表

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

在这里插入图片描述

5.7 文本域

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

6 css

6.1 文本

在这里插入图片描述

p.small {line-height:90%} 设置行高

水平对齐
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

vertical-align:text-top; 垂直对齐

a {text-decoration:none;} 去掉下划线

p {text-indent:50px;} 文本缩进属性是用来指定文本的第一行的缩进。

color:red; 字体颜色

h1 {font-size:250%} 字体大小

border:5px solid red;

6.2 display

p {display:inline;}行内元素

在这里插入图片描述

span {display:block;}块状元素

在这里插入图片描述

display:none或visibility:hidden

在这里插入图片描述

6.2display:flex

地址

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="width:300px;border:1px solid red;display: flex;flex-wrap: wrap;">
            <div style="width: 100px;height: 100px;background-color: black;"></div>
            <div style="width: 100px;height: 100px;background-color: green;"></div>
            <div style="width: 100px;height: 100px;background-color: yellow;"></div>
            <div style="width: 100px;height: 100px;background-color: blue;"></div>
        </div>
    </body>
</html>

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

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <style>
        .father {
     
     
            width: 500px;
            height: 100px;
            background-color: red;
            display: flex;
            flex-flow:row;
        }

        .box1 {
     
     
            flex: 3;
            background: blue;

        }
        .box2{
     
     
            flex: 2;
            background: pink;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

</html>

6.3Position(定位)

static HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 relative 相对定位元素的定位是相对其正常位置。

fixed 元素的位置相对于浏览器窗口是固定位置。

absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

sticky

在这里插入图片描述