1.内边距 padding

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

    *{

        margin:0px;

    }

        .div1{

            width:100px;

            height:100px;

            background-color:red;

            padding:10px;/*内边距以内容为目标，距离边框的距离，盒子会被撑大*/

            //如果没有给出left-top-right-bottom，默认为全部都是这个边距

            }

    </style>

<body>

    <div class="div1"></div>

</body>

2.外边距 margin

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

    *{

        margin:0px;

    }

        .div2{

            width:100px;

            height:100px;

            background-color:green;

            border:2px solid yellow;
//Border：围绕在内边距和内容外的边框
 margin-top:40px;
//margin:用于控制元素与元素之间的距离；margin最基本的用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
}

    </style>

<body>

    <div class="div2"></div>
<!--margin collaspe   边境坍陷或者说边境重叠
外边距的重叠只产生在普通流文档的上下边距之间，这个看起来有点奇怪的规则，其实有其现实意义，设想
当我们上下排列一系列规则的块及元素,(如段落 p时)那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离

1.兄弟div：上面的margin-bottom和下面的div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

2.父子div： 如果父级div中没有border，padding，inline content，子级的div会一直向上找，
直到找到某个标签包括border padding inline content  中的其中一个，然后按此div进行margin
-->
</body>

 </html>

3.浮动 float

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .continer{

        border:1px solid red;

        width:300px;

    }

    .div1{

        width:100px;

        height:200px;

        background-color:yellow;

        float:left;

    }

    .div2{

        width:100px;

        height:200px;

        background-color:green;

        float:right;//浮动脱离文档流，后面的元素会填充进来，如果前面的元素也为浮动元素，会停在浮动元素后面

    }

    .div3{

        clear:both;

    }

    .div4{

        background-color:blue;

    }

    .clearfix:after{

        content:"";

        display:block;

        clear:both;/*清除左右浮动*/

    }

    </style>

</head>

<body>

<div class="continer clearfix">

    <div class="div1">box1</div>

    <div class="div2">box2</div>

    <!--<div class="div3"></div>-->

</div>

<div class="div4">box4</div>

</body>

</html>

4.定位 position

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>定位属性</title>

    <style>

    *{

        margin:0px;

    }

    .div1{

        width:200px;

        height:100px;

        background-color:yellow;

    }

    .div2{

        width:200px;

        height:100px;

        background-color:green;

        position:absolute;/*绝对定位脱离文档流，相对于已定位的祖先元素，如果祖先元素没有定位则相对于body元素*/

        /*position:relative;*//*相对定位，相对于自己原来的位置进行重新定位，不脱离文档流*/

        left:100px;

        top:100px;

    }

    .div3{

         width:100px;

         height:200px;

         background-color:red

    }

    .div4{

        width:200px;

        height:200px;

        background-color:blue;

    }

    .return{

        width:80px;

        height:80px;

        position:fixed;/*已窗口为参考点，固定定位*/

        bottom:50px;

        right:5px;

        color:green;

        text-align:center;

        line-height:80px;

        background-color:blue;

    }

    </style>

</head>

<body>

<div class="continer clearfix">

    <div class="div1">box1</div>

    <div class="div2">box2</div>

    <div class="div3">box3</div>

    <div class="div4">box4</div>

</div>

<div style="height:2000px;background-color:pink"></div>

<div class="return">返回顶部</div>

<!--仅使用margin属性布局绝对定位：margin-bottom，margin-right的值不再对文档流产生影响，因为元素已经脱离文档流

不管他的祖先元素有没有定位，都是以文档流中原来的位置偏移参照物-->

</body>

</html>

5.display属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width:50px;

            height:50px;

            background-color:yellow;

           /* display:inline;*/

        }

        p{

            width:50px;

            height:50px;

            background-color:red;

           /*display:inline*/

        }

        span{

            width:50px;

            height:50px;

            background-color:blue;

            display:inline-block;

        }

        a{

            width:50px;

            height:50px;

            background-color:green;

                        display:inline-block;

        }

    </style>

</head>

<body>

<div>div1</div>

<p>123</p>

<span>spannnnn</span>

<a href="#">abcaaaaa</a>

</body>

</html>

CSS布局方式的更多相关文章

  1. 细谈CSS布局方式

    一.CSS布局方式分类 [1].默认文档流方式:以默认的html元素的结构顺序显示 [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动.left对象向左浮动,而后面的内容流 ...

  2. 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法

    前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...

  3. CSS布局方式--inline-block 布局

    布局其实就是想办法怎样将一些元素横向的排列起来,纵向由于块级元素的存在会自动占据一行. inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行,而且使用 inline-bl ...

  4. css 布局方式

    布局方式 1 布局:设置元素在网页中的排列方式及显示效果 2 分类: 1 标准流布局(文档流,普通流,静态流) 是默认的布局方式 特点:将元素按照书写顺序及元素类型,从上至下,从左至右排列 2 浮动布 ...

  5. css布局方式总结

    ### 居中布局 ### 一.水平居中 * 要求:子元素于父元素水平居中且其(子元素与父元素)宽度均可变. ```` javacript <div class="parent" ...

  6. CSS 布局入门

    概述 Web 兴起之后,关于CSS的介绍和学习资料已经铺天盖地. 本文不涉及具体的CSS语法之类的,而是希望从初学者的角度,让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用. ...

  7. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  8. css Table布局：基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

  9. 还在为垂直居中苦恼？CSS 布局利器 flexbox 轻轻松松帮你搞定

    传统的 CSS 布局方式是基于盒模型(它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法),实现时依赖于 block, inline, table, position, float 这些属性, ...

随机推荐

  1. Reactjs之静态路由、动态路由以及Get传值以及获取

    1.新增知识点 /* react路由的配置: 1.找到官方文档 https://reacttraining.com/react-router/web/example/basic 2.安装 cnpm i ...

  2. nginx不记录指定文件类型日志

    1.指定记录文件日志记录的内容. vim /usr/local/nginx/conf/nginx.conf如下部分: log_format dd '$remote_addr $http_x_forwa ...

  3. 设置terminal 命令别名

    vi -/.bash_profile code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" ...

  4. delphi dbgrid数据导出为excel

    uses Excel2000,ComObj; procedure F_Form.Button1Click(Sender: TObject);var    myExcel:TExcel;    Int_ ...

  5. :成功配置 centos + nginx + .net core 2.0

    https://segmentfault.com/a/1190000010763523

  6. 【PyTorch】PyTorch中的梯度累加

    PyTorch中的梯度累加 使用PyTorch实现梯度累加变相扩大batch PyTorch中在反向传播前为什么要手动将梯度清零? - Pascal的回答 - 知乎 https://www.zhihu ...

  7. oracle 11g sqlplus和plsql developer 乱码解决方案

    ----------------------------------华丽的分隔符---------------------------------- 在cmd终端下运行            中文的话 ...

  8. HDU 1865 1sting （递推、大数）

    1sting Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  9. zabbix监控java

    参考: 官网: https://www.zabbix.com/documentation/4.0/manual/config/items/itemtypes/jmx_monitoring

  10. 【Linux 网络编程】常用套接字类型

    常用套接字类型<1>流式套接字(SOCK_STREAM)---TCP      提供面向连接的.可靠的传输服务,数据无差错,无重复的发送,      且按发送顺序接收.<2>数 ...