页面的制作过程
- 页面的制作过程
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提供的一种快速的写法
书写格式
- padding:上内边距 右内边距 下内边距 左内边距
- padding:上内边距 左右内边距 下内边距
- padding:上下内边距 左右内边距
- 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完全一致