CSS之常用属性、元素的显示模式、盒模型(下)

简介: CSS之常用属性、元素的显示模式、盒模型(下)

三、盒模型

🍎总述

每一个 HTML 元素就相当于是一个矩形的 "盒子"

这个盒子由这几个部分构成

  • 边框 border
  • 内容 content
  • 内边距 padding
  • 外边距 marg

先来张图

fab39690f14f49159dca388647d46e10.png

5c54367074aa4a1f94ddc38aea476236.png

🍎边框

基础属性

  1. 粗细: border-width
  2. 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
  3. 颜色: border-color

🌰一个边框的代码栗子

<!DOCTYPE html>
<html lang="en">
<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>
    <!-- witdth粗细,border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框,颜色: border-color -->
    <style>
        .test {
            width: 200px;
            height: 100px;
            border-width: 50px;
            border-style: solid;
            border-color: brown;
        }
    </style>
</head>
<body>
    <div class="test">
        这是一个块级元素
    </div>
</body>
</html>


效果展示


c8c2d8735e8e4b928c83cb703b0d53ad.png

🌰再看一个栗子

<!DOCTYPE html>
<html lang="en">
<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>
    <!-- border-witdth粗细,border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框,颜色: border-color -->
    <!-- 通过通配符选择器,我们就可以使我们所有的盒子都不被边框撑大 -->
    <style>
        * {
            box-sizing: border-box;
        }
        .test {
            width: 200px;
            height: 100px;
            /* border-width: 10px;
            border-style: solid;
            border-color: brown; */
            border: 10px solid brown;
            /* 简写的和上面的效果是一样的 */
        }
        p {
            width: 200px;
            height: 100px;
            border-top: 20px dashed green; 
            border-bottom: 10px dotted gray;
            border-left: 10px solid yellow;
            border-right: 5px solid blue;
        }
    </style>
</head>
<body>
    <div class="test">
        这是一个块级元素
    </div>
    <p>
        这是一个段落
    </p>
</body>
</html>

3c3b3aed9b0f483a841657b73cfe77cf.png

注意,通常情况下,我们设置的width和height是指的内容的大小,而一个盒子有了边框后,默认情况下我们的盒子会被撑大

但如果你设置了border-box,让盒子不再撑大。这时width和height指的就是整体盒子的大小,相当于内容大小就被缩水了


 

🍎内边距

padding 设置内容和边框之间的距离.


基础写法


默认内容是顶着边框来放置的. 用 padding 来控制这个距离

可以给四个方向都加上边距


padding-top

padding-bottom

padding-left

padding-right


🌰栗子


2b054d1aeb9349dda02396a60a70a4d8.png


637590b4ceb1435d974299143e3d4510.png

一点补充:复合写法

可以把多个方向的 padding 合并到一起. [四种情况都要记住, 都很常见]


padding: 5px; 表示四个方向都是 5px

padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px

padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px

padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)


🍎外边距

基础写法

控制盒子和盒子之间的距离.

可以给四个方向都加上边距

  • margin-top
  • margin-bottom
  • margin-left
  • margin-rig


90b21802268843aba12e617eddffd86c.png

324de40803544cccabc6adc10acbbe54.png

288dfdeb9bb34bc1bba971546723e5f8.png

🍎块级元素居中

a11928ca01ce481081a41540bb51f4fb.png

6edc1d98751c414d99ab13c530c59846.png

🔔注意:

这个水平居中的方式和 text-align 不一样.

margin: auto 是给块级元素用得到.

text-align: center 是让行内元素或者行内块元素居中的.

另外, 对于垂直居中, 不能使用 "上下 margin为auto"的方式

 


🍎去除浏览器默认样式

2e065ef21b374e8591f2cff56d471f0e.png

四、弹性布局

📝初体验

使用前

327615d4302f41b2931c1f947381f572.png 使用后


cb3c522625fd4483a8dab06820537ed9.png


进一步的使用

e0f585155c5f468f92c7ccdf4a31e564.png



a3251e4b950d4fd0a247c30268b21785.png


📝flex 布局基本概念

flex 是 flexible box 的缩写. 意思为 "弹性盒子".

任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.

flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.


基础概念:

被设置为 display:flex 属性的元素, 称为 flex container

它的所有子元素立刻称为了该容器的成员, 称为 flex item

flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

10ab501782474034ae6aba5c75185198.png

6baf1bb919d149909238c6653ca30781.png

📝 实现元素的居中

73089bbb9a534ad0a5f4811404418375.png


8bfda80a79544843a9f04e2fde4fd37e.png

📝注意

理解 stretch(拉伸):

这个是 align-content 的默认值. 意思是如果子元素没有被显式指定高度, 那么就会填充满父元素的高度

align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents

相关文章
|
11天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
16 7
|
1月前
|
前端开发 容器
CSS语言的属性(Property)和值(Value)
CSS语言的属性(Property)和值(Value)
N..
|
21天前
|
前端开发 容器
CSS 网页布局元素
CSS 网页布局元素
N..
23 1
|
26天前
|
前端开发 UED 容器
CSS3美化网页元素
CSS3美化网页元素
9 0
|
1月前
|
前端开发 容器
CSS背景background八种属性
CSS背景background八种属性
|
5天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
16 0
|
1月前
|
XML 编解码 前端开发
编程笔记 html5&css&js 033 HTML SVG
编程笔记 html5&css&js 033 HTML SVG
|
20小时前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
8天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
10 0
|
25天前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码