【Web-HTML基础】颜色赋值、背景图片、文本和字体相关样式、元素的显示方式display、盒子模型、部分标签自带外边距或内边距

news2025/2/24 5:23:43

颜色赋值

背景图片

文本和字体相关样式

元素的显示方式display

盒子模型

盒子模型之content内容

盒子模型之margin外边距

盒子模型之border边框

盒子模型之padding内边距

部分标签自带外边距或内边距

综合代码实现

颜色赋值

三原色: 红绿蓝 RGB RedGreenBlue , 每个颜色的取值范围0-255
五种颜色赋值方式:
- 颜色单词赋值: red/pink/yellow/green....
- 6位16进制赋值: #ff0000
- 3位16进制赋值: #f00
- 3位10进制赋值: rgb(255,0,0)
- 4位10进制赋值: rgba(255,0,0,0-1) a=alpha 代表透明度值越小越透明

背景图片

background-image:url("路径"); 设置背景图片
background-size:200px 300px;设置背景图片的尺寸
background-repeat:no-repeat; 禁止重复
background-position: 横向偏移值纵向偏移值; 设置背景图片的位置

文本和字体相关样式

text-align:left/right/center; 设置水平对齐方式
text-decoration:overline/underline/line-through/none; 文本修饰
line-height:20px; 设置行高
text-shadow:颜色 x偏移值 y偏移值模糊度; 设置文本阴影
font-size:20px; 设置字体大小
color:red; 设置字体颜色
font-weight:normal/bold; 设置加粗和去掉加粗
font-style:italic; 设置斜体
font-family:xxx,xxx,xxx,xxx;设置字体
font: 20px xxx,xxx,xxx; 设置字体大小+字体

元素的显示方式display

block: 块级元素, 特点: 独占一行,可以修改元素宽高, 包括: div,p,h1-h6
inline: 行内元素, 特点: 共占一行,不能修改元素宽高, 包括: span,a,b,i,u,s
inline-block:行内块元素,特点: 共占一行,可以修改元素宽高, 包括: input,img
none: 隐藏元素

display: inline-block;

display: none;

如果行内元素需要修改宽高,可以将显示方式改成块级元素或行内块元素

盒子模型

盒子模型 = content内容+margin外边距+border边框+padding内边距
作用:控制元素的显示效果
- content内容:控制元素的显示尺寸
- margin外边距: 控制元素的显示位置
- border边框: 控制边框效果
- padding内边距: 控制元素内容的位置

盒子模型之content内容

包含width和height , 通过这两个样式设置元素的显示尺寸
赋值方式:
- 像素
- 上级元素的百分比
行内元素不能直接修改宽高,如果需要修改宽高,可以将显示方式改成块级元素或行内块元素

盒子模型之margin外边距

作用:控制元素的显示位置
元素距上级元素或相邻兄弟元素的距离称为外边距
赋值方式:
- margin-left/right/top/bottom:10px; 单独某一个方向赋值
- margin:50px; 四个方向赋值
- margin:10px 20px; 上下10 左右20 , 居中: 0 auto
- margin:10px 20px 30px 40px; 上右下左顺时针赋值
行内元素上下外边距无效
上下相邻彼此添加外边距取最大值, 左右相邻两个值相加
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决

盒子模型之border边框

赋值方式:
border:粗细样式颜色; 四个方向添加边框
border-left/right/top/bottom:粗细样式颜色; 单独某个方向添加边框

下图是边框的样式

圆角: border-radius:20px; 值越大越圆, 超过宽高的一半为正圆

盒子模型之padding内边距

作用: 控制元素内容的位置
赋值方式:(和外边距类似)
- padding-left/right/top/bottom:10px:单独某个方向赋值
- padding:10px; 四个方向赋值
- padding:10px 20px; 上下10 左右20
- padding:10px 20px 30px 40px; 上右下左顺时针赋值
默认情况下给元素添加内边距会影响元素的宽高, 添加以下样式后则不再影响

box-sizing:border-box;

部分标签自带外边距或内边距

外边距: body自带四个方向的外边距 , h1-h6自带上下外边距, p标签自带上下外边距, 列表标签自带上下外边距
内边距: 列表标签自带内边距

综合代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body>div{
            width: 611px;
            height: 376px;
            background-color: #e8e8e8;
            background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
            background-repeat: no-repeat;
            background-size: 318px 319px;
            background-position: 90% 80%;
            overflow: hidden;

        }
        div>div{
             width: 245px;
             height: 232px;
             margin: 68px 0 0 36px;
         }
        .title_p{
            font-size: 32px;
            color: #333;
            margin-bottom: 12px;
        }
        .intro_p{
            color: #666;
            font-size: 12px;
        }
        .price_p{
            font-size: 24px;
            color: #0aa1ed;
            font-weight: bold;
            margin-bottom: 12px;
        }

        a{
            background-color: #0aa1ed;
            width: 132px;height: 40px;display: block;
            text-align: center; line-height: 40px;
            color: white;font-size: 20px;
            text-decoration: none; border-radius: 3px;
        }


    </style>
</head>
<body>
<div>
    <div>
    <p class="title_p">灵越 燃7000系列</p>
    <p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
        英特尔HD显卡620含共享显卡内存</p>
    <p class="price_p">￥4999.00</p>
    <a href="">查看详情</a>
    </div>
</div>
</body>
</html>

结果输出：