成都网站建设设计

将想法与焦点和您一起共享

css内边框线的设置方法

这篇“css内边框线的设置方法”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“css内边框线的设置方法”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的永丰网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

css是什么意思

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

css内边框线的设置方法:首先创建一个HTML示例文件;然后定义好div;最后使用border属性配合box-sizing属性来加内边框即可。

在CSS中,可以使用border属性配合box-sizing属性来加内边框。border属性用于添加边框,box-sizing属性用于以某种方式定义某些元素,以适应指定区域;将box-sizing属性值设置border-box值来加内边框。

下面我们先来看看css设置内边框的示例。









普通边框!!
内边框!!

box-sizing属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

语法

box-sizing: content-box|border-box|inherit;

属性值:

content-box:这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

border-box:指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit:指定 box-sizing 属性的值,应该从父元素继承。

示例:




 




这个 div 占据了左边的一半。
这个 div 占据了右边的一半。

效果图:

css内边框线的设置方法

以上是“css内边框线的设置方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


新闻标题:css内边框线的设置方法
文章位置:http://chengdu.cdxwcx.cn/article/iejpci.html

其他资讯