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. Java进阶教程：使用Lombok提升开发效率

    Java进阶教程:使用Lombok提升开发效率 Lombok Lombok是一种Java™实用工具,可用来帮助开发人员消除Java的冗长代码,尤其是对于简单的Java对象(POJO).它通过注释实现这 ...

  2. Linux基础-08-进程控制

    1. 系统监视和进程控制工具—top和free 1) top命令的功能:top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. 2) ...

  3. Django出错Xadmin后台报list index out of range

    input_html = [ht for ht in super(AdminSplitDateTime, self).render(name, value, attrs).split('/>&l ...

  4. show processlist说明

    mysql> show processlist; 有时候输出太多,可以用下面的语句代替 mysql> select * from information_schema.processlis ...

  5. 『Python基础』第39节 函数的返回值

    1. 函数的返回值 ​ 一个函数就是封装一个功能, 这个功能一般都会有一个最终结果的. ​ 比如写一个登录的函数, 最终登录是否成功你总得告诉我一声吧? ​ 还有咱们之前也用过 len() 这个函数, ...

  6. Scala 类型参数

    介绍 类型参数是什么?类型参数其实就类似于Java中的泛型.先说说Java中的泛型是什么,比如我们有List a = new ArrayList(),接着a.add(1),没问题,a.add(&quo ...

  7. 从ftp获取文件并生成压缩包

    依赖 <dependency> <groupId>commons-net</groupId> <artifactId>commons-net</a ...

  8. ideaui安装破解、相关配置、JRebel破解

    前言: Ideaui 2019(官网 https://www.jetbrains.com/idea/?fromMenu) 安装软件就简单啦,下载选择路径就完事了,注意文件名全英文:   但是按照咱们传 ...

  9. MySql五大引擎的区别以及优劣之分

    五大引擎 一: MyISAM:在创建MyISAM的时候会出来三个默认的文件 1.tb_demo.frm,存储表定义:2.tb_demo.MYD,存储数据:3.tb_demo.MYI,存储索引. 因为M ...

  10. 谷歌chrome浏览器提示“喔唷 崩溃啦”的解决方案

    原因分析:有可能是注册列表被一些卫士类优化工具或杀毒软件优化了. 解决方案:1. 卸载谷歌浏览器. ①开始→控制面板→添加或删除程序→找到谷歌浏览器卸载(卸载时勾选删除数据) ② 进入注册列表删除谷歌 ...