代码编织梦想

盒模型:

在css中,我们标签可以看作是一个矩形盒子。
一个网页的生成就是由多个盒子搭建而成的。
请添加图片描述
在这里插入图片描述
像这种就是属于盒子。

-如何查看盒模型的效果?

F12检查
在这里插入图片描述
将样式拉到最下面就可以看到盒模型的示意图
![](https://img-blog.csdnimg.cn/27fd67923f4a4c92bff0a9a2527cfcd8.pg
在这里插入图片描述
点一下这个按钮,然后再选择你需要查看的盒子

我们再来看看标准的盒模型图:
在这里插入图片描述

什么是盒模型?

英文全称: css model

盒模型组成:

- 内容区域:content
- 内边距:padding
- 边框:border
- 外边距:margin

听上去很懵?没关系,我们来打个比喻:
把一个盒模型想象成装玩偶的快递盒子
1. 内容区域——玩偶
2. 内边距——玩偶和快递盒子之间,有一个填充物(泡沫)来保护
3. 边框——装玩偶的快递盒子
4. 外边距——快递盒与快递盒之间的距离
在这里插入图片描述

盒模型的属性运用

-内容:

内容 content height+width 由高度和宽度来决定的

<!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>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 加背景色是为了方便你看清 */
        }
    </style>
</head>
<body>  
    <div>
        我是盒子
    </div>
</body>
</html>

呈现效果:
在这里插入图片描述
特别注意: 情况下,盒子不设置高宽,默认的大小是由里面的文字内容撑开的,由于span包裹标签大小是依据文字内容撑开的,不同于块级元素默认是占据一行的,所以如果span标签里面不写内容,即使写了高宽也不会出现盒子。写文字的话,依据文字大小来。

<!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>
    <style>
        span{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 加背景色是为了方便你看清 */
        }
    </style>
</head>
<body>  
    <span>
        我是盒子
    </span>
</body>
</html>

呈现效果:
在这里插入图片描述

  • 谈谈块级元素:
    • div
    • ul
    • li
    • p
    • h1~h6

块级元素不写宽度的话,那就和浏览器宽度一样百分百一行

  • 行内标签:
    • span
    • a
    • b
    • i
    • em
    • strong等

    这些标签暂时不支持自定义高宽,高宽是由文字内容来决定的

-取值:

像素值:1px等于1像素,像素不允许设置负数

-内边距:

– 一个值的写法:

会变大,上下各长
例子: padding 10px;

<!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>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 加背景色是为了方便你看清 */
            padding:10px;
            /* 加个内边距属性  四个方向都是10像素*/
            /* 宽度:220  width=200+上下内边距各10=220 高度同理*/
        }
    </style>
</head>
<body>  
    <div>
        我是盒子
    </div>
</body>
</html>

呈现效果:
在这里插入图片描述

– 两个值的写法:

例子: padding:10px 20px;
注意: 先设置的是上下为10px,左右设置都是20px

<!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>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 加背景色是为了方便你看清 */
            padding:10px 20px;

        }
    </style>
</head>
<body>  
    <div>
        我是盒子
    </div>
</body>
</html>

呈现效果:
在这里插入图片描述

– 三个值写法:

例子: padding:10px 20px 30px;
注意: 第一个表示上10px,第二个表示左右20px,第三个表示下30px

– 四个值写法:

例子: padding: 10px 20px 30px 40px;
注意: 上10px,右20px,下30px,左40px
按照顺时针方向转。

– 单个值写法:

例子:

  1. 顶部内边距——padding-top: 20px;
  2. 底部内边距——padding-bottom:30px;
  3. 左边内边距——padding-left:25px;
  4. 右边内边距——padding-right:35px;
  5. 四个方向边距全加——padding:20px;
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/2301_76312306/article/details/129413417

100本最棒的web前端图书推荐_kevinolivi的博客-爱代码爱编程

100本最棒的web前端图书推荐 01、《JavaScript DOM编程艺术第二版(中文)》 语言:中文 类型:pdf  简介:这本书作为被大家推荐的最多的前端入门书籍是有道理的。他能真正让大家了解dom脚本编程,或是说前端编程技术背后的思路和原则。对于初学者来说,这本书没有任何门槛,按部就班跟着书籍实例编写代码即可。我们会知晓如何对浏览器元素操作和掌

网络协议和netty——第一章 网络协议笔记-爱代码爱编程

一、计算机网络体系结构 1、OSI七层模型 开放系统互连参考模型 (Open System Interconnect 简称OSI)是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型,为开放式互连信息系统提供了一种功能结构的框架。其目的是为异种计算机互连提供一个共同的基础和标准框架,并为保持相关标准的一致性和兼

你将一次性得到 150+个Python 全栈知识点,70+个案例和 80 +道 Python面试题-爱代码爱编程

传统 Python 教程有什么问题? 我见过很多的 Python 讲解教程和书籍,它们大都这样讲 Python 的: 先从 Python 的发展历史开始,介绍 Python 的基本语法规则,Python 的 list, dict, tuple 等数据结构,然后再介绍字符串处理和正则表达式,介绍文件等 IO 操作,再介绍异常处理, 就这样一章一章往

