【CSS】基础（二）

最新推荐文章于 2024-07-25 10:45:42 发布

Listener-1379

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量105

点赞数

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

本文链接：https://blog.csdn.net/weixin_45965358/article/details/118685661

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.盒模型

1.1盒模型概述

在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

CSS 中定义盒子模型类型属性 box-sizing : content-box | border-box

content-box : 内容盒，设置的width,height属性为内容的宽和高

border-box : 边框盒，设置的width,height属性为边框以内相关盒子属性的宽和高（content + padding + border）

1.2盒模型的宽高

在这里插入图片描述

标准盒模型：content | width | height + border + padding + margin

在这里插入图片描述
IE盒模型：width | height (content + padding + border) + margin

1.3 元素宽高

（1）左右留白，网站左侧的内容是固定不变的，右侧的内容甩出来的空白不一样，所以我们可以设置一个宽度，只设置左边的内边框，右边空白区域自动补齐。

（2）在实际工作当中，我们不会设置高度，而是利用内部内容的来撑开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box</title>
    <style type="text/css">
        .city {
            width: 20px;
            height: 30px;
            padding: 10px;
            border: 50px solid red;
        }
    </style>
</head>
<body>
    <div class="city">
        shenzhen is a beautiful city
    </div>
</body>
</html>

在这里插入图片描述

2.margin

2.1 margin初步

同级元素之间的距离，或者距离父元素之间的距离。

margin设置分类：

单值法 margin: 10px; 设置盒子的上下左右的外边距都为10个像素
二值法 margin: 10px 20px; 设置盒子的上下边距为10px,左右为20px
三值法 margin: 10px 20px 30px; 设置盒子的上边距为10px,左右边距为20px,下边距为30px
四值法 margin: 10px 20px 30px 40px; 设置盒子从上边距开始，按照顺时针方向分别设置各个方向的外边距

按照方向分类：

margin-top: 设置上外边距
margin-bottom: 设置下外边距
margin-left: 设置左外边距
marhin-right: 设置右外边距

margin的取值：

length : 以固定值为外边距。
percentage : 相对于包含块的宽度，以百分比值为外边距。
auto ：让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。

2.2.margin塌陷

2.2.1兄弟元素之间的塌陷

同级的元素分别设置了上下边距，两个盒子之间的上下外边距会产生合并（塌陷），之间的距离以设置的 margin-bottom(上面盒子)，margin-top(下面盒子)中较大的值为准。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin塌陷</title>
    <style type="text/css">
        .box1,
        .box2 {
            width: 50px;
            height: 50px;
            background-color: wheat;
        }
        .box1 {
            margin-bottom: 30px; /*上下两个元素之间的距离为40px */
            /*margin-bottom: 40px; 则上下两个元素之间的距离为40px */
            /*margin-bottom: 50px; 则上下两个元素之间的距离为50px */
        }
        .box2 {
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
</body>
</html>

在这里插入图片描述

2.2.2 父子代元素之间的塌陷

在这里插入图片描述

子元素设置了上边距，会传递给父元素
父元素设置了上边距，会与子元素合并（合并的时候，以大的为准）
后代元素会一直传递到body
父元素的上边距和后代元素的上边距合并，保留大的

2.2.3 左右边距不会合并

3.border

3.1 border的基本设置

（1）根据方向设置

border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框

（2）按照属性类型

border-style: 设置边框的线条形式【solid(实线) ，dashed(虚线)， dotted(点线)，double(双实线)】
border-width: 设置边框的厚度【像素值，thick（粗线），thin(细线)，medium(中等线宽)】
border-color: 边框颜色【transparent(透明的)】

（3）简写方式
border: style width color

3.2 border的组合设置

border-top-style border-top-width border-top-color
border-bottom-style border-bottom-width border-bottom-color
border-right-style border-right-width border-right-color
border-left-style border-left-width border-right-color

4.padding

与margin类似。

margin和padding都可以使用百分比表示，参照的都是父元素。

5.标准文档流

5.1 标准文档流

类似于我们的word文档一样，书写的内容要在光标所在的位置。光标受前面元素的影响，前面字体变大了，则光标也会改变。

word是标准文档流：书写的时候从上而下，从左到右。

网页制作的时候，web也是标准文档流。

5.2 标准文档流的特征

文本类的内容有空白折叠现象
文本类的内容高矮不齐，底边对齐（baseline基线）
文本类的内容如果超过盒子宽度就会自动换行

5.3 标签的分类

标准文档流将标签分为块级和行内级。

块级：所有容器级都是块级。p标签是块级。

行内级：所有除p标签外的所有文本级的标签都是行内级。

5.4 块级元素

可以设置宽高，具有换行符。
容器默认独占一行
如果设置了宽高，那么容器的大小就是宽高（但是还是具有换行效果），否则容器会自动撑满父级（100%）。
非块级元素设置成块级： display: block
p div h1~h6

5.5 行内级元素

不可以设置宽高，和其他行内级元素一样依次在同一行内从左到右依次展开。
容器默认包裹内容，宽度由内容撑开。
行内元素设置的margin，padding上下不生效（不占位置，但背景颜色能呈现）,左右生效。
非行内元素设置成行内元素： display: inline
span a time label

5.6 行内块元素

性质：

可以设置宽高，和其他行内级元素一样依次在同一行内从左到右依次展开。
容器默认包裹内容，如果设置了宽高，那么容器的范围就是设置宽高的大小。此时上下margin和上下padding会挤占空间。
非行内块元素设置成行内块元素： display: inline-block
img textarea input

5.7 隐藏元素

display: none 设置元素消失不占位
visibility: hidden 设置元素消失占位
opacity: 0 设置元素的不透明度为0,元素消失占位

5.8 居中

5.8.1 文本居中

单行文本在盒子中垂直居中。
多行文本居中。盒子不给高度，盒子高度使用padding挤出来。

借用一张图片：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行文本</title>
    <style type="text/css">
        .single-text-align {
            width: 200px;
            height: 200px;
            border: solid 1px red;
            /* 水平方向 */
            text-align: center;
            /* 垂直方向 让行高和高度一致*/
            line-height: 200px;
        }
        .multiline-text-align {
            width: 200px;
            border: solid 1px red;
            margin-top: 20px;
            /* 水平方向 */
            text-align: center;
            /* 垂直方向 */
            line-height: 30px;
            padding: 90px 0;
        }
    </style>
</head>
<body>
    <div class="single-text-align">
        Hello CSS
    </div>
    <div class="multiline-text-align">
        Hello
        <br/>
        World
    </div>
</body>
</html>

在这里插入图片描述

5.8.2 盒子居中

行内元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内元素</title>
    <style type="text/css">
        .container {
            width: 100px;
            height: 100px;
            margin: 20px;
            border: solid 5px red;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 行内元素 -->
        <span>Hello World</span>
    </div>
</body>
</html>

在这里插入图片描述
块元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素居中</title>
    <style type="text/css">
        .container {
            width: 100px;
            margin: 20px;
            border: solid 5px red;
            /* 垂直居中 */
            padding: 30px;
        }
        .class2 {
            width: 50px;
            height: 50px;
            background-color: green;
            /* 水平居中 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="class2">hello World</div>
    </div>
</body>
</html>

在这里插入图片描述
行内块元素：

vertical-align的值：

baseline 默认。元素放置在父元素的基线上。
middle 把此元素放置在父元素的中部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块元素居中</title>
    <style type="text/css">
        .container {
            width: 200px;
            height: 200px;
            margin: 20px;
            border: solid 5px red;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 200px;
        }
        img {
            width: 120px;
            height: 80px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="../../image/rightarrow.png" alt="行内块元素"/>
    </div>
</body>
</html>

在这里插入图片描述

作者：Beyong　　　　
出处：Beyong博客
github地址：https://github.com/beyong2019

本博客中未标明转载的文章归作者Beyong有，欢迎转载，但未经作者同意必须保留此段声明，且在文章明显位置给出原文连接，否则保留追究法律责任的权利。

Listener-1379

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【CSS】基础（二）

文章目录1.盒模型1.1盒模型概述1.2盒模型的宽高1.3 元素宽高2.margin2.1 margin初步2.2.margin塌陷2.2.1兄弟元素之间的塌陷2.2.2 父子代元素之间的塌陷2.2.3 左右边距不会合并3.border3.1 border的基本设置3.2 border的组合设置4.padding5.标准文档流5.1 标准文档流5.2 标准文档流的特征5.3 标签的分类5.4 块级元素5.5 行内级元素5.6 行内块元素1.盒模型1.1盒模型概述Margin(外边距) - 清除边框
复制链接

扫一扫