码迷,mamicode.com
首页 > 其他好文 > 详细

页面的制作过程

时间:2019-07-26 14:30:13      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:ash   strong   矩形   过程   颜色   das   范围   cli   分区   

 

1. 页面的制作过程

设计师——设计稿——前端工程师

设计稿=前端工程师+划分区域+填充内容

用合适的元素来表示不同的区域设置区域的位置、尺寸、背景等样式

每个元素都会在页面中生成一个矩形区域CSS称该矩形区域为盒子(box)

2. 述盒模型概

Margin:外边框,与其他盒子的距离。

Border:边框

Padding:内边框,边框与内容的距离。

Conten内容的宽度和高度。

一个元素,产生什么样的盒子,取决于它CSSdisplay属性

3. 盒子内容

CSS的尺寸单位

CSS中,有很多属性的取值,需要表示为一个尺寸,一个尺寸,由数值和单位组成,CSS中常见的尺寸单位:px{像素,绝对尺寸,计算机屏幕由很多的小点组成,每一个点,就是一个像素}

 

Em{相对尺寸,相对于当前元素的字体大小(px)}

%{百分比,在不同的CSS属性中,有不同的含义}

所以其他尺寸单位,在经过浏览器计算后,都会变为px

padding 内边距、填充区含义:表示边框到内容之间的距离,分为上(top)、右(right)、padding-bottom下(bottom)、左(left)四个方向,类似于箱子和内部空间之间的填充物;相关CSS属性有:padding-toppadding-rightpadding-left

Border 边框含义:分割内部和外部的界限,由上(top)、右(right)、下(bottom)、左(left)四个部分组成,类似于箱子壁;相关CSS属性:border-top上边框,border-right-XXX有边框,

border-bottom-XXX下边框,border-left-XXX左边框,border-width边框厚度,border-style边框样式,border-color边框颜色。

margin 外边距含义:表示边框和相邻盒子的距离,分为上(top)、右(right)、下(bottom)、左(left)四个方向,类似于箱子与箱子之间的距离,具体规则比较复杂,视觉格式化模型详细讲解;相关CSS属性:margin-topmargin-rightmargin-bottommargin-leftmargin

4.盒模型知识补充

盒子边框盒(border-box):由borderpaddingcontent组成,元素的背景,默认覆盖边框盒【演示】,可通过background-clip属性修改。

填充盒(padding-box):由paddingcontent组成,严格意义上,overflow指代的溢出,是指溢出填充盒【演示】。

内容盒(content-box):由content组成,默认情况下,widthheight属性,是指内容盒的宽度和高度,widthheight的设置范围,可通过box-sizing属性修改,box-sizing属性含义:盒子宽高的设置范围。

盒子尺寸的计算:box-sizing:content-box的情况下,box-sizing:border-box的情况下,outline属性外边框,用法和border完全一致。

 

 

 

 

页面的制作过程

标签:ash   strong   矩形   过程   颜色   das   范围   cli   分区   

原文地址:https://www.cnblogs.com/qilin0/p/11250003.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!