Home > Developer > Web Develop
The main CSS properties in the Div+css layout are described in:
Float:
The Float property is the most basic and most commonly used property in the DIV+CSS layout for implementing multi-column functionality, and we know that the <div> tag can only display one line in the default row, whereas using the Float property allows you to display multiple div functions in a row. The most straightforward way to explain this is to implement the multi-column function of table layout.
Margin:
The margin property is used to set the distance between two elements.
Padding:
The Padding property is used to set the distance between the border of an element and its contents.
Clear:
Using the Float property to set a row with multiple div (multiple columns), it is best to use the clear property to clearly float before the next line starts, otherwise the above layout will affect the following.
Simple Operation Example: use example below if you make a simple and basic layout, the effect is as follows:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""">
""><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>DIV+CSS布局教程</title><style type="text/css">#Container{ width:1000px; margin:0auto;/*设置整个容器在浏览器中水平居中*/ background:#CF3;}#Header{ height:80px; background:#093;}#logo{ padding-left:50px; padding-top:20px; padding-bottom:50px;}#Content{ height:600px; /*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/ margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/ background:#0FF; }#Content-Left{ height:400px; width:200px; margin:20px;/*设置元素跟其他元素的距离为20像素*/ float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/ background:#90C;}#Content-Main{ height:400px; width:720px; margin:20px;/*设置元素跟其他元素的距离为20像素*/ float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/ background:#90C;}/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/#Footer{ height:40px; background:#90C; margin-top:20px;}.Clear{ clear:both;}</style><body><div id="Container"> <div id="Header"> <div id="logo">这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。</div> </div> <div id="Content"> <div id="Content-Left">Content-Left</div> <div id="Content-Main">Content-Main</div> </div> <div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。--></div> <div id="Footer">Footer</div></div></body><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""">""><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>DIV+CSS布局流程</title><style type="text/css">#Container{ width:1000px; margin:0auto;/*设置整个容器在浏览器中水平居中*/ background:#CF3;}#Header{ height:80px; background:#093;}#logo{ padding-left:50px; padding-top:20px; padding-bottom:50px;}#Content{ height:600px; /*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/ margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/ background:#0FF; }#Content-Left{ height:400px; width:200px; margin:20px;/*设置元素跟其他元素的距离为20像素*/ float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/ background:#90C;}#Content-Main{ height:400px; width:720px; margin:20px;/*设置元素跟其他元素的距离为20像素*/ float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/ background:#90C;}/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/#Footer{ height:40px; background:#90C; margin-top:20px;}.Clear{ clear:both;}</style><body><div id="Container"> <div id="Header"> <div id="logo">这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。</div> </div> <div id="Content"> <div id="Content-Left">Content-Left</div> <div id="Content-Main">Content-Main</div> </div> <div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。--></div> <div id="Footer">Footer</div></div></body>DIV+CSS Layout-Fixed page opening layout
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
