1.盒模型的属性：

　　1.padding

        .box{

            width: 200px;

            height: 200px;

            background-color: red;

            /*顺时针 上右下左*/

            padding: 20px 30px 40px 50px;

        }

　　2.border

　　　　三要素：线性的宽度、线性的样式、颜色

        .box{

            width: 200px;

            height: 200px;

            background-color: red;

            /*周围设置*/

            border: 5px solid green;

            /*分别对每个边进行设置*/

            border-left: 5px solid green;

            border-right: 1px dotted yellow;

            border-top: 5px double purple;

            border-bottom: 1px dashed purple;

            /*选中一个边设置属性*/

            border-left-style: solid;

            border-left-width: 1px;

            border-left-color: green;

            /*选中一个属性进行设计，也是顺时针*/

            border-width: 5px 10px;

            border-color: green yellow;

            border-style: solid double;

        }

　　　　制作圆角：border-redius：xx px;(就是相当于以xxpx为半径切下去一个1/4圆)

　　3.margin

　　　　　　在标准文档流下：margin的水平不会出现任何问题，但是垂直方向上margin会出现塌陷问题

　　　　　　在父盒子里有一个子盒子时，设置子盒子的margin-top属性，并不是他与父盒子之间的距离，如果想做到和父盒子之间有距离，需要将父盒子设置成浮动效果。

2.display显示

　　在标准文档流下

　　属性：

　　　　block 块级标签

　　　　　　　　独占一行，可以设置宽高，如果不设置宽，默认是父盒子宽度的100%

　　　　inline 行内标签

　　　　　　　　在一行显示，不可以设置宽高，根据内容来显示宽高

　　　　inline-block 行内块

　　　　　　　　在一行内显示，可以设置宽高

　　　　none  不显示  隐藏  不在文档上占位置

　visibility：hidden；隐藏 在文档上占位置

3.浮动：脱离了标准文档流

　　　　作用好处：是元素实现并排（布局），就在页面上不占位置

　　　　浮动带来的问题：子盒子浮动，不在页面上占位置，如果父盒子不设置高度，那么撑不起父盒子的高度，页面出现紊乱

　　　　清除浮动带来的问题：

　　　　　　1.个父盒子设置固定的高度（但是后期不好维护）

　　　　　　2.clear:both;

　　　　　　　　　　给浮动元素的最后面，加一个空的块级标签（标准文档流下的块级标签）

　　　　　　　　　　给当前这个标签设置一个clearfix类名，设置该标签属性clear:both;（但是代码冗余）

        .clearfix{

            clear: both;

        }

    </style>

</head>

<body>

    <div class="father">

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

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

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

        <!--内墙法-->

        <div class="clearfix"></div>

    </div>

    <div class="father2"></div>

　　　　　　3.clearfix：after{

　　　　　　　　content:".";

　　　　　　　　display:block;

　　　　　　　　height:0;

　　　　　　　　visibility:hidden;

　　　　　　　　clear:both;

}

　　　　　　4.overfow:hidden;

1em=当前标签下的字体大小