软考高项——【第一章-信息系统】超详细知识点-爱代码爱编程

目录   一.信息化和信息系统 4.信息化(p8) 5.信息系统生命周期 6.信息系统开发方法:(P12)   二.网络协议   7.网络协议 (1)OSI协议 (open system interconnect,OSI)开放系统互连参考模型 (2)TCP/IP——传输层协议 (3)应用层协议: 三.网络基本技术 8.网络存储技

前端学习——这十本书一定要看-爱代码爱编程

为大家推荐十本前端开发相关的书籍,个人认为每本都很经典,希望大家能有所收获~ 但是即使前端技术飞速发展,下面这十本书却从来没有过时,依然是每个前端初学者首选的入门书籍。 1.Head First HTML与CSS(第2版) 作者: Elisabeth Freeman/ Eric Freeman 出版社: 中国电力出版社 是不是已经厌倦了那些深奥的

python前端开发书籍_本月值得一看的10本技术书籍(系统开发、前端、机器学习等)!(文末有福利)...-爱代码爱编程

9月14日,阿里云云栖社区机构号 联合IT图书专业出版社 人民邮电出版社:异步社区为大家带来十本技术书籍(系统开发、前端、机器学习等)。以下为书籍详情,文末还有福利哦! 书籍名称:《Kotlin程序开发入门精要 》 内容简介: 本书分3部分讲解Kotlin,第1部分(第1~11章)是Kotlin语言的基础部分,主要介绍了Kotlin的基础知识、语

yui3 html属性,高效Web前端开发之路——YUI 3.15-爱代码爱编程

高效Web前端开发之路——YUI 3.15 编辑 锁定 讨论 上传视频 《高效Web前端开发之路——YUI 3.15》是2014年清华大学出版社出版的图书,作者是钱伟、刘艳春。 书    名 高效Web前端开发之路——YUI 3.15 作    者 钱伟 刘艳春 ISBN 9787302383932定    价 49元 出版

【毕业设计】基于java+ssh+jsp的固定资产管理系统设计与实现(毕业论文+程序源码)——固定资产管理系统_毕业设计方案专家的博客-爱代码爱编程

基于java+SSH+JSP的固定资产管理系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+SSH+JSP的固定资产管理系统设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦。 文章目录: 基于java+SSH+JSP的固定资产管理系统设计与实现(毕业论文+程序源码)1、项目简介2、资源详情3、关键词:4、毕设简

asp毕业设计——基于asp+access的出租车管理系统设计与实现(毕业论文+程序源码)——出租车管理系统_毕业设计方案专家的博客-爱代码爱编程

基于asp+access的出租车管理系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于asp+access的出租车管理系统设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦。 文章目录: 基于asp+access的出租车管理系统设计与实现(毕业论文+程序源码)1、项目简介2、资源详情3、关键词:4、毕设简介5、资源下载

asp毕业设计——基于asp+access的新闻发布系统设计与实现(毕业论文+程序源码)——新闻发布系统_毕业设计方案专家的博客-爱代码爱编程

基于asp+access的新闻发布系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于asp+access的新闻发布系统设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦。 文章目录: 基于asp+access的新闻发布系统设计与实现(毕业论文+程序源码)1、项目简介2、资源详情3、关键词:4、毕设简介5、资源下载 1、

5、前端开发:css知识总结——常用选择器的总结_越努力越好的博客-爱代码爱编程

基本选择器 1.标签选择器 h1{ } p{ } 2.html的标签  3.类标签: .p1{ } 通过class设置类名:类名要明确;多个类名用空格隔开  语法:.class 4.id选择器: #d{ } 在标签内通过id设置id值;只能有一个ID值,用#id值{} 优先级:#id>class>标签--> 语

前端笔记(html+css+js+dom+网页特效+jquery+html5+css3+canvas 标签+web开发重难点+面向对象+ajax)-爱代码爱编程

第1章Html   Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签: 一、结构(固定的结构)   <html> <head> <title></title>

web前端发展历程_web前端的发展历程-爱代码爱编程

总览前端发展史 前言浏览器的发展史走进前端HTMLCSSjavaScript 小前端时代大前端时代写在最后 前言 目前在IT公司中前端的岗位越来越成为不可或缺的,前端的地位也愈见明显,

前端面试css自检(上)css基础(先看问题 自己自述一遍 不会再看答案 )_如何看一个人css基础-爱代码爱编程

推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言。 CSS的面试内容主要可以分四个部分: CSS基础、页面布局、定位与浮动和场景应用 CSS部分会涉及到代码的编写,需要自

【java毕业设计】基于javaee+ssh+mysql+mvc的动漫论坛设计与实现(毕业论文+程序源码)——动漫论坛_java毕业设计项目动漫论坛-爱代码爱编程

基于javaEE+SSH+MySql+MVC的动漫论坛设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于javaEE+SSH+MySql+MVC的动漫论坛设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦。

使用websocket、sockjs、stomp实现消息实时通讯功能_sockjs stomp-爱代码爱编程

客户端 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <titl