HTML基础3

冷不防 2021-10-23 08:43 271阅读 0赞

1.  **页面的制作过程**

**1页面的制作过程**

1设计师制作设计图  划分区域 最重要 最复杂

2前端工程师制作页面  填充内容

**2如何划分区域**

用合适的元素来表示不同的区域  已学习 HTML

设置区域的位置、尺寸、背景等样式 CSS

**3****划分区域中的CSS知识**

每个元素都会在页面中生成一个矩形区域

CSS称该矩形区域为盒子(box)

**2.****盒模型概述**

**1****盒子的分类**

不同的元素产生的盒子类型可能不同

一个元素，产生什么样的盒子，取决于它CSS的display属性

**2****盒子的组成**

一个盒子由：margin、border、padding、content组成

**3.****CSS的尺寸单位**

在CSS中，有很多属性的取值，需要表示为一个尺寸，一个尺寸，由数值和单位组成。

**4.****盒模型**

content 内容

含义 用于存放文本或其他元素的区域，类似于一个箱子中存放东西的空间

相关CSS属性

Overflow 含义：内容溢出时的处理方式

不可继承

默认值：visible

溢出部分仍然显示

其他取值

hidden溢出部分隐藏

scroll在水平和垂直方向上出现滚动条，若溢出，则滚动条可用，否则不可用

auto当内容在水平或垂直方向上溢出时，才在该方向上出现滚动条，否则不出现

min-width 含义：最小宽度保证width属性的值不小于该属性值

不可继承 默认值：0px 其他取值em %

max-width含义：最大宽度，保证width属性的值不大于该属性值

不可继承 默认值：none 表示未设置最大宽度，可视为width属性可以无限大

其他取值 px  em %

min-height含义：最小高度 保证height属性的值不小于该属性值

不可继承 默认值：0px 其他取值em %

max-height含义：最大高度 保证height属性的值不大于该属性值

不可继承默认值：none 表示未设置最大高度，可视为height属性可以无限大

其他取值px em %

**padding 内边距、填充区**

含义:表示边框到内容之间的距离，分为上（top）、右（right）、下（bottom）、左（left）四个方向.类似于箱子和内部空间之间的填充物

相关CSS属性

padding-top 含义：上内边距 不可继承 默认值：0px 其他取值em %

padding-right含义：右内边距 不可继承 默认值：0px 其他取值em %

padding-bottom 含义：下内边距 不可继承 默认值：0px 其他取值em %

padding-left 含义：左内边距 不可继承 默认值：0px 其他取值em %

Padding 速写属性、简写属性 速写属性不是真实的CSS属性，它只是CSS提供的一种快速的写法

书写格式

1.  padding:上内边距 右内边距 下内边距 左内边距
2.  padding:上内边距 左右内边距 下内边距
3.  padding:上下内边距 左右内边距
4.  padding:上下左右内边距

**border 边框**

含义:分割内部和外部的界限，由上(top)、右(right)、下(bottom)、左(left)四个部分组成类似于箱子壁

**相关CSS属性**

**上边框**

边框样式：border-top-style

含义：上边框的样式 不可继承 默认值：none 无边框样式  其他取值 solid （实线） dashed （虚线）dotted（点阵） double（双实线）

边框厚度：border-top-width

含义：上边框的厚度 不可继承默认值：medium 预设值，表示中等边框 其他取值 预设值 medium（中等）thin（细） thick（粗）数值px em

边框颜色：border-top-color

含义：上边框的颜色 不可继承 默认值：currentcolor表示当前元素的字体颜色

其他取值 预设值black（黑色）white（白色）gray（灰色）rgb 用红绿蓝三种基本颜色调配而成，每种颜色的取值是十进制的数字：0-255 书写格式：rgb(红,绿,蓝)HEX用红绿蓝三种基本颜色调配而成，每种颜色的取值是十六进制的数字00-ff书写格式：\#红绿蓝，\#号后必须是6个或3个数值

border-top速写属性 书写格式 border-top:厚度 样式 颜色

**右边框**** **border-right-XXX

**下边框** border-bottom-XXX

**左边框** border-left-XXX

border-width 速写属性：同时设置所有边框的厚度

border-style 速写属性：同时设置所有边框的样式

border-color 速写属性：同时设置所有边框的颜色

border速写属性：同时设置所有边框的厚度、样式、颜色 书写格式 border:厚度 样式 颜色

margin 外边距

