当前位置：首页 > article >正文

HTML学习笔记(3)

article 2025/1/16 17:06:14

一、元素种类

块级元素(标签,盒子) 特点:独占一行,对宽度高度支持
内联级元素(标签,盒子) 特点:不独占一行,对宽度高度不支持
内联块级元素(标签,盒子) 特点:不独占一行,对宽度高度支持
弹性盒子

1.块级元素如div、p、h1~h6、ul、li等等，一个元素标签占一行，并且可以修改宽高

2.内联级元素如span、a等等，一个元素不独占一行，并且不可以修改宽高

3.内联块级元素如img、input，一个元素不独占一行，并且可以修改宽高

4.弹性盒子一个元素是弹性盒子，子元素默认始终横向布局

弹性盒子测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css盒子模型.css">
</head>
<body>
    <div>
        <h3>hhh</h3>
        <h3>hhh</h3>
        <h3>hhh</h3>
        <h3>hhh</h3>
        <h3>hhh</h3>
    </div>
</body>
</html>

div{
    background: pink;
    /* display: flex; */
}

h3 {
    background: yellow;
    width: 200px;
    height: 100px;
}

通过修改CSS文件的注释可以发现弹性盒子的性质更好理解，如下图

每个元素都有自己本质的属性为块级或者内联级等等，但是可以也可以相互转换

display:block;  /*转化为块级元素*/
display:inline;    /*转化为内联级元素*/
display:inline-block;    /*转化为内联块级元素*/
display:flex;    /*转化为弹性盒子*/

二、元素的组成

1、内容区

div {
    width: 200px;
    height: 100px;
}

2、填充区

内容和边框之间的距离，用法如下:

div {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding:50px;  /* 上下左右都是50 */
    padding:10px 20px; /* 上下10,左右20 */
    padding:30px 40px 50px; /* 上30,右40,下50,左40 */
    padding:30px 40px 50px 60; /*上30,右40,下50,左60,顺时针转.*/
}

3、边框区

div{
    border-color: blue; /* 颜色 */
    border-width: 20px; /* 粗细 */
    border-style: solid; /*方式*/
}

等价于

div{
    border: 20px blue solid;
}

也不同区域不同设置

div{
    border-top: 10px green dashed;  /*上边是10px绿色的小正方体*/
    border-bottom: 20px purple dotted;  /*下边是20px紫色的小圈*/
    border-bottom-color: aqua; /*修改颜色*/
}

4、外边距

div {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin:50px;  /* 上下左右都是50 */
    margin:auto; /* 水平方向居中,必须是块级元素 */
    margin:30px 40px 50px 60; /*上30,右40,下50,左60,顺时针转.*/
}

三、CSS布局

1、flex-direction

控制弹性盒子内元素的排列方向

row:横向从左往右
row-reverse:横向从右往左
column:纵向从上往下
column-reverse:纵向从下往上

2、justify-content

控制弹性盒子内元素的分布方式

flex-start:代表在排列方向上的开始位置分布
flex-end:代表在排列方向上的结束位置分布
center:中间
space-between:空白放在元素之间
space-around:空白放在元素周围
space-evenly:均匀分布

3、align-items

控制弹性盒子元素在垂直方向上的对齐方式

flex-start:顶部(左边)对齐
flex-end:底部(右边)对齐
center:居中对齐
baseline:首行底部对齐

4、flex-wrap

warp换行
nowarp不换行

5、align-content

控制弹性盒子内多行的分布方式

flex-start:所有行都在顶部(左边)
flex-end:所有行都在底部(右边)
center:居中
space-between:空白放在行与行之间
space-arount:空吧放在行的上下之间
space-evenly:间距均匀

四、background

英文单词
rgb(red,green,blue) 0~255
rgba(red,green,blue,alpha) alpha 表面透明度
opacity透明度 0-1 针对整个元素的透明度
#000000 #ffffff
linear-gradient(degree, color1, color2):按照degree角度，从color1-color2渐变（transparent透明色)

注：推荐一个很好的网站，当不知道用什么颜色的时候可以看一下

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨280 handpicked colors ready for COPY & PASTEhttps://flatuicolors.com/