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. Data - 深入浅出学统计 - 下篇

    本文是已读书籍的内容摘要,少部分有轻微改动,但不影响原文表达. :以漫画形式来讲解最基本的统计概念和方法. ISBN: 9787121299636 https://book.douban.com/su ...

  2. iOS-Xib获取view尺寸的问题

    用xib创建的视图,我们一般要在控制器中获取对应的view尺寸,但经常我们没法获取到,或者获取的不准 如果通过xib加载出来的view尺寸是不正确的, 在xib中这个view不管你怎么设置都是治标不治 ...

  3. 方法重载overload与方法重写overwrite

    方法重载overload: 在同一个类中,出现相同的方法名,与返回值无关,参数列表不同:1参数的个数不同 2参数类型不同 在调用方法时,java虚拟机会通过参数列表来区分不同同名的方法 方法重写ove ...

  4. Linux 缺少 mime.types 文件 mailcap

    问题描述: 一个项目当中使用的是 ossfs 挂载的一个 oss,在系统上传附件时,比如图片或视频时, 它的头信息为,application/octet-stream,上传后直接为二进制文件,访问的话 ...

  5. [转帖]libev与libuv的区别

    libev与libuv的区别 https://www.cnblogs.com/charlesblc/p/6341280.html 参考: http://blog.csdn.net/w616589292 ...

  6. SQLServer分页查询方法整理以及批量插入操作SqlBulkCopy

    分页查询 通用方法:sqlserver 2005 + ROW_NUMBER() OVER()方式: ; TOP NOT IN方式 : ID FROM TripDetail ORDER BY ID) O ...

  7. Python循环的基本使用（for in、while）

    Python的循环有两种: 一种是for-in 循环:主要用于遍历tuple.list; 一种是while循环:只要条件满足,就不断循环,条件不满足时退出循环. #!/usr/bin/python # ...

  8. 字符串char vchar性能对比补充

    Value CHAR(4) Storage Required VARCHAR(4) Storage Required '' '    ' 4 bytes '' 1 byte 'ab' 'ab  ' 4 ...

  9. django修改表数据结构后报错的解决办法

    1.进入数据库删除app之前创建的表,如果删除有关联的表报错的话可以先删除其他表然后再删除因关联关系删除不了的表 2.删除django_migrations表中对应的app记录,删除命令delete ...

  10. PAT(B) 1043 输出PATest（Java）统计

    题目链接:1043 输出PATest (20 point(s)) 题目描述 给定一个长度不超过 10​4​​ 的.仅由英文字母构成的字符串.请将字符重新调整顺序,按 PATestPATest- 这样的 ...