CSS03

最新推荐文章于 2024-07-23 14:07:14 发布

苏豆

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量223

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45842339/article/details/115337676

版权

文章目录

学习目标

盒子模型的4个组成部分
利用边框复合写法给元素添加边框
计算盒子的实际大小
给盒子设置圆角边框
给盒子添加阴影
给文字添加阴影

页面学习三大核心

盒子模型
浮动
定位

盒子模型

CSS 盒子模型本质上是一个封装周围 HTML元素（边框、内外边距和实际内容）的盒子
组成部分

属性	含义
border	边框
content	内容
padding	内边距
margin	外边距

边框

border属性设置元素的边框
组成部分
- 边框宽度（粗细）
- 边框样式
- 边框颜色
属性及其作用

属性	作用
border-width	定义边框粗细，单位是px
border-style	定义边框样式
border-color	定义边框颜色

案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        div {
            width: 400px;
            height: 300px;
            border-width: 5px;
            /* solid 实现边框；dashed 虚线边框；dotted 点线边框 */
            border-style: solid;
            border-color: skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图

边框的复合写法

书写顺序是：边框粗细、边框样式、边框颜色
案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框复合写法</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 2px solid skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图

在这里插入图片描述

边框的分开写法

为了单独控制某个边框的属性
案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框分开写法</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* 上边框 */
            border-top: 2px solid skyblue;
            /* 右边框 */
            border-right: 4px dashed red;
            /* 下边框 */
            border-bottom: 8px dotted green;
            /* 左边框 */
            border-left: 16px solid skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图

在这里插入图片描述

边框的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式，其控制相邻单元格的边框
语法

boder-collapse: collapse;

collapse 表示合并
boder-collapse: collapse; 表示相邻边框合并在一起
案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格属性</title>
</head>
<body>
    <table align="center" border="1" cellpadding="2" cellspacing="0" width="500" height="250">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张起灵</td>

最低0.47元/天解锁文章

苏豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS03

文章目录学习目标页面学习三大核心盒子模型边框边框的复合写法边框的分开写法边框的细线边框边框影响盒子实际大小内边距padding内边距复合写法外边距外边距的典型应用行内元素或行内块元素水平居中外边距合并清除内外边距圆角边框盒子阴影文字阴影学习目标盒子模型的4个组成部分利用边框复合写法给元素添加边框计算盒子的实际大小给盒子设置圆角边框给盒子添加阴影给文字添加阴影页面学习三大核心盒子模型浮动定位盒子模型CSS 盒子模型本质上是一个封装周围 HTML元素（边框、内外边距和实际内
复制链接

扫一扫

专栏目录