电子商务网站开发设计-CSS网页界面设计错位:CS

2021-04-18 21:15| 发布者: | 查看: |

--------

电子商务网站开发设计

-------

为何测算宽度
测算网页页面像素宽度是以便CSS网页页面合理布局齐整与适配。普遍的大家合理布局左右构造网页页面或应用padding、margin合理布局的情况下将测算整页宽度,假如不测算不管是宽度过大过小就会出現错位难题。

如何测算CSS宽度
例一:大家测算一个左右构造的合理布局款式。
倘若总宽度为400px,那末左右加起来就理应小于400px,那大家将会左侧为300px,右侧为100px
正确编码:

!DOCTYPE html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title /title
style type="text/css"
.{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:100px; background:#999}
/style
/head
body
div
div 左侧300px /div
div 右侧100px /div
/div
/body
/html

以上为正确的左右构造总宽度恰好等于400px

不正确:
倘若大家在总宽度不会改变状况下,左侧为300px,而右侧为120px那总宽度超出了20px,大家看看会出現甚么难题,DIV+CSS编码以下:

!DOCTYPE html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title /title
style type="text/css"
.{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:120px; background:#999}
/style
/head
body
div
div 左侧300px /div
div 右侧100px /div
/div
/body
/html

大家依据上图可看出由于总宽度大概了20px,因此致使了左右构造不可以平齐,就出現了右侧往下掉。
这样就出現了错位的适配难题,一般在具体中由于大家测算的粗心大意,一般相差小的情况下是1px-2px,那样就不会被大家发现,因此清除错位适配能够从宽度测算下手。

例二:左右构造中有1px边框案例
一般左右构造中有1px边框,随后再加上有些边框这时候大家设定左右构造情况下就需要将此边框宽度与左右构造宽度测算在一起。
正确事例:
CSS与html编码以下:

!DOCTYPE html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title /title
style type="text/css"
.{width:400px;}
.zuo{ float:left; width:298px; border:1px solid #F00; background:#CCC;}
.you{ float:right; width:98px; background:#999; border:1px solid #F00;}
/style
/head
body
div
div 左侧300px /div
div 右侧100px /div
/div
/body
/html

因左右构造都有1px的宽度这个情况下各需要减去左右2像素的边框宽度,因此左侧最终是298px,右侧为98px的宽度

假如不减去边框将会导致一下实际效果:

DIV+CSS设定百分比宽度测算
有情况下大家也需要应用百分比来测算宽度,一般状况也是总的百分比宽度,不可以超出100%

CSS宽度测算情况下留意总结:
不管是左右构造、两列的合理布局還是独立一个DIV宽度的合理布局设定都需要留意宽度的掌握与测算,非常是应用了padding、margin、边框等CSS特性,这个情况下大家都需要将它们设定的占用宽度测算入内,牢牢掌握同排各宽度之和小于或等于总宽度,假如超过总宽度将会出現错位的适配难题。因此一般错位时大家便可以从测算宽度下手,自然错位也有许多缘故这里也是处理错位适配难题的方式之一。

---------

电子商务网站开发设计

------------
<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部