学习JAVA之前端知识学习DAY003

最新推荐文章于 2024-09-16 20:12:46 发布

放在糖果旁的是我很想回忆的甜

最新推荐文章于 2024-09-16 20:12:46 发布

阅读量203

点赞数 4

分类专栏： HTML+CSS的学习呀文章标签：学习 html css 马力前端

本文链接：https://blog.csdn.net/qihaojinqiuma/article/details/126807365

版权

HTML+CSS的学习呀专栏收录该内容

5 篇文章 1 订阅

订阅专栏

div标签

<!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>Document</title>
    <style>
        div{
            /* 
            div标签是一个块级元素，块级元素可以设置高度和宽度

            行内元素设置高度和宽度没有效果
            */
            border: 1px solid red;
            width: 200px;
            height: 200px;
        }
        a{
            border: 1px solid #00f;
            font-size: 30px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>我是div标签1</div>
    <div>我是div标签2</div>
    <a href="#">123</a>
</body>
</html>

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            /* border-style属性：边框类型属性，设置标签的边框类型，常用值有soild(实线) dash(虚线)  dotted(点线) double(双线) */

            /* border-style: solid 盒子4条边的类型都为soild */
            /* border-style: solid; */

            /* border-style：dashed soild 盒子上下边框类型为dashed，左右边框类型soild */
            /* border-style: dashed solid; */

            /* 上右下左 */
            /* border-style：dashed soild 盒子上边框类型为dashed，左右边框类型soild 下边框类型为dotted*/
            /* border-style:dashed solid dotted */

            /* border-style：dashed soild 盒子上边框类型为dashed，右边框类型soild 下边框类型为dotted 左边框类型为double*/
            border-style:dashed solid dotted double;

            /* 一条边一条边的设置边框类型 */
            /* border-top-style: dashed;
            border-right-style: solid;
            border-bottom-style: dotted;
            border-left-style: double; */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

盒子模型边框粗细

border-width
   thin
   medium
   thick
   像素值

<!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>Document</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            border-style: solid;
            /* border-width: 10px; */
            /* border-width: 10px 20px; */
            /* border-width: 10px 5px 20px; */
            /* border-width: 10px 5px 20px 15px;*/

            border-top-width: 10px;
            border-right-width: 5px;
            border-bottom-width: 20px;
            border-left-width: 15px;

        }
    </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>Document</title>
    <style>
        p{
            width: 500px;
            height: 100px;
            border-style: solid;

            /* border-color  盒子的四条边框的颜色都为一样的颜色 */
            /* border-color: #f00; */
            /* 盒子上下边框颜色为red，左右边框颜色为绿色 */
            /* border-color: red green; */

            /* 盒子上边框颜色为red，左右边框颜色为green  下边框颜色为blue*/
            /* border-color: red green blue; */

            /* 盒子上边框颜色为red，右边框颜色为green  下边框颜色为blue 左边框颜色为yellow*/
            /* border-color: red green blue yellow; */

            /* 我们可以单独一条边一条边的进行设置 */
            border-right-color: red;
            border-left-color: #000;
            border-bottom-color: blue;
            border-top-color: green;
        }
    </style>
</head>
<body>
    <p></p>
</body>
</html>

盒子模型边框样式

border-style
   none
   hidden
   dotted（点线）
   dashed（虚线）
   solid（实线）
   double（双线）

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border-top: 5px solid red;
            border-right: 1px dotted green;
            border-bottom: 10px dashed blue;
            border-left: 5px double yellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

border简写

同时设置边框的颜色、粗细和样式

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>