CSS基础3（盒子模型、浮动、定位）

最新推荐文章于 2022-12-07 22:58:38 发布

Tigirs

最新推荐文章于 2022-12-07 22:58:38 发布

阅读量497

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_45677119/article/details/104055796

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS语言基础

盒子模型

概述：所有HTML元素都可以看作盒子，在CSS中，盒子模型是用来设计和布局时使用。它就像是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容，我们在其它元素和周围元素边框之间的空间放置元素。
盒子的组件：
Margin(外边距) : 清除边框外的区域，外边距是透明的。
Border(边框) : 围绕在内边距和内容外的边框。
Padding(内边距) : 清除内容周围的区域，内边距是透明的。
Content(内容) : 盒子的内容，显示文本和图像。
在网页的元素的实际大小：
每一个元素都会在页面上生成一个盒子，HTML页面实际上就是由一堆盒子组成的。

/*盒子模型：25px 内间距，25px 外间距、25px 绿色边框*/
div {
    width: 300px;
    border: 25px solid green; 
    padding: 25px;
    margin: 25px;
}

在这里插入图片描述
一个元素的实际宽高：
宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

设计边距：

/*外边距*/
margin: 10px 20px 30px 40px;/*四个值:上边距是10px,右边距是20px,下边距是30px,左边距是40px*/
margin: 10px 20px 30px;     /*三个值:上边距是10px,左右边距是20px,下边距是30px*/
margin: 10px 20px;          /*两个值:上下边距是10px,左右边距是20px*/
margin: 10px;               /*一个值:四个边距都是10px*/
margin: 0 auto;             /*外边距的妙用：居中元素*/
/*边框*/
border: 25px solid green    /*参数:粗细 边框样式(实虚线) 颜色*/
/*内边距*/
padding: 10px 20px 30px 40px; /*和margin属性一样,但没有auto参数*/

圆角（border-radius）

/*设置一个值,即边框的四个角弧度一样大,数值越大弧度越大*/
/*四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
  三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            border-radius: 20px;
            background: blue;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
<p></p>
</body>
</html>

结果：
在这里插入图片描述

盒子阴影：

box-shadow: 10px 10px 5px 20px #888888; /*第一二的值都是必需的:分别是水平阴影和垂直阴影的位置。*/
                                        /*第三个值:模糊距离,数值越大越模糊*/
                                        /*第四个值:阴影的大小*/
                                        /*第五个值:阴影颜色*/

结果：
在这里插入图片描述

浮动

标准文档流：
了解浮动之前我们先了解一下标准文档流，当我们的HTML页面被浏览器打开时，浏览器首先会对页面进行解析，读取HTML页面的所有内容，之后将内容显示在浏览器的页面，在默认的情况下，显示的内容会按照标准的排版模式进行布局，浏览器会根据的读取标签的先后顺序来排序HTML元素，按照从左到右，从上到下的顺序进行排列。
块级元素和行内元素：

块级元素：独占一行（h1~h6 p div 列表…）
行内元素：不独占一行（span a img strong…）
内嵌：块级元素可以包含行内元素；但行内元素不能包含块级元素，只能包含文本或者其他行内元素

概述：会使元素向左或向右移动，其周围的元素也会重新排列；往往是用于图像，但它在布局时一样非常有用。
display属性：
规定元素应该生成的框的类型

display:inline;/*默认的值,此元素会被显示为内联元素,元素前后没有换行符,即两个元素在同一行*/
display:block; /*此元素将显示为块级元素,此元素前后会带有换行符*/
display:none;  /*隐藏HTML元素,该元素不会被显示*/

盒子浮动

float属性：

/*表示文本或图像移动到父级元素的左右侧*/
float:none|left|right; /*默认值,不浮动 | 向左浮动 | 向右浮动*/

右浮动演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        img
        {
            float:right;
        }
    </style>
</head>
<body>
<p>
    <img src="images/4.jpg" width="200" height="84" />
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>

结果：
在这里插入图片描述

父级边框塌陷

产生的原因：
一个盒子使用了CSS float属性，导致父级盒子不能被撑开，由此产生塌陷；例如左边盒子使用左浮动，右边元素使用右浮动，两个盒子被包在另一个盒子中，由于两个盒子均使用浮动导致外部盒子不能被撑开。
塌陷的产生的影响：
背景图片不能显示、边框不能被撑开、margin padding设置值不能正确显示
解决方法：

1、增加父级元素的高度

#father {
    height: 800px;
}

2、增加一个空的div标签，清除浮动

<div class="clear"></div>
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3、overflow: hidden

#father {
    overflow: hidden;
}

4、父类添加一个伪类：after

#father:after{
    content: '';
    display: block;
    clear: both;
}

演示塌陷及处理：向一个父级盒子插入三张图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
    <div id="father">
        <div class="layer01"><img src="images/5.jpg" alt=""/></div>
        <div class="layer02"><img src="images/6.jpg" alt=""/></div>
        <div class="layer03"><img src="images/4.jpg" alt=""/></div>
    </div>
</div>
</body>
</html>

div {
    margin:10px;
    padding:5px;
}
#father{
    border:1px #000 solid;
}
#father:after{
    content:"";
    clear: both;
    display: block;
}
.layer01 {
    border:1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02 {
    border:1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer03 {
    border:1px #060 dashed;
    display: inline-block;
    float: right;
}

没处理塌陷之前：所有子元素浮动在父级边框外
在这里插入图片描述
添加伪类处理塌陷：所有元素内嵌在父级边框内

display属性：方向不可以控制
float属性：浮动起来的话会脱离标准文档流，需要解决父级边框塌陷的问题。

定位

相对定位：
将标签从自己原来的位置移动到一个相对的位置，移动的方向一定是相对于自己原来的位置；
比如 left 100px，是将元素向右移动100px，但是移动前的位置相对于移动后的位置是在左边。

position: relative;
right|left|bottom|top|: 移动的值 可以为负值

绝对定位：将标签放置到绝对坐标位置，与文档流无关，不占用空间，可以浮在网页上

position: absolute;

固定定位：生成绝对定位的元素，相对于浏览器窗口进行定位，即使窗口是滚动的它也不会移动

position: fixed;

页面顶部的粉色条为固定定位，当滚动页面时它不会移动；随页面的移动而移动的方块为绝对定位
在这里插入图片描述

堆叠顺序

z-index: 数值 (可以为负值)  /*默认是0，最高无限*/

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
在这里插入图片描述

背景透明度

opacity: 0.5; /*从 0.0 (完全透明) 到 1.0 (完全不透明)*/

演示堆叠和透明度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        img
        {
            position:absolute;
            left:0px;
            top:0px;
            z-index:-1;
            opacity: 0.5;
        }
    </style>
</head>

<body>
<h1>这是一个标题</h1>
<img src="images/4.jpg" width="200" height="110" />
<p>标题下的一段文字，in-index 值为 -1</p>
</body>
</html>

结果：没加透明度之前
在这里插入图片描述
结果：加透明度

//下篇再见…谢谢

Tigirs

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
CSS基础3（盒子模型、浮动、定位）

CSS语言基础盒子模型概述：所有HTML元素都可以看作盒子，在CSS中，盒子模型是用来设计和布局时使用。它就像是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容，我们在其它元素和周围元素边框之间的空间放置元素。组件：/*盒子模型：25px 内间距，25px 外间距、25px 绿色边框*/div { width: 300px; border: 2...
复制链接

扫一扫

专栏目录