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. adb（Andorid Debug Bridge）安装和使用

    以下是adb工具包最新2017Google官方版下载地址: ADB和Fastboot for Windows https://dl.google.com/android/repository/plat ...

  2. Git 和 SVN 存储方式的差异对比

    Git git 对于一个文件的修改存储的是一个快照,就是说针对文件1,修改之后,生成文件2,文件2中包含文件的1的内容,如果当文件1不存在,版本回退也就不管用了. SVN SVN 存储的是对文件的差异 ...

  3. rtsp向rtmp推流

    package com.awifi.video.media.test; import org.bytedeco.javacpp.avcodec; import org.bytedeco.javacv. ...

  4. Java面试 - 复制引用和复制对象的区别?

    复制引用:把原对象的地址赋给了一个新的引用变量,只要其中一个对象的属性发生变化,另一个对象的属性也随之发生变化. 复制对象:把原对象的内容赋给了一个新的对象,其中一个对象的属性发生变化,并不影响另一个 ...

  5. [CF9D]How Many Trees?_动态规划_树形dp_ntt

    How many trees? 题目链接:https://www.codeforces.com/contest/9/problem/D 数据范围:略. 题解: 水题. $f_{i,j}$表示$i$个节 ...

  6. 使用java类加载器，报异常java.nio.file.InvalidPathException

    String path = Label.class.getClassLoader().getResource("").getPath(); /F:/idea-Java/ImageD ...

  7. laravel框架视图中常用的逻辑结构forlese,foreach,ifelse等

    if 和else @if($name === 1) 这个数字是1 @else 这个数字非1 @endif switch @switch($name) @case(1) 变量name == 1 @bre ...

  8. 第五章 模块之 shtil 、 json / pickle、importlib、collections

    5.8 shtil 高级的 文件.文件夹.压缩包 处理模块 shutil.rmtree 删除目录 import shutilshutil.rmtree(path) shutil.move 重命名:移动 ...

  9. 初始NLTK

    NLTK官网:链接 Natural Language Toolkit NLTK corpora and lexical resources such as WordNet, along with a ...

  10. 算术 HDU - 6715 (莫比乌斯反演)

    大意: 给定$n,m$, 求$\sum\limits_{i=1}^n\sum\limits_{j=1}^m\mu(lcm(i,j))$ 首先有$\mu(lcm(i,j))=\mu(i)\mu(j)\m ...