-
两边的像素固定，中间自然可以自适应，如果中间的div想要和两边的有间距，利用margin属性，margin的值是相对于网页的各个边缘计算的
查看全部 -
margin 0 auto就可以实现水平居中查看全部
-
margin:0 auto 居中对齐
查看全部 -
一列布局不适于存放文本，太长容易看走眼
一列布局： 1.通常作为网页头部。固定宽度。 2.真正开发，高度设置自动的。
两列布局自适应，使用百分比。
三列布局，使用绝对定位和margin。
盒子之间的三种关系： 1、相邻 2、嵌套 3、叠加 我们要做的就是摆放好盒子的位置。
关于页面上元素的加载顺序： 元素是从前往后依次加载的，要想先加载就要写在前面。 通常left部分是作为菜单，right部分作为主体内容，我们打开网页，都希望先看到 主体内容，所以有意把right部分写在left部分前面，然后把right部分右浮动，left部分左浮动， 这样布局不会出现问题，而且还解决了IE6下右浮动换行的问题。
查看全部 -
margin:0 auto;是块状元素的居中对齐方式，
text-align:center;是内联元素（如，a,img标签)的对齐方式，
padding:0;margin:0;是做为初始化页面， 原因是页面在被各个浏览器读取时的理解不同产生不同的展示效果，所以需要清除.
查看全部 -
<style type="text/css">
#div1 {
width: 150px;
height: 500px;
float: left;
}
#div2 {
margin:0 300px 9 150px;
height: 500px;
}
#div3 {
width: 200px;
height: 500px;
float: right;
}
</style>
</head>
<body>
<div id="div1" class="bg-success">左侧div固定width:150px;</div>
<div id="div3" class="bg-danger">右侧div固定300px</div>
<div id="div2" class="bg-info">中间DIV自适应宽度杯子在多数时候，盛装的仅仅是半杯水，遇见的那个人依然似乎无法填补内心的空洞，时间一点一点地过去，水也一点一点地蒸发掉，你开始觉得他越来越无法满足你的全部幻想全部期待，对望的时候，彼此的眼里充满了空洞犹疑。杯子里面的水终于全部消失。分离是如此容易的一件事，就连曾经淡淡的水痕都刹那间无影无踪。生活似乎回到了最初的样子，天依旧蓝得透心，城市依旧匆忙得落寞。只是你不明白，为什么在每一个狂欢之夜，隐藏在人群中望着烟花绽放的夜空，会一边默默地流泪，一边强作笑颜。</div>
</body>查看全部 -
在CSS设置中，可以让元素脱离文档流的是浮点型（float）和绝对定位（position：absolute）
查看全部 -
<style type="text/css"> body{margin:0;padding:0} main{width:800px;matgin:0 auto} .left{width:220px;heigth:500px;float left;background #ccc} .right{width:580px;heigth:500px;float right;background #ddd} <style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> </html>查看全部 -
为什么right里不用写position：absolute？
.left{width:200px;height:800px;position:absolute;left:0;top:100px;background:blue;}
.right{height:800px;margin-left:210px;background:green;}
查看全部 -
浮动（float）和 绝对定位（position：absolute）可以让元素脱离文档流
查看全部 -
margin:0 auto div居中对齐
查看全部 -
<html><br> <head><br> <title>布局</title><br> <style type="text/css"><br> body{margin:0; padding: 0}<br> .top{<br> width: 800px;<br> height: 100px;<br> background: #645;<br> margin:0 auto;<br> }<br> <br> <br> .main{<br> width: 800px;<br> height: 300px;<br> background: #ccc;<br> margin: 0 auto;<br> }<br> <br> .bottom{<br> width: 800px;<br> height: 100px;<br> background: #973;<br> margin:0 auto;<br> }<br> <br> <br> </style><br> </head><br> <body><br> <div class="top"> </div><br> <div class="main"> </div><br> <div class="bottom"> </div><br> </body><br> </html>
查看全部 -
网页的特点：自适应界面的宽度；理论上能无限延长。<br> 分栏布局（分列）：一列，两列，三列和混合布局（一列头部，几列内容，可以有底部） 前端工程师需要用CSS的浮动和定位完成UI的设计。
查看全部 -
<html><br> <head><br> <title>布局</title><br> <style type="text/css"><br> body{margin:0; padding: 0}<br> .top{<br> width: 800px;<br> height: 100px;<br> background: #645;<br> margin:0 auto;<br> }<br> <br> <br> .main{<br> width: 800px;<br> height: 300px;<br> background: #ccc;<br> margin: 0 auto;<br> }<br> <br> .bottom{<br> width: 800px;<br> height: 100px;<br> background: #973;<br> margin:0 auto;<br> }<br> <br> <br> </style><br> </head><br> <body><br> <div class="top"> </div><br> <div class="main"> </div><br> <div class="bottom"> </div><br> </body><br> </html>
查看全部 -
1、在CSS样式里面开始布局时，首先要清除默认样式，即： body{margin:0;padding:0;} 2、和margin属性一样，当什么前提都没有时，浮动属性可以直接使用，例如： .left{width:20%;height:500px;float:left;background:red;} （这是布局，属性都要写在CSS样式里面） 3、固定宽度的两列布局： HTML代码： <div class="main"> <div class="left"></div> <div class="right"></div> </div> CSS代码： .main{width:800px;margin:0 auto} .left{width:200px;height:500px;float:left;background:blue} .right{widht:600px;height:500px;float:right;background:yellow} 4、两列自适应的布局： 把3里面的HTML代码的main外包裹去掉，CSS代码里面的.main去掉即可。即： HTML : <div class="left"></div> <div class="right"></div> CSS: .left{width:20%;height:600px;float:left;background:blue} .right{width:80%;height:600px;float:right;background:red} 5、一个外包裹盒子（或者一个类）的高度可以不设置，这时它的高度会随着它里面的内容自动适应。例如3里的.main就没有设置高度。
查看全部
举报