css控制宽度的属性是width；例如 width:960px; 即这个css样式定义的宽度是960像素
创新互联公司-专业网站定制、快速模板网站建设、高性价比义安网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式义安网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖义安地区。费用合理售后完善，10年实体公司更值得信赖。
光是CSS是做不了网页的,CSS是样式表,简单说就是控制网页里所有元素的表现形式,比如背景,比如字体大小,颜色.他需要和你html一起组成网页.网页主要是内容的体现,最好用div的写法,就是层+样式,网页里标签都可以设置id,就像人取了一个名字,id不能重复,然后在css里用
#id {样式代码}的方式就能控制这个id了.
如果多个内容相同,可以看做他们是一组的,就是class,设置class
.class名称 {样式代码} 就可以设置这个组的样式了,class名可以重复,主要应用就是这二个,还有更多资料相信你可以在很多地方找到教程.
这个有点说不好 不好解释..
css是样式表
比如说 我想让一个div元素 居中 带边框 高度200，宽度200的话 可以这样些
style
#divs{
width:200px;
height:200px;
border:1px solid #ccc; /*-这行是定义边框 1个象素 实线 灰色---*/
margin-left:auto;
margin-right:auto;/*--margin-left;right 这两个实现居中功能，所有浏览器上都好用--*
}
/style
div id="divs"
这里定义了个id="divs"
之后在css里用 #divs 来设置这个div的样式 ...
其他大部分元素都可以用css来设计样式
/div
!DOCTYPE html
2 html xmlns=""
3 head
4 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
5 title网页布局练习/title
6
7 link href="../EX_Asp_Net/css/div.css" rel="stylesheet" /
8 /head
9 body
10 h1 align="center"利用div和css对页面的布局进行调整/h1hr /
11 div class="d1"
12 h3窗口1/h3
13 /div
14 div class="d2"h3窗口2/h3/div
15 div class="d3"h3窗口3/h3/div
16 /body
17 /html
1
2
3
4
css代码：
1 bod {
2 margin:100%;
3 padding:100%;
4
5 }
6 .d1{
7 width:200px;
8 height:600px;
9 background-color:red;
10 margin-left:20px;
11 margin-top:20px;
12 position:absolute;
13 }
14 .d2{
15 width:800px;
16 height:150px;
17 background-color:greenyellow;
18 position:absolute;
19 left:235px;
20 margin-top:20px;
21
22 }
23 .d3{
24 width:800px;
25 heigh
视口（viewport）是用来约束网页中最顶级块元素的，即它决定了网页的大小，网页是先在视口上渲染，然后再通过视口放回到浏览器窗口上的，网页的渲染过程如下：
pc端视口的大小和浏览器的大小一样，所以网页是1：1的放到浏览器窗口上，而移动端视口就有点特殊，移动端视口的宽度是比移动端屏幕要宽，宽度尺寸一般是980px或者1024px，网页是视口上渲染完之后，为了能在移动端屏幕上显示整个网页，整个视口会整体缩放到屏幕的宽度，这样，网页看上去就整体缩放
具体如何设置视口以及禁止视口页面缩放可以自行百度
（主要针对移动端以及pc端网页需要实现等比放大缩小页面效果）
大概有以下几种
1、流体布局
流体布局其实就是宽度用百分比，高度用固定值的布局方式，宽度通过百分比来适配不同宽度的屏幕。
为了适配手机端不同尺寸的屏幕，我们在定义元素宽度的时候可以写百分比，百分比是相对于屏幕的宽度，所有宽度就可以做到自适应，而在高度方向，由于网页的高度是不定的，所以我们可以把高度写成固定的值(px),这种布局方式叫做流体布局。
注意两个概念
2、弹性盒模型布局flex
这种布局方式是通过css3新增的一些辅助布局的样式属性来制作布局的方式。
3、rem布局
rem是一种相对长度单位，通过这个长度单位可以实现元素宽高等比例缩放，从而完成不同宽度屏幕的适配。
4、响应式布局 （媒体查询）
通过样式动态查询屏幕的宽度，动态切换样式来适配不同宽度屏幕的布局方式。
Bootstrap是最典型的一种
待补充
实际开发中，pc端页面需要实现响应式等比缩放（即自适应），使用rem+弹性布局是比较现实及理想的解决方式
移动端可以使用rem布局，也可以使用px实现（主要用flex），具体看产品是怎么设计要求的
css3规定：1rem的大小就是根元素html的font-size的值。
rem其实是一个单位 ，是个相对单位 root em。rem就是root（根元素的大小）相对于html元素的字体大小的单位。
rem布局的原理
就是根据一个html根元素来控制，网页的布局，实现类似于自适应等比例的缩放的布局。
rem优势
通过修改html文字的大小，来改变页面中元素的大小，实现了页面的整体控制
rem的作用
通过设置 根元素html的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等，根据移动设备的宽度大小来实现自适应，不同的设备都展示一致的页面效果。
简单用法
vscode中安装cssrem插件，通过这个插件可以自动计算rem数值。
具体设置如下
注意:设置后 vscode软件需要重启 否则计算的rem值会出错
待补充
可以通过js的方式来改变，也可以通过css媒体查询的方式来改变，
待补充
css样式表嵌入网页有以下三种方法：
1，内联样式
内联样式是直接在html标签上定义该标签的css样式，如：
div
style="width:200px;height:30px;"/div
2，内部样式
内部样式是写在html文件中，且包含在style/style代码块中，如：
style
.box{width:200px;height:30px;}
/style
div
class="box"/div
3，外部样式
外部样式是通过在html中引用外部css文件来控制样式，如：
html文件中写入引用语句：
link
href="css文件路径"
rel="stylesheet"
media="screen"
/
