CSS - 3

CSS - 3

盒子模型

CSS box-model

content 内容区

padding 内边距（补白）

border 边框

margin 外边距

div {
    /* 内容区宽高 */
    width: 400px;
    height: 400px;
    
    /* 内边距，设置的背景颜色会填充内边距区域 */
    padding: 20px;
    
    /* 边框，设置的背景颜色会填充边框区域 */
    border: 10px dashed black;
    
    /* 外边距，不影响盒子大小，只影响盒子的位置 */
    margin: 50px;
    
    font-size: 20px;
    background-color: gray;
}

盒子大小 = content + padding + border

内容区

子元素都在内容区里

div {
    /* 区间：600~1000 */
    min-width: 600px;
    max-width: 1000px;
    
    /* 区间：50~400 */
    min-height: 50px;
    max-height: 400px;
    
    background-color: skyblue;
}

默认宽度：不设置 width 属性时，元素所呈现出来的宽度

总宽度 = 父的content - 自身左右的 margin

内容区的宽度 = 父的content - 自身左右的 margin - 自身左右的 border - 自身左右的 padding

padding

div {
    width: 400px;
    height: 400px;
    
    padding-left: 20px;
    padding-top: 30px;
    padding-right: 40px;
    padding-bottom: 50px;
    
    /* padding: 10px; */
    
    /* 上下\左右 */
    /* padding: 10px 20px; */
    
    /* 上\左右\下 */
    /* padding: 10px 20px 30px; */ 
    
    /* 上\右\下\左 */
    /* padding: 10px 20px 30px 40px; */
    
    font-size: 20px;
    background-color: skyblue;
}

注意：

  • padding 不能为负数

  • 行内元素的左右 padding 没问题，但上下 padding 不能完美设置

border

div {
    width: 400px;
    height: 400px; 
    background-color: skyblue;
    
    /* border: 5px; */
    
    /* border-width: 10px; */
    border-left-width: 10px;
    border-right-width: 10px;
    border-top-width: 10px;
    border-bottom-width: 10px;
    
    /* border-color: red; */
    border-left-color: red;
    border-right-color: red;
    border-top-color: red;
    border-bottom-color: red;
    
    /* border-style: solid; */
    border-left-style: solid;
    border-right-style: dotted;
    border-top-style: dashed;
    border-bottom-style: double;
    
    /*
    border-left: 5px dashed purple;
    border-right: 5px dashed purple;
    border-top: 5px dashed purple;
    border-bottom: 5px dashed purple;
    */
}

margin

/* 同 border */

注意：

  • 子元素的 margin 参考父元素的 content 计算
  • margin 的值可以是 auto，可以实现一个块级元素在其父元素内水平居中
div {
    width: 400px;
    height: 400px; 
    background-color: skyblue;
    
    /* margin: 100px auto; */
    margin-left: auto;
    margin-right: auto;
}
  • margin 可以是负值

margin塌陷问题

在一个父元素里，给第一个子元素设置 margin-top 值，给最有一个子元素设置 margin-bottom 值，这两个值都会被父元素抢走

<body>
    <div class="outer">
        <div class="inner1">part 1</div>
        <div class="inner2">part 2</div>
    </div>
</body>

.outer {
    width: 400px;
    background-color: gray;
    /* 解决 */
    overflow: hidden; /* 控制元素的内容溢出不可见 */
}
.inner1 {
    width: 20px;
    height: 20px;
    background-color: orange;
    /* margin-top: 50px; */
}
.inner2 {
    width: 20px;
    height: 20px;
    background-color: green;
    /* margin-bottom: 50px; */
}

注意：

  • 上面兄弟元素的下margin 和 下面兄弟元素的上margin 会合并，取一个最大值，而不是相加
  • 左右 margin 不会合并
  • 父元素加一个 border 不会抢走 margin

处理内容溢出

谁是容器，就在谁身上加属性

overflow

#d1 {
    width: 400px;
    height: 200px;
    background-color: skyblue;
    overflow: hidden; /* 横向、纵向的溢出全隐藏 */
    /* visible(默认) scroll(滚动条不会消失) auto */
}

overflow-x overflow-y 不能一个 hidden 一个 visible

隐藏元素的两种方式

display: none;
visibility: hidden; /* show */

display 不占位，visibility 占位

样式的继承

会继承的css属性

字体属性、文本属性（除 vertical-align）、文字颜色

不会被继承的css属性

边框、内边距、外边距、宽高、背景、溢出方式

元素的默认样式

body：8px 外边距

