前端基础之CSS_2

最新推荐文章于 2024-08-23 16:53:34 发布

Python之眼

最新推荐文章于 2024-08-23 16:53:34 发布

阅读量140

点赞数

分类专栏： Python_前端文章标签：程序员 python 新手入门

本文链接：https://blog.csdn.net/weixin_42625143/article/details/97388791

版权

本文详细介绍了CSS的基础知识，包括盒子模型、浮动、清除浮动、溢出处理和定位。讲解了margin、padding、border、content的使用，浮动的原理和方式，清除浮动的三种方法，以及overflow属性的应用。此外，还讨论了定位中的相对定位、绝对定位和固定定位，以及z-index在模态框中的作用。最后提到了rgba和opacity的区别，并分享了一个简单的网页页面搭建示例。

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

阅读目录

摘要

盒子模型
浮动
清除
溢出
定位
模态框
rgba 与 opacity透明区别

一、CCS盒子模型

margin：标签与标签之间的距离，主要用于控制标签周围间的间隔，从视觉上达到相互分开的目的。
padding：标签内内容与标签边框之间的距离。
border：边框的意思，每个标签都会有一个区域，这个区域边缘就是标签的边框。
content：盒子的内容，也就是每个标签的内容，显示文本和图像。
具体使用过程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
</head>
<style>
    body {
   
        margin: 0;
    }
    .c1 {
   
        border: black 1px solid;
        width: 100px;
        height: 100px;
        margin-left: 50px;
        margin-top: 25px;
        background-color: tomato;
    }
    .c2 {
   
        border: black 1px solid;
        width: 100px;
        height: 100px;
        margin-top: 25px;
        margin-left: 50px;
        background-color: blue;
    }
    .c3 {
   
    border: black 1px solid;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    margin-top: 20px;
    background-color: greenyellow;
    }
</style>
<body>
<div class="c1">
    <div class="c3"></div>
</div>
<div class="c2"></div>
</body>
</html>

标签与标签之间的margin是相对的，它的上下左右有时候只能有2处可以确定，另外2边由于没有参照不会有间隔，所以使用时候一般不会全部上下左右都写上。要表示那一边就写上那一边。

padding；使用方法与margin相同，相比margin有些不同：

div {
   
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

可以简写：padding: 10px 20px 30px 40px

顺序：上右下左

padding的常用简写方式有：

提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

需要注意：有一些标签自带一个或者多个属性对应值，比如p标签在创建的时候就初始自带margin-top:16px和margin-bottom:16px，ul标签自带margin-left:40px

二、浮动（只要涉及到页面布局，都会用到浮动）：

顾名思义，就是让标签浮动起来，任何标签都能浮动，浮动后的标签会变成一个块级框。
浮动规律：
1:浮动框可以向左向右移动，知道它的外边缘碰到包含框或另一个浮动的边框为止。
2:浮动框不在文档流中，所以它已经脱离文档流，也就是说，浮动下面的文档流式无视浮动框的位置的。
浮动的三种方式：

float: left;      /*以左边缘为参考浮动*/
float: right;    /*以右边缘为参考浮动*/
float: none;    /*默认值，不浮动*/

--------------------------------------------------------------------
	注：如果你对python感兴趣，我这有个学习Python基地，里面有很多学习资料，感兴趣的+Q群：895817687
--------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .c1 {
   
            width: 80px;
            height: 300px;
            background-color: red;
            float: left;
        }
        .c2 {
   
            width: 80px;
            height: 300px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>
</html>

在这里插入图片描述

 浮动的时候，如果是2个div占用一行，可以将宽度width用百分比的形式设置，填充一整行。

　　<style>
        .c1 {
   
            width: 20%;
            height: 300px;
            background-color: red;
            float: left;
        }
        .c2 {
   
            width: 80%;
            height: 300px;
            background-color: blue;
            float: left;
        }
    </style>

在这里插入图片描述
三、清除 clear属性规定标签的那一侧不允许其他浮动标签

注意：clear属性只会对自身起作用，不会影响其他标签。
清除浮动：浮动虽然好用，但是也有缺点（会导致父标签塌陷问题，可以用清除属性来解决）
清除浮动副作用的三种方法：

1:固定高度
2:伪元素清除(使用较多）
3:overflow : hidden
伪元素清除法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>影响</title>
</head>
<style>
    body {
   margin: 0;
        }
    .clearfix:after {
   
        content: '';
        clear: both;
        display: block;
    }
    .c1 {
   
        border: 4px black solid;
        }
    .c2 {
   
        width: 100px;
        height: 100px;
        float: left;
        background-color: aquamarine;
    }
    .c3 {
   
        width: 100px;
        height: 100px;
        float: left;
        background-color: green;
    }
    .c4 {
   
        background-color: red

最低0.47元/天解锁文章

Python之眼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础之CSS_2

阅读目录摘要盒子模型浮动清除溢出定位模态框rgba 与 opacity透明区别一、CCS盒子模型margin：标签与标签之间的距离，主要用于控制标签周围间的间隔，从视觉上达到相互分开的目的。padding：标签内内容与标签边框之间的距离。border：边框的意思，每个标签都会有一个区域，这个区域边缘就是标签的边框。content：盒子的内容，也就是每个标签的内容，显...
复制链接

扫一扫

专栏目录