css样式高度,css根据高度适配样式

CSS如何怎么设置div边框颜色宽度和高度

1.首先，您需要创建一个div,对div进行添加一个class。我们利用CSS通过class来设置div的边框。

2.创建一个用于设置边框的CSS文件，对于您实际开发中，将边框添加到您的CSS文件中即可。

3.在CSS文件中设置DIV的边框，首先我们可以先给div一个宽度与高度。

4.得到了宽度与高度后，如果我们没有边框，是看不到样式的。如果您的div中有内容，那么只是显示那些内容而已。

5.接下来，添加一个border边框。

6.我们将边框设置为1px.如果只是设置了宽度而没有设置颜色与具体的显示样式的话，边框并不会显示，您现在可以刷新一下您的页面看一下，添加了border:1px后是否显示，答案是肯定不显示的，因为我们参数没有写完整。

7.参加第二个参数颜色值，具体的颜色您可以百度搜索具体的样式值的代码，您可以使用基本色直接使用单词拼写也是可以的。

8.最后一个参数是显示样式，您可以选择不同的样式来进行显示，我们这里使用的是实线的方式来实现。

9.如果您使用的是一些专门用来做前端开发的软件，您输入后，会有一些提示，您如果选择不同样式来试一试看。

10.添加了上述的三个属性后，您的div边框即可显示出来了。

相关问答

Q1: css div高度设置

1、首先我们新建一个测试项目然后新建一个index.html、basic.js和basic.css文件。

2、js修改html文件中div的style中值来修改div的高度 HTML文件中的文件代码如图所示。

3、运行之后我们看到两个div的高度是一样的 接下来我们就使用js修改高度。

4、这时我们敲js中的代码 获取div1的id 使用css属性对应的style属性然后设置高度 如图所示。

5、使用js修改CSS文件中的div的height的值 HTML文件中的代码。

6、然后我们是在js文件中获取div1的id属性 然后使用obj.style.cssTest来修改嵌入式的css。

7、然后运行项目之后 两次结果都是一样的 div的高度改变了 。

Q2: css怎么设置最大高度和最小高度

1、IE6支持max-height解决方法

IE6支持最大高度解决CSS代码：

.yangshi{max-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)1000?"1000px":"");overflow:hidden;}

说明：max-height:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围高度。而_height:expression((document.documentElement.clientHeight||document.body.clientHeight)1000?"1000px":"");overflow:hidden;则是让IE6支持max-height替代CSS代码，但效果和其它版本浏览器相同效果。

让所有浏览器都支持max-height的CSS样式代码，完整：

max-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)1000?"1000px":""); overflow:hidden;这里的1000和1000px是你需要的数值，注意3个数值的相同。

让IE6支持最大高度max-height的时候别忘记加上overflow:hidden;

2、IE6支持min-height解决方法

IE6支持最小高度解决CSS代码：

.yangshi{min-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)1000?"1000px":"");}

说明：min-height:1000px; 这个是IE6以上级其它品牌浏览器支持最小范围高度。而_height:expression((document.documentElement.clientHeight||document.body.clientHeight)1000?"1000px":"");则是让IE6支持min-height替代CSS代码，但效果和其它版本浏览器相同效果。

让所有浏览器都支持min-height的CSS样式代码，完整：

min-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)1000?"1000px":""); 这里的1000和1000px是你需要的数值，注意3个数值的相同。

3、IE6支持max-height又支持min-height方法

让所有浏览器包括IE6即支持最大高度又支持最小高度。

.yangshi{Max-Height:620px;Min-Height:40px;_height:expression(this.scrollHeight 620 ? "620px" : (this.scrollHeight 40 ? "40px" : "auto"));}

IE6支持Max-Height和支持Min-Height CSS代码

_height:expression(this.scrollHeight 620 ? "620px" : (this.scrollHeight 40 ? "40px" : "auto"));

说明：以上代码作用是让对象的最小高度为40px，最大高度为620px的CSS样式属性

Q3: 如何定义css样式，让背景色的高度随页面高度而定

有两种办法可以实现这个功能：

1、采用设置高度的值为百分比，如

height:100%;

此时高度就会随着父元素的高度二改变。

2、采用使用js获取页面的高度来实现高度的动态变化

如获取：页可见区域高： document.body.clientHeight

然后获取该样式高度后设置该高度为以上值。补充：

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

注意：一般实际开发过程中一般是不设置高度为具体的值的，一般是设置高度随着内容的多少而改变。

Q4: CSS样式中设置最小高度有什么用？

最小高度是在内容过少时就起作用，即使内容为空，也使页面保持一个最小的高度，内容足够多超出最小高度时，就自动撑开