元素默认样式 > 继承样式

布局

居中

  • 块元素居中 文字居中
<body>
    <div class="outer">
        <div class="inner">
            inner
        </div>  
    </div>
</body>

.outer {
    width: 400px;
    height: 400px;
    background-color: gray;
    overflow: hidden;
}
.inner{
    width: 200px;
    height: 100px;
    background-color: orange;
    
    margin: 0 auto; /* 水平居中 */
    margin-top: 150px; /* 垂直居中 */
    
    /* 文字水平居中 */
    text-align: center;
    /* 文字垂直居中 */
    line-height: 100px;
}
  • 行内元素/行内块元素 可以当成文字处理
<body>
    <div class="outer">
        <span class="inner">
            hello
        </span>  
    </div>
</body>

.outer {
    width: 400px;
    height: 400px;
    background-color: gray;
    
    text-align: center;
    line-height: 400px;
}
.inner {
    background-color: orange;
    font-size: 20px;
}
  • 图片行内元素居中
<html>
<head>
 	<style>
	.outer {
        width: 400px;
        height: 400px;
        background-color: gray;

        text-align: center;
        line-height: 400px;
        /* 文字的大小和影响中线的位置，进而影响图片的位置 */
        font-size: 0px;
    }
    span {
        background-color: orange;
        font-size: 20px;
        vertical-align: middle;
    }
    img {
        vertical-align: middle;
    }
	</style>
</head>
<body>
    <div class="outer">
        <span class="inner">hello</span><img src="" alt="">
    </div>
</body>

</html>

元素之间的空白问题

<body>
    <div>
        <span style="background-color: red">123</span>
        <span style="background-color: blue">123</span>
        <span style="background-color: gray">123</span>
    </div>
</body>

视口显式的三个 span 有空隙（行内元素、行内块元素彼此之间的换行会被浏览器解析为一个空白字符），删除回车后就没了

/* 第二种解决办法 */
div {
    font-size: 0px;
}
span {
    font-size: 20px;
}

行内块元素的幽灵空白问题

图片下边有一条空白缝隙（因为默认是基线对齐）

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的

/* 第一种解决方法 */
img {
    height: 200px;
    vertical-align: bottom;
}

/* 第二种解决方法 */
img {
   height: 200px;
   font-size: 0px;
}

/* 第三种解决方法：图片独占一行后面没东西时用 */
img {
   height: 200px; 
   display: block;
}

浮动

浮动之后的元素会脱离文档流，都是由内容撑开的，但是也可以设置宽高

不会独占一行，可以与其他元素共用一行

不会 margin 合并，也不会 margin 塌陷

