【前端基础--4】

定位属性 position

可以将元素定位到你想要放到位置，使用方位值来进行移动(top,left,right,bottom)。

1.相对定位

position: relative; top: 20px; left: 20px;

以自身为定点进行移动，不会脱离文档流。

不会影响元素本身的性质；块级元素支持auto自适应居中。

2.绝对定位

position: absolute; top: 0px; left: 0px;

会脱离文档流，原本位置不会继续占有。

支持自定义高宽，元素高宽默认为0，暂不支持auto自适应居中。

找不到最近的定位父级，默认参考浏览器 (body) 来移动。

子绝父相

子级是绝对定位，父级是相对定位，子级参考父级来进行移动。

方位属性

left和top优先级高于right和bottom

若一个元素只拥有left和right属性，以left为准

3.固定定位

position: fixed;

以浏览器窗口为参考（滚动屏幕时固定不动）

元素高宽默认，margin: auto;失效

若在相同位置，看谁的优先级高，谁覆盖。

z-index:1; 定位为1级（改变级数来进行强制覆盖）

子元素在父级里面居中：

第一种：

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

margin: auto;

第二种：

position: absolute;

top: 50%;

left: 50%;

/* 负自身宽度的一半 */

margin-left: -50px;

/* 负自身高度的一半 */

margin-top: -50px;

width: 100px;

height: 100px;

background-cololr: pink;

表格（浅谈）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border: 1px solid palevioletred;
            background-color: blanchedalmond;
            border-collapse: collapse;
        }
        td,th,tr{
            border: 1px solid palevioletred;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- table: 定义表格标签 -->
    <table>
        <!-- caption: 表格标题 -->
        <caption>调查表</caption>
        <!-- tr: 表格里面的一行 -->
        <tr>
            <!-- th: 表头（自带加粗 居中） -->
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>
        <tr>
            <!-- td: 一行里面的单元格 -->
            <td>一花</td>
            <td>20</td>
            <td>演戏</td>
        </tr>
        <tr>
            <td>二乃</td>
            <td>20</td>
            <td>打游戏</td>
        </tr>
        <tr>
            <td>三玖</td>
            <td>20</td>
            <td>读历史</td>
        </tr>
        <tr>
            <td>四叶</td>
            <td>20</td>
            <td>运动</td>
        </tr>
        <tr>
            <td>五月</td>
            <td>20</td>
            <td>读书</td>
        </tr>
    </table>
    <!-- 规范：tr里面的标签只能是td或th
        一行里面单元格的高度取决于一行中最大的那个
        一行里面单元格的宽度是按照内容长度来分配的 -->
</body>
</html>

选一个将<td>20</td>改成：<td rowspan='3'>20</td> ，同时要将更改的这一行的下两段中的<td>20</td>删掉可以向下合并三行年龄。

也可以将某一段改为：

        <tr>
            <td colspan='3'>三玖</td>
        </tr>

可以合并那一行的三列：

表单样式

表单标签form

action: 表单的提交地址

method：提交格式

name：表单的名称

target：提交完这个表单后，新页面在哪里打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #form{
            width: 400px;
            height: 400px;
            background-color: antiquewhite;
            margin: auto;
        }
        input{
            width: 99px;
            height: 20px;
            background-color: darkgrey;
        }
    </style>
</head>
<body>
    <!-- form: 表单标签
        action: 表单的提交地址
        method: 提交格式  https请求格式：post/get等
            get请求：从指定的资源请求数据，用于获取数据，一般用于搜索排序和筛选之类的操作。
            post请求：向指定的资源提交要被处理的数据，用于将数据发送服务器，一般用于修改和写入数据。
        name: 表单的名称
        target: 提交这个表单后新页面在哪里打开 -->
    <form action="" method="" name="login" target="" id="form">
        <!-- 单行文本输入框 -->
        账号：<input type="text">
        <br>
        <!-- 密码输入框(输入的数据会隐藏为小黑点) -->
        密码：<input type="password">
    </form>
</body>
</html>

input输入控件

通过type属性展示不同的输入效果

text --> 单行文本输入框
password -> 密码输入框
submit --> 提交按钮（具有刷新功能）
radio --> 单选框
checkbox --> 多选框
reset --> 重置按钮
button --> 空按钮（可以通过value来给这个按钮取名字）
file --> 文件上传按钮
number --> 数字输入框（e约等于2.71828..也可以输入）
email --> 邮件输入框

placeholder属性文本提示，告诉用户输入什么

name属性控件名称

账号：<input type="text" placeholder="请输入账号" name="username">

value属性改变控件里面的值

radio

        <form action="">
            <input type="text">

            <input type="radio" name="sex">男

            <input type="radio" name="sex">
            <!-- label：一般用来放文字，规定input控件标题描述 -->
            <label for="">女</label>
            <!-- 单选的话name属性只能是一个 -->
        </form>

checked属性默认被选中

<input type="radio" name="sex" checked>

多行文本输入框

<textarea name="" id="" cols="30" rows="10"></textarea>

下拉列表标签

        <select name="" id="">
            <!-- 下拉列表项 -->
            <option value="">星期一</option>
            <option value="">星期二</option>
            <option value="">星期三</option>
            <option value="">星期四</option>
            <option value="">星期五</option>
        </select>

高级选择器

属性选择器

选择标签来添加样式

选择a标签中带有target属性的a标签添加样式

a[target]{color: pink;}

给title为11的添加样式

a[title='11']{color: red;}

给a标签的herf属性中以h开头的添加样式

a[herf ^='h']{color: blue;}

给以k为结尾的添加样式

a[target $='k']{color: yellow;}

给包含字符中含有.com的添加样式

a[href *='.com']{color: skyblue;}

伪类选择器

可以改变元素状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 300px;
            background-color: antiquewhite;
        }
        /* 鼠标悬停之后 改变背景颜色和宽(通用) */
        .box:hover{
            width: 300px;
            background-color: indianred;
        }
        /* 点击时改变背景颜色(通用) */
        .box:active{
            background-color: cadetblue;
        }
        /* 没有被访问的a标签 */
        a:link{
            color: darkseagreen;
        }
        /* 被访问过的a标签 */
        a:visited{
            color:bisque;
        }
        /* 点击input获取焦点 */
        .btn:focus{
            border: 1px solid pink;
        }
        .text{
            /* 消失 */
            display:none;
            width: 150px;
            height: 50px;
            background-color: rgb(190, 227, 250);
        }
        /* input和p标签是同级关系 */
        .btn:focus~.text{
            /* 显示 */
            display: block;
        }
        /* 点击勾选状态(只能单选或多选使用) */
        .rad:checked{
            width: 20px;
            height: 20px;
        }
        .pic{
            display: none;
        }
        .rad:checked~.pic{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <a href="https://www.bilibili.com/">这里是a标签</a>
    <a href="https://www.bilibili.com/" target="_blank" rel="zxcvbnm">这里是a标签2</a>
    <br>
    <input type="text" class="btn">
    <p class="text">点击后就看到我啦</p>
    <input type="radio" class="rad">
    <input type="checkbox" name="" id="" class="rad">
    <img src="./11.jpg" alt="" width="100px" class="pic">
</body>
</html>

结构选择器

子元素选择器

通过父级给子元素添加样式

.list>li:nth-child(1){color: pink}

给类为list的列表父级的第一个子级的字体设置为粉色。

可以简写为：.list>li:nth-child(1){color: pink}

全选：.list>li:nth-child(n+1){color: pink}

给第奇数个子级（1,3,5..）设置（odd/2n-1）

.list>li:nth-child(odd){color: pink}

给第偶数个子级（2,4,6..）设置（even/2n）

.list>li:nth-child(2n){color: pink}

选择最后一个子元素添加样式

.list>li:last-child{color: blue}

注意：要满足父子关系。比如，ul的众多li标签之间有一个span标签，这个子元素选择器就起不了作用了。

同类别选择器

选择类为box的div标签下方的p标签

.box>p:nth-child(3){color: pink;}

如果p标签中间夹了span标签，这样写无视其他元素影响

.box>p:nth-of-type(3){color: red;}

选择最后一个p标签

p:last-of-type{color: blue;}

伪元素选择器

是一个行内元素，不支持设定高宽

/* 伪元素创建，在元素前进行插入 */

.box::before{

/* 伪元素必备 开启伪元素的一个钥匙 */

content: '你好！';

float: left;

width: 50px;

height: 50px;

background-color: antiquewhite;

}

/* 在元素内容后插入 */

.box::after{

/* 伪元素内容 */

content: '耶！';

color: cadetblue;

}

/* 父元素可以利用伪元素来清除浮动塌陷 */

.wrap::after{

content: '';

display: block;

clear: both;

}

阿里图标的使用：

1.进入阿里图标官网 https://www.iconfont.cn/

2.注册，登录

3.可以选择需要用到的图标，加入购物车

4.找到购物车，点击下载即可

5.解压文件，可以找到demo_index页面三种方式添加图标

第一种方式：

style标签中：

@font-face{font-family: 'iconfont';

src: url('./阿里图标/iconfont.ttf') format('truetype');}

.iconfont{

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;}

body标签中：

<span class="iconfont">(图标号)</span>

第二种方式：

引入外部格式使用阿里css样式

<link rel="stylesheet" href="./阿里图标/iconfont.css">

style中：

.iconfont{font-size: 30px;

color: red;}

body中：

<span class="iconfont"></span>

第三种方式（支持有颜色的图标）：

引入js样式

<script src="./阿里图标/iconfont.js"></script>

style中：

.icon{width: 1em;

height:1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;}

body中：

<svg class="icon" aria-hidden="true">

<use xlink:href="#icon-xxx"></use>

</svg>

flex布局（弹性盒模型）

传统布局：浮动定位行内块等

flex布局：方法简单，能自动分配父级里面子元素的对齐方式。可以适应不同屏幕的布局。

        .wrap{
            /* 开启flex布局 */
            display: flex;
            /* 规定子元素在x轴居中对齐 */
            justify-content: center;
            /* 规定子元素在y轴居中对齐 */
            align-items: center;
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }

父级盒子开启flex（display: flex;) 后

