html怎么能把div宽度占满,css如何让div边框不占宽度？

HTML中，给一个DIV添加一个边框，那么这个DIV的宽度和高度就增加成为这个DIV的宽度加上这个边框的宽度，那么我们如何让边框不占宽度呢？

我们做网站时可以添加边框box-sizing属性：让边框不占宽度，在DIV宽度内画边框。

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

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

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

属性值：值描述

content-box这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit规定应从父元素继承 box-sizing 属性的值。

示例：

div.container {

width: 30em;

border: 1em solid;

}

div.box {

box-sizing: border-box;

-moz-box-sizing: border-box;

/* Firefox */

-webkit-box-sizing: border-box;

/* Safari */

width: 50%;

border: 1em solid red;

float: left;

}

这个 div 占据左半部分。

这个 div 占据右半部分。

效果图：

html怎么能把div宽度占满,css如何让div边框不占宽度？相关推荐

html div阴影四周均匀css写法 html div 圆角幅度写法
html div阴影四周均匀css写法 html div 圆角幅度写法 border-radius: 10px
html中div中加颜色,css怎样给div加边框颜色
css怎样给div加边框颜色 1.css为div四个边分别添加边框border-color:#000(设置4边边框颜色为黑色) border-color:+颜色值,即可设置对象边框颜色 border- ...
html中div文字垂直居中显示,CSS文本和div垂直居中方法总结
在样式布局中,我们经常碰到需要将元素居中.通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;,而对div等块级元素,只需要设置其left和rig ...
linux无任务内存被占满,centos服务器CPU被GC task占满，程序无内存溢出
jstack查看获得如下信息: "VM Thread" prio=10 tid=0x00007f5ac4095800 nid=0xa599 runnable "GC ta ...
网页占满整个屏幕_html如何让body占满整个屏幕
第一步:编写HTML页面主要包括是窗口全屏(类似F11的功能)让body独占整个空间. demo body全屏退出全屏魁拔1 血色苍穹纳米核心海贼王 // 窗口状态改变事件 fullscree ...
mysql执行语句时c盘突然占满_c盘里莫名其妙的被占满。。求解决
一.把一些右以移动的应用文件移到其它分区. 二.用Vista优化大师内置的系62616964757a686964616fe78988e69d8331333365643661统清理大师或下载Vsita优 ...
html div 100 无效,HTML / CSS - IE中div没有100％高度
好的,所以我遇到了问题 - 我很乐意解决这个问题. 我正在使用我最喜欢的方式设置简单的页眉/内容/页脚布局. 问题是我添加到布局的'content'div中的任何元素都无法在Internet Expl ...
html如何将div居中置顶层,CSS如何使DIV层居中
如何使DIV居中主要的样式定义如下: body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明 ...
html css div 高度自适应,HTML/CSS中，DIV高度自适应解决办法
获取content高度 *{color:#fff} .header{ height: 40px; width:100%; position: fixed; top:0; left:0; backgro ...

html怎么能把div宽度占满,css如何让div边框不占宽度？

html怎么能把div宽度占满,css如何让div边框不占宽度？相关推荐

最新文章

热门文章