.box {
    float: left;
    width: 200px;
    height: 200px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

浮动后的影响

  1. 父元素塌陷
  2. 对后面的兄弟有影响

方法1

<head>
    <style>
        .box1,.box2,.box3,.box4 {
            float: left;
        }
        .mofa {
            /* 消除所有浮动元素的影响 */
            clear: both; /* left right */
        }
    </style>
</head>
<body>
    <div>
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <!-- 不能用行内元素 --> 
        <div class="mofa"></div>
    </div>
</body>

方法2 (前面所有的元素都要浮动)

<head>
    <style>
        .box1,.box2,.box3,.box4 {
            float: left;
        }
        .outer::after {
            content: ' ';
            display: block; /* 默认是inline */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
    </div>
</body>

注意：要么所有兄弟元素都浮动，要么都不浮动

<head>
    <style>
        .leftfix {
            float: left;
        }
        .rightfix {
            float: right;
        }
        .clearfic::after {
            content: ' ';
            display: block;
            clear: both;    
        }    
    </style>
</head>
<body>
    <div class="container">
        <div class="header clearfix">
            <div class="logo">logo</div>
            <div class="banner1 leftfix">banner1</div>
            <div class="banner2 leftfix">banner2</div>
        </div>
    </div>
</body>

定位

相对定位

相对自己原来的位置

不会脱离文档流，元素位置的变化只是视觉效果上的变化，不会对其他元素产生任何影响

<head>
    <style>
        .box1 {
            background-color: orange;
        }
        .box2 {
            background-color: blue;
            position: relative;
            left: 20px;
            /* right: 20px; 左右不能同时写，同时写左生效 */
            
            top: 20px; /* box2会盖在box3上，因为box2开定位了 */
        }
        .box3 {
            background-color: red;
        }        
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>

只要开启定位了，层级就比其它元素高；都开定位，后写的会盖过先写的

相对定位的元素也 能浮动（不推荐）

相对定位的元素也 能通过 margin 调整位置（不推荐）

应用场景：

  1. 微调

绝对定位

参考包含块

  • 没有脱离文档流的元素，父元素就是包含块

  • 脱离文档流的元素，第一个开启定位的祖先元素就是包含块（如果所有祖先都没定位，包含块就是整个页面）

会脱离文档流

不能浮动，同时设置定位为主

设置后变为定位元素，默认宽高由内容撑开，可以设置宽高

<head>
    <style>
        .outer {
            position: relative;
        }
        .box1 {
            background-color: orange;
        }
        .box2 {
            background-color: blue;
            position: absolute;
            left: 0; /* 左右不能同时写，同时写左生效(上下同理) */     
            top: 0; 
            margin-left: 100px; /* 有效 */
            margin-right: 100px; /* 无效(绝对定位没有设置right) */
        }
        .box3 {
            background-color: red;
        }        
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>

绝对定位的元素也 能通过 margin 调整位置（不推荐）

应用场景：

  1. 把一个元素覆盖到另一个元素上

固定定位

相对于视口

会脱离文档流

不能浮动，同时设置定位为主

设置后变为定位元素

固定定位的元素也 能通过 margin 调整位置（不推荐）

<head>
    <style>
        .box1 {
            background-color: orange;
        }
        .box2 {
            background-color: blue;
            position: fixed;
            left: 0; /* 左右不能同时写，同时写左生效(上下同理) */ 
            top: 0;
            margin-left: 100px; /* 有效 */
            margin-right: 100px; /* 无效(绝对定位没有设置right) */
        }
        .box3 {
            background-color: red;
        }        
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>

粘性定位

参考最近的具备滚动机制的祖先元素 (body)，即使这个祖先不是最近的真实可滚动祖先 (overflow: scroll;)

高度小于里面的内容可以有滚动机制

不脱离文档流

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 2000px;
        } 
        .item {
            background-color: gray;
        }
        .first {
            background-color: skyblue;
            font-size: 40px;
            position: sticky;
            top: 10px; /* 距离参考点10px就会被粘住，当A的父容器也划走的时候就失效 */
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="item">
           <div class="first">A</div>
			<h2>A1</h2> 
            <h2>A2</h2>
            <h2>A3</h2>
            <h2>A4</h2>
            <h2>A5</h2>
        </div>
        <div class="item">
           <div class="first">B</div>
			<h2>B1</h2> 
            <h2>B2</h2>
            <h2>B3</h2>
            <h2>B4</h2>
            <h2>B5</h2>
        </div>
    </div>
</body>

粘性定位的元素也 能浮动（不推荐）

粘性定位的元素也 能通过 margin 调整位置（不推荐）

定位的层级

  • 定位元素 > 无定位元素

  • 同样是定位元素，后写的 > 前写的

调整层级的属性：

z-index (开启定位才能用)，值越大，层级越高

设置 z-index 时，要注意它的包含块

定位可以越过padding

定位的特殊应用

特殊应用1

一个定位元素，没有具体的宽高，充满整个父元素

.outer {
    height: 400px;
    background-color: #888;
    position: relative;
}
.inner {
    background-color: orange;
    font-size: 20px;
    padding: 20px;
    boder: 10px solid black;
    /* width: 100%; 只能设置内容区 padding和border会超出 */
    position: abosolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

特殊应用2

让定位元素在包含块居中

.outer {
    width: 800px;
    height: 400px;
    background-color: #888;
    position: relative;
}
.inner {
    width: 400px;
    height: 100px;    
    background-color: orange;
    font-size: 20px;

    position: abosolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

版心

在pc端网页中，一般会有一个固定宽度且水平居中的盒子来显式网页的主要内容，这就是网页的版心

  • 版心的宽度一般在 960~1200 px之间
  • 版心可以是一个，也可以是多个
常见位置 布局名词
顶部导航条 topbar
页头 header page-header
导航 nav navigator navbar
搜索框 search search-box
横幅、广告、宣传图 banner
主要内容 content main
侧边栏 aside sidebar
页脚 footer page-footer

重置默认样式

  1. reset.css

    选择具有默认样式的元素，清空其默认样式，经过 reset 后的网站，好似“一张白纸”

  2. Normalize.css

    在清楚默认样式的基础上，保留了一些有价值的样式

posted @   wajiez  阅读(6)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS - 2
·  CSS - 1
·  HTML-3
·  42.CSS之盒子模型和浮动
·  3-CSS 盒子模型
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae