html5源码笔记（三）【爱创课堂专业前端培训】

一、常见的布局

1.1 固定布局(基本的布局方式)

1.2 百分比布局(流式布局)

width、heigth、padding、margin使用百分比进行布局

width、padding、margin相对父元素的宽度进行百分比设置

height相对父元素的高度进行百分比设置

面试题：

 

border不能用%写

绝对定位的元素，如果用%写width、height、padding，分别参考的是自己的定位参考父元素的width、height、width。就是离自己最近的已经定位的父代元素

        

    

1 

        body{

            margin: 0;

        }

        #container{

            /* height: 200px;

            width: 200px; */

            width: 50%;

            padding-top:50%;

            /* padding: 100px; */

            /* margin: 200px auto; */

            border: solid 1px;

        }

        #container div{

            height: 50%;

width: 50%;/*这里指的是内容盒子的宽度的50%*/

            border: solid 1px;

        }

1 

1.3 固比固布局

左边边栏固定，中间百分比布局