子元素默认横向排列，假如总宽度大于父级盒子，不会换行排列，会等比例缩放。

行内元素在父级盒子里面支持写高宽，没写会默认分配。

flex布局属性

1.display: flex 给父级开启flex布局

2.flex-direction 控制子元素排列方式

控制子元素排列方式，默认从左至右。

flex-direction: row;

从右至左排列

flex-direction: row-reverse;

垂直方向主轴向下排列

flex-direction: column;

主轴向上

flex-direction: column-reverse;

3.flex-wrap 控制子元素是否换行显示

默认不换行显示

flex-wrap: nowrap;

超出父级宽度就换行

flex-wrap: wrap;

主轴方向和换行显示复合写法

flex-flow: row-reverse wrap;

4.justify-content 控制子元素在主轴的对齐方式（x轴）

默认子元素在起点左对齐

justify-content: flex-start;

右对齐（主轴终点对齐）

justify-content: flex-end;

在主轴居中对齐

justify-content: center;

两端对齐，中间间隔均分

justify-content: space-between;

所有子元素间隔相同且相等

justify-content: space-around;

所有间隔平均分配

justify-content: space-evenly;

5.align-items 控制子元素在侧轴的对齐方式（y轴）

侧轴默认值（若没写高度，则高度与父级相同）

align-items: stretch;

y轴顶部对齐（起点对齐）

align-items: flex-start;

y轴底部对齐（终点对齐）

align-items: flex-end

y轴方向垂直居中对齐

align-items: center;

与文本基线对齐

align-items: baseline;

6. align-content 控制行与行之间的对齐

行与行之间在起点对齐，上下没有间隔

align-content: flex-start;

行与行之间在底部对齐

align-content: flex-end;

行与行之间居中对齐

align-content: center;

行与行之间两端对齐

align-content: space-between;

行与行之间间隔平均分配

align-content: space-around;

所有行之间间隔相等

align-content: space-evenly;