css尺寸边框溢出怎么处理

这篇文章主要讲解了“css尺寸边框溢出怎么处理”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css尺寸边框溢出怎么处理”吧！

站在用户的角度思考问题，与客户深入沟通，找到浉河网站设计与浉河网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、网站建设、企业官网、英文网站、手机端网站、网站推广、主机域名、虚拟空间、企业邮箱。业务覆盖浉河地区。

web前端基础-css-尺寸边框

尺寸和边框:

一、尺寸

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

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

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

二、溢出处理

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

    
    
    
    
    


    

        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea delectus at nobis consectetur doloremque aliquam ratione repudiandae, incidunt temporibus quis aperiam animi iusto, consequuntur cum facilis quos perspiciatis voluptates ullam?
    

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

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

hidden(隐藏溢出的内容) 　　　　　　auto(只在有溢出的地方添加滚动条) 　　　　

visible(默认值) 

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

常见行内元素：span , a , b , i , u , em; 实现水平溢出的方法：可以将盛放内容的块级元素或ha'e行内块元素的宽度设置为比其该元素的父元素的宽度更大即可实现水平溢出； 

三、边框 border 

border设置时的简写方式：border:width style color; 

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

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

color:边框线的颜色； 

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

边框的阴影:box-shadow：h-shadow v-shadow blur spread color

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

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

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

spread:阴影的尺寸

color:阴影的颜色

五、盒子模型

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

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

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

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

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

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

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

box-sizing：默认的是content-box,即设置的width(宽度)仅仅是元素内容的宽度，如取值设置为border-box,则设置宽度实际上是元素内容区域的宽度+border-width+padding(左右内边距),当然高度也是一样的；

总结

感谢各位的阅读，以上就是“css尺寸边框溢出怎么处理”的内容了，经过本文的学习后，相信大家对css尺寸边框溢出怎么处理这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！