含义 表示边框和相邻盒子的距离，分为上（top）、右（right）、下（bottom）、左（left）四个方向 类似于箱子与箱子之间的距离

相关CSS属性

margin-top 含义：上外边距 不可继承 默认值：0px 其他取值em %

margin-right含义：右外边距 不可继承 默认值：0px 其他取值em %

margin-bottom 含义：下外边距 不可继承 默认值：0px 其他取值em %

margin-left 含义：左外边距 不可继承 默认值：0px 其他取值em %

margin 速写属性、简写属性 速写属性不是真实的CSS属性，它只是CSS提供的一种快速的写法

书写格式

margin:上外边距 右外边距 下外边距 左外边距

margin:上外边距 左右外边距 下外边距

margin:上下外边距 左右外边距

margin:上下左右外边距

浏览器默认样式中的margin -webkit-XXX -webkit-是浏览器厂商前缀

盒模型知识补充

**子盒子**

边框盒（border-box）：由border、padding、content组成 浏览器调试时，页面中显示的元素尺寸是指边框盒的尺寸【演示】元素的背景，默认覆盖边框盒【演示】，可通过background-clip属性修改 background-clip属性 含义：背景覆盖范围 不可继承 默认值：border-box 取值 border-box：背景覆盖边框盒 padding-box：背景覆盖填充盒 content-box：背景覆盖内容盒

填充盒（padding-box）：由padding、content组成 严格意义上，overflow指代的溢出，是指溢出填充盒【演示】

内容盒（content-box）：由content组成 默认情况下，width和height属性，是指内容盒的宽度和高度

width和height的设置范围，可通过box-sizing属性修改

box-sizing属性 含义：盒子宽高的设置范围 不可继承 默认值：content-box 取值 content-box：表示内容盒的宽高 border-box：表示边框盒的宽高【演示】

**盒子尺寸的计算**

box-sizing:content-box的情况下 box-sizing:border-box的情况下 外边框，用法和border完全一致

转载于:https://www.cnblogs.com/RAINBOW1357/p/11374372.html

发表评论取消回复

表情：

评论列表（有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读

相关【前端】HTML基础3-HTML标签

超链接标签 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

素颜马尾好姑娘i/ 2022年08月30日 04:22/ 0 赞/ 263 阅读

相关 HTML基础

今天看到大神的一篇文章，还真的不错，在这里转载一下，希望能帮到很多初识前端的人原文地址 [http://www.moadd.com/?p=86][http_www.m

系统管理员/ 2022年08月01日 13:44/ 0 赞/ 199 阅读

相关 HTML基础部分总结 -- V1.3

以后遇到什么知识点会更新. ![Center][] [Center]: /images/20220615/2b2d92eb9b804193ad1c5cef

超、凢脫俗/ 2022年06月15日 09:39/ 0 赞/ 202 阅读

相关 HTML：HTML基础

第一章：HTML基础 1.1 HTML的基本概念 HTML的英文全称为Hyper Text Markup Language,即网页超文本标记语言。HTML作为一款标记

阳光穿透心脏的1/2处/ 2022年06月05日 03:56/ 0 赞/ 304 阅读

相关 HTML基础—3文本

1.文本 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

谁践踏了优雅/ 2022年01月12日 07:45/ 0 赞/ 517 阅读

相关 HTML5&CSS3基础

目录 1.Headline with the h2 Element 2.Uncomment HTML 3.Comment out HTML 4.Fill in th

淩亂°似流年/ 2022年01月06日 01:33/ 0 赞/ 322 阅读

相关 HTML基础 --- HTML编辑器

一、使用 Notepad 或 TextEdit 来编写 HTML 可以使用专业的 HTML 编辑器来编辑 HTML： Adobe Dreamweaver M

雨点打透心脏的1/2处/ 2021年12月03日 17:05/ 0 赞/ 430 阅读

相关 HTML基础 --- HTML元素

HTML 文档是由 HTML 元素定义的。一、HTML元素 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 ![17249

阳光穿透心脏的1/2处/ 2021年12月03日 17:02/ 0 赞/ 544 阅读

相关 HTML基础3

1. 页面的制作过程 1页面的制作过程 1设计师制作设计图划分区域最重要最复杂 2前端工程师制作页面填充内容 2如何划分区域用合适的元素来表示不同的区

冷不防/ 2021年10月23日 08:43/ 0 赞/ 272 阅读

相关 HTML基础

HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。什么是HTML HTM

淡淡的烟草味﹌/ 2021年09月24日 16:40/ 0 赞/ 356 阅读