css怎么自适应宽度

css自适应宽度有2种方式：

1是通过百分比来控制宽度；

2可以通过块状元素自动占满父级的宽度的特性来实现

PS：当然还有一些方法，比如css3的flex-box布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高版本的浏览器才兼容，低版本的浏览器是不兼容的。

<script>

windowonload = function(){

    //把屏幕宽度赋值给该元素

    documentgetElementById("float_banner")stylewidth = windowscreenwidth + 'px';

}

</script>

的却，在css代码页可以执行js代码，但是，不建议这样做

CSS中宽度和高度分别可以通过width和height实现，那么对于单元格的宽度和高度，则可以通过如下样式来设置

td{ width:100px; height:50px;} /设置单元格宽度100px，高度50px/

示例如下：

给出HTML元素

<table>

<tr><td>1</td><td>2</td><td>345</td></tr>

<tr><td>6789</td><td>10</td><td>11</td></tr>

</table>

设置单元格高度和宽度样式

table{border-collapse:collapse;}

td{

border: 1px solid green; /边框/

width:100px;             /单元格宽度/

height:50px;             /单元格高度/

text-align:center;       /单元格文字居中对齐/

}

效果如下

可以通过width属性设置li中字段的宽度根据实际长度显示宽度。在li的样式中加上width:auto;就可以实现了；现在来看下面一段代码：

CSS样式设置：

#info_main{text-align:center; border:1px solid

#CCC;width:620px;}

#info_main li{width:auto;float:left;margin:0px 8px;

padding:0px;border:1px solid #CCC;}

网页代码：

<div

id="info_main">

<ul>

<li>时间：{dede:field name='pubdate'

function='strftime("%Y-%m-%d %H:%M","@me")'

/}</li>

<li>来源：{dede:fieldsource/}</li>

<li>作者:{dede:fieldwriter/}</li>

<li>点击:<script

src="{dede:field

name='phpurl'/}/countphpview=yes&aid={dede:field

name='id'/}&mid={dede:field name='mid'/}"

type='text/javascript'

language="javascript"></script>次</li>

</ul>

</div>

显示效果如下图：

css不行的，如果用css表达式可以取到页面宽度和高度，但不兼容非ie浏览器。这个还是应该用js取：

documentdocumentElementclientWidth：取得浏览器页面可视区域的宽度documentdocumentElementclientHeight：取得浏览器页面可视区域的高度

screenwidth：取得屏幕宽度

screenheight：取得屏幕高度

screenavailWidth：取得除任务栏外的屏幕宽度

screenavailHeight取得除任务栏外的屏幕高度

级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

以上就是关于css怎么自适应宽度全部的内容，包括:css怎么自适应宽度、javascript 获取宽度，然后再css中使用的问题、如何用CSS 定制表格单元格的宽度和高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！