前端-css-03

最新推荐文章于 2024-06-20 18:30:00 发布

欧冶渃

最新推荐文章于 2024-06-20 18:30:00 发布

阅读量813

点赞数 7

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

本文链接：https://blog.csdn.net/weixin_59868842/article/details/137221456

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.盒子模型

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .item {
            width: 400px;
            padding: 20px;
            margin: 30px;
            background: #ccc;
            border: 4px dashed #900;
        }
    </style>
</head>
<body>
    <div class="item">
        仃可厅终不见定的用台力，也朗太五没，呼救承我的六应设仓孔竟次办了好变非设，自者后韩以生，说羊后只惜病承和了也，导貂那九土别说，负侯原诗本太化意之者已魂的其归变，奔气都其天到，朗司脱有郭丹子韩新首天死，斯君联求骂订久韩这为升出得，下不家耳量衣法通为，憾的视。
    </div>

    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium ad in ex architecto ipsa quibusdam, dolorum adipisci eligendi modi possimus delectus? Nobis dolores a consequatur tempora quis nam expedita accusantium!</div>
</body>
</html>

内容（content）：内容是元素的核心区域，元素中的文本内容和后代元素都显示在内容上。

内边距（padding）：内容与元素边界的距离。

边框（border）：位于元素的边界上。

外边距（margin）：在元素边界之外，是与相邻元素的距离。

1.1盒子模型的相关概念

1. 将元素比作成一个盒子
2. 页面布局就是盒子的排列和堆砌

1.2影响盒子大小的因素

盒子的总宽度 = 内容宽度 + 左右内边距 + 左右边框
盒子的总高度 = 内容高度 + 上下内边距 + 上下边框

1.3盒子中的内容区域

设置内容区域的宽高的 CSS 属性

CSS 属性名	功能	属性值
width	宽度	长度
max-width	最大宽度	长度
min-width	最小宽度	长度
height	高度	长度
max-height	最大高度	长度
min-height	最小高度	长度

1.4元素的默认宽高

默认总宽度 = 父元素内容宽度 - 自身的左右外边距
默认内容宽度 = 父元素内容宽度 - 自身的左右外边距 - 自身的左右内边距 - 自身的左右边框

1.4.1行内元素：

默认宽度被内容撑开，没有内容就没有宽度
默认高度被内容撑开，没有内容也会有一个文字的高度

1.4.2行内块元素：

默认宽度被内容撑开，没有内容就没有宽度
默认高度被内容撑开，没有内容就没有高度

块级元素：

默认宽度被内容撑开，没有内容就没有高度

1.5盒子的内边距 padding

1.5.1padding 设置规则

1. 不能是负值
2. 使用百分比，上下左右内边距都参照父元素内容宽度

padding 复合属性的设置规则：

/* 1个值: 上下左右 */
padding: 20px;
/* 2个值： 上下 左右*/
padding: 40px 30px;
/* 3个值： 上 左右 下*/
padding: 10px 20px 30px;
/* 4个值： 上 右 下 左*/
padding: 15px 25px 35px 45px;

1.5.2不同显示模式的元素设置内边距：

1. 块级元素、行内块元素内边距可以完美设置
2. 行内元素，左右内边距可以完美设置，上下内边距效果不完美

1.6边框 border

CSS 属性名	功能	属性值
border-style	边框风格	none：无风格。 solid：实线。 dashed：虚线。 dotted：点线。 double：双实线。
border-color	边框颜色	颜色，默认值是文字颜色
border-width	边框宽度	长度，默认值是3px
border	同时设置风格、颜色、宽度	多个值使用空格分隔
border-left-style border-left-color border-left-width border-left border-right-style border-right-color border-right-width border-right border-top-style border-top-color border-top-width border-top border-bottom-style border-bottom-color border-bottomwidth border-bottom

border的子属性有： border-style、border-color、border-width

border-left 的子属性： bordre-left-style、border-left-color、border-left-width
border-right border-top border-bottom 各种具有子属性

border-style 的子属性： border-left-style、border-right-style、border-top-style、border-bottom-style
border-color、border-width 各种具有子属性

1.7外边距 margin

CSS 属性名	功能	属性值
margin-left	左外边距	长度
margin-right	右外边距	长度
margin-top	上外边距	长度
margin-bottom	下外边距	长度
margin	外边距复合属性	多个值使用空格分隔

1. 外边距是元素与相邻兄弟元素的距离，如果没有相邻兄弟元素就是与父元素内容边界的距离
2. 左外边距和上外边距主要影响自己的位置，右外边距和下外边距主要影响相邻兄弟元素的位置

1.7.1margin 值设置的规则：

1. 使用百分比，上下左右内边距都参照父元素内容宽度
2. 外边距可以是负值
3. 块级元素左右外边距都设置为 auto，该元素在父元素中横向居中

1.7.2margin 复合属性的设置规则：

