CSS提升

最新推荐文章于 2024-01-24 10:00:00 发布

预备程序员小T

最新推荐文章于 2024-01-24 10:00:00 发布

阅读量317

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/m0_70637322/article/details/124916971

版权

目录一、盒子模型1. 盒子模型简介2. 边框及其复合样式3. 内边距及其复合样式4. 内边距及其复合样式5. 外边距（大块包小块）二、CSS浮动三、CSS定位四、重叠样式一、盒子模型1.盒子模型简介CSS盒子模型本质上是一个盒子，封装周围的HTML元素，由外边距（margin），边框（border），内边距（padding）和内容（context）四部分组成<!DOCTYPE html><html lang=.

摘要由CSDN通过智能技术生成

一、盒子模型

1. 盒子模型简介

2. 边框及其复合样式

3. 内边距及其复合样式

4. 内边距及其复合样式

5. 外边距（大块包小块）

二、CSS浮动

1.CSS浮动简介

2.浮动样式

3.浮动的特点

4.解决高度坍塌的办法

三、CSS定位

1.CSS定位介绍

2.relative 相对定位

3.absolute 绝对定位

4.fixed 固定定位

5.定位层级

四、重叠样式

一、盒子模型

1.盒子模型简介

所有的HTML元素可以看做盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，由外边距（margin），边框（border），内边距（padding）和内容（context）四部分组成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #box1{width: 150px;height: 200px;border:5px solid #cc847a; }
        #box2{width: 100px;height: 150px;border:1px solid gray;background-color: pink }

        /*
        边框(border)
        内边距(padding)：边框与内容之间的距离（父级边框与子级的距离也称之内边距）
        外边距(margin)：块与块之间的距离（子级与父级边框的距离也称之外边距）
        内容(context:)

        盒子的大小：边框+内边距+内容（文字、标签）

        */


    </style>
</head>
<body>

<div id="box1">
<!--    内容-->
    <div id="box2">

    </div>

</div>
</body>
</html>

2.边框及其复合样式

边框样式包括：

复合样式（border），边框颜色（border），边框宽度（border-width），边框样式（border-style），左边框（border-left），右边框（border-right），上边框（border-top）和下边框（border-bottom）。

其中边框的样式有：solid（实线），dashed（虚线），dotted（点线）和double（双实线）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框(border) 、复合样式</title>
    <style>
        /*html{border: 1px solid green;}*/
        body{height: 600px;
        /*复合样式书写边框
        边框的样式：solid（实线）,dashed(虚线) dotted（点线） double(双实线)
        */
            border: 1px double green;
        }

        div{width: 400px;height: 400px;
            /*边框单个拆分书写*/
            /*边框的厚度*/
            /*border-width: 3px;   !*只写厚度不展示任何边框样式*!*/
            /*边框样式*/
            /*border-style:solid ;   !*默认继承字体颜色*!*/
            /*边框颜色*/
            /*border-color: orange;*/

            /*边框弧度*/
            /*左上角顺时针一直到左下角设置弧度*/
            /*border-radius: 50%;*/
            /*左上角和右下角，右上角和左下角*/
            /*border-radius: 25px 15px;*/
            /*左上角 、右上角和左下角、右下角*/
            /*border-radius: 35px 15px 5px;*/

            /*左上角顺时针一直到左下角设置弧度*/
            /*border-radiu

最低0.47元/天解锁文章

预备程序员小T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS提升

目录一、盒子模型1. 盒子模型简介2. 边框及其复合样式3. 内边距及其复合样式4. 内边距及其复合样式5. 外边距（大块包小块）二、CSS浮动三、CSS定位四、重叠样式一、盒子模型1.盒子模型简介CSS盒子模型本质上是一个盒子，封装周围的HTML元素，由外边距（margin），边框（border），内边距（padding）和内容（context）四部分组成<!DOCTYPE html><html lang=.
复制链接

扫一扫