再战css的更多相关文章

  1. uoj #31. 【UR #2】猪猪侠再战括号序列 贪心

    #31. [UR #2]猪猪侠再战括号序列 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/31 Descript ...

  2. A*搜索详解(2)——再战觐天宝匣

    书接上文.在坦克寻径的,tank_way中,A*算法每一步搜索都是选择F值最小的节点,步步为营,使得寻径的结果是最优解.在这个过程中,查找最小F值的算法复杂度是O(n),这对于小地图没什么问题,但是对 ...

  3. [BZOJ 4350]括号序列再战猪猪侠 题解（区间DP）

    [BZOJ 4350]括号序列再战猪猪侠 Description 括号序列与猪猪侠又大战了起来. 众所周知,括号序列是一个只有(和)组成的序列,我们称一个括号 序列S合法,当且仅当: 1.( )是一个 ...

  4. 学长小清新题表之UOJ 31.猪猪侠再战括号序列

    学长小清新题表之UOJ 31.猪猪侠再战括号序列 题目描述 大家好我是来自百度贴吧的_叫我猪猪侠,英文名叫\(\_CallMeGGBond\). 我不曾上过大学,但这不影响我对离散数学.复杂性分析等领 ...

  5. 再谈CSS动画 - 说点不知道的（一）贝塞尔曲线

    今天重新翻看<CSS 揭秘>"过渡与动画"一章,并把该章代码重新敲了一遍,代码托管在我的Github,在此总结一些心得. 动画的奥秘 在网页中添加动画的目的是让用户有更 ...

  6. 不要再纠结css/js/html有没有必要放在WEB-INF下了

    原因 首先,css/js/html没有必要放在WEB-INF下. 最终这些会被原封不动的展现在客户端,所以访问安全根本就不会成为问题. jsp放在web-inf下,原因主要有两个 1. 远古时代的模式 ...

  7. 再探CSS 中 class 命名规范

    一直以来我的CSS 的 class命名都是比较随意,有时采用驼峰式.有时采用下划线,好像没有什么统一的标准,想到什么英文单词就拿过来用,这对于自己瞎写的小项目无伤大雅,遇到冲突的问题可稍加调整改变即可 ...

  8. 。。。再战JQuery。。。

    今天从学习JQurery的第一个函数开始!!! JQuery里面的show这个函数很不错,我很喜欢,他的使用方法如下:JQuery对象.show(speed,callback); speed你可以指定 ...

  9. linux 3.4.103 内核移植到 S3C6410 开发板 移植失败 (问题总结，日本再战！)

    linux 3.4.103 内核移植到 S3C6410 开发板 这个星期差点儿就搭在这里面了,一開始感觉非常不值得,移植这样的浪费时间的事情.想立刻搞定,然后安安静静看书 & coding. ...

随机推荐

  1. CTF 资源

    1.<CTF 工具集>包括web工具.渗透环境.隐形工具.逆向工具.漏洞扫描工具.sql注入工具.暴力破解工具.加解密工具等等. 参考地址:https://www.ctftools.com ...

  2. 通过iis启动服务，会产生C:/inetpub/logs/logsFile产生大量的日志，定期清理

    [转]https://www.cnblogs.com/Martianhh/p/5312495.html bat文件内容如下,加入到计划任务执行 :: 清理IIS日志文件 :: 备份MySql数据库 @ ...

  3. 【Axure8】利用中继器（Repeater）实现表格数据的增删改

    利用Repeater实现对Table数据的增删改操作. 先拖入必需的控件:rectangle.text field.droplist.button.table.repeater.具体信息如图. 为方便 ...

  4. Raspberry Pi 3B I2C 问题

    刚刚接触树莓派,的确很适合用来学习,资料多而且很规范,开发者多,平台统一,很多问题别人都已经解决.

  5. 知识点-Spark小节

    Spark处理字符串日期的max和min的方式Spark处理数据存储到Hive的方式Spark处理新增列的方式map和udf.functionsSpark处理行转列pivot的使用Python 3.5 ...

  6. C#、.NET、ASP.NET之间的关系

    一.前言 这是个人的笔记,在博客园已经有不少大佬已经写过了.但我自己就想留点笔记在属于我自己的博客.所以大佬忽略就行,不喜勿碰.谢谢!!! 二.个人笔记 C# 全称(C sharp),它是微软公司发布 ...

  7. Linux DHCP 服务器配置与管理

    一.环境介绍: 运行软件:VMware Workstation Pro 14 系统环境:CentOS-7-x86_64-1810 二.操作配置: 1.DHCP 服务器搭建 1)安装DHCP yum i ...

  8. vmware linux 硬盘空间不足时增加硬盘并挂载

    不同的版本的vmware在设置界面中可能稍有不同,基本是一致的. 还有一种方式是扩展,这里没有记录,扩展时需要在虚拟机关机状态下. 1.选择在vmware中点击设置并打开,将光标定位在hard Dis ...

  9. Cookies和Sessions

    Cookie和Session 为什么会有cookie和session? 由于http协议是无状态的 无法记住用户是谁,cookie主要是在浏览器上记录客户的状态,session主要是用来在服务端记录客 ...

  10. Linux 实现回收站功能脚本

    #!/bin/bash function z-trash() { # 判断参数是否为空 if [ ! $1 ] then echo "z-trash error: file name of ...