1个值：上下左右
2个值：上下左右
3个置：上左右下
4个值：上右下左

1.7.3不同显示模式的元素设置外边距：

1. 块级元素、行内块元素外边距可以完美设置
2. 行内元素，只能设置左右外边距，上下外边距设置无效

1.7.4margin 塌陷

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .wrapper {
            width: 800px;
            /* height: 400px; */
            background: #ccc;

            /* 方案一 父元素有边框 */
            /* border: 1px solid #f00; */

            /* 方案二： 父元素有内边距 */
            /* padding: 10px; */

            /* 方案三： 父元素开启BFC */
            /* overflow: hidden; */
        }

        .box {
            /* display: inline-block; */
            margin-left: 100px;
          
            width: 600px;
            text-align: center;
            font-size: 40px;
            line-height: 100px;
            color: #fff;
            background: #900;
        }

        .box01 {
            margin-top: 60px;
        }

        .box02 {
            margin-top: 20px;
        }

        .box03 {
            margin-top: 20px;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, minus!</div>
    <div class="wrapper">
        <div class="box box01">自言惶，死降就，就。</div>
        <div class="box box02">自言惶，死降就，就。</div>
        <div class="box box03">自言惶，死降就，就。</div>
    </div>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, minus!</div>

</body>
</html>

1. 最上面元素的上外边距、最下面元素的下外边距会塌陷到父元素
2. 外边距塌陷只会发生在块级元素上

1.7.4.1 解决 margin 塌陷

方案一：父元素设置边框
方案二：父元素设置内边距
方案三：父元素开启BFC，设置 overflow:hidden;

1.7.5 margin 合并（不用解决）

1. 上面兄弟元素的下外边距会与下面兄弟元素的上外边距合并，两者之间距离取较大的外边距
2. 外边距合并只会发生在块级元素上

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .wrapper {
            padding: 20px;
            width: 600px;
            height: 400px;
            background: #ccc;
        }

        .box {
            /* display: inline-block;
            margin-left: 20px;
            margin-right: 20px; */
            width: 100px;
            height: 100px;
        }

        .box01 {
            margin-bottom: 30px;
            background: #900;
        }

        .box02 {
            margin-top: 40px;
            background: #080;
        }

        .box03 {
            background: #099;
        }


    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box box01"></div>
        <div class="box box02"></div>
        <div class="box box03"></div>
    </div>



   
</body>
</html>

1.8内容溢出

CSS 属性名	功能	属性值
overflow	设置溢出内容的显示方式	visible：显示，默认值。 hidden：隐藏。 scroll：滚动条。 auto：自动。
overflow-x	x轴方向溢出内容的显示方式	visible：显示，默认值。 hidden：隐藏。 scroll：滚动条。 auto：自动。
overflow-y	y轴方向溢出内容的显示方式	visible：显示，默认值。 hidden：隐藏。 scroll：滚动条。 auto：自动。

auto 和 scroll 的区别：

1. scroll 不论内容是否会溢出，都有滚动条
2. auto 只有内容溢出才会显示滚动条

1.9隐藏元素

1. 设置 visibility:hidden; 元素隐藏但是占据位置
2. 设置 display:none; 元素彻底隐藏，不占据位置

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .wrapper {
            padding: 20px;
            width: 600px;
            height: 400px;
            background: #ccc;
        }

        .box {
            width: 300px;
            height: 100px;
        }

        .box01 {
            background: #900;
        }

        .box02 {
            background: #080;

            visibility: hidden;
            /* display: none; */
            /* visibility: visible;
            visibility: hidden;
            display: none; */
        }

        .box03 {
            background: #099;
        }


    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box box01"></div>
        <div class="box box02"></div>
        <div class="box box03"></div>
    </div>



   
</body>
</html>

可以隐藏没有任何内容的div

2.样式继承和自带样式

2.1哪些样式可以被后代元素继承：

1. 字体样式 font-size、font-weight、font-style font-family、font
2. 文字颜色 color
3. 文本样式 letter-spacing、word-spacing、text-decoration、text-indent、text-align、line-height （vertical-align 不可以被继承）

2.2自带样式（用户代理样式）

标题h1~h6 自带 font-size、font-weight、上下外边距
p 自带上下外边距
em 自带 font-style
strong 自带 font-weight
a 自带 color、text-decoration、cursor
ul、ol 自带 padding-left、上下外边距

2.3继承的样式、自带的样式、直接设置的样式
直接设置的样式 > 自带的样式 > 继承的样式

欧冶渃

关注

7
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端-css-03

内容（content）：内容是元素的核心区域，元素中的文本内容和后代元素都显示在内容上。内边距（padding）：内容与元素边界的距离。边框（border）：位于元素的边界上。外边距（margin）：在元素边界之外，是与相邻元素的距离。
复制链接

扫一扫

专栏目录