Web前端的尺寸和边框知识点有哪些-创新互联

今天小编给大家分享一下Web前端的尺寸和边框知识点有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

尺寸

行内元素是不能设置宽和高的，其高度是由元素里面的内容的高度撑起来的；

行内块元素可以设置宽和高，当行内块元素没有设置宽高的时候，行内块元素的宽高是其默认的宽高；

块级元素：可以设置宽高，但是如果没有设置宽，则其默认宽度是该块级元素的父级元素的宽度的100%；如果没有设置高度，则该该块级元素的默认高度是由该块级元素内部的内容撑起来的高度，如若块级元素中没有内容，则默认高度为；

边框border

border设置时的简写方式：border:widthstylecolor;

width:边框的宽度（就是边框的粗细程度);

style:边框线的样式，大多数情况下取值为solid(边框线为实线),当然也有其它取值；

color:边框线的颜色；

单个设置某一个方向是否有边框：border-top/border-left/border-right/border-bottom:widthstylecolor;

边框的阴影:box-shadow：h-shadowv-shadowblurspreadcolor

h-shadow:水平方向阴影的偏移量

v-shadow:垂直方向阴影的偏移量

blur:阴影的模糊距离，值越大，越模糊

spread:阴影的尺寸

color:阴影的颜色

溢出处理

当一个元素里面的内容量过大且该元素的尺寸大小又不足以完全能容纳下该元素里面的内容时，则会发生溢出想象；默认的溢出情况是垂直方向溢出容纳不下的内容，并且将溢出的内容显示出来。

这里关于overflow的几个取值入下：

overflow:scroll(不管是否溢出，水平和垂直都添加滚动条)

hidden(隐藏溢出的内容)

auto(只在有溢出的地方添加滚动条)

visible(默认值)

常见的块级元素：div,h系列,li,dt,dd，以及p标签元素；

常见行内元素：span,a,b,i,u,em;

实现水平溢出的方法：可以将盛放内容的块级元素或行内块元素的宽度设置为比其该元素的父元素的宽度更大即可实现水平溢出；

盒子模型

盒子模型---元素在页面上实际的占地空间的计算方式

浏览器默认的元素实际占地宽度：

左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距

浏览器默认的元素实际占地高度：

上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

***外边距margin：单位有px和%，px：因为改变边框距的影响，直接位移多少像素的距离；%：位移的距离是父元素宽度的百分比；

margin的特殊取值有auto(自动计算块级元素的左右边距，使其块级元素在父级元素的范围内水平居中显示，ps：auto不能是块级元素垂直居中，只能设置水平居中只对块级元素有效)，padding(内边距)取值没有auto；

以上就是“Web前端的尺寸和边框知识点有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。