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. RabbitMQ官方教程五 Topic(GOLANG语言实现)

    在上一教程中,我们改进了日志记录系统. 我们没有使用只能进行虚拟广播的fanout交换器,而是使用直接交换器,并有可能选择性地接收日志. 尽管使用直接交换改进了我们的系统,但它仍然存在局限性-它不能基 ...

  2. 使用jmeter HTTP代理服务器录制APP脚本

    使用jmeter HTTP代理服务器录制APP脚本 步骤一.jemter设置 1.启动JMeter,双击运行jmeter.bat,启动jmeter jmeter运行主界面 2.添加线程组:右键测试计划 ...

  3. python基础篇（一）

    PYTHON基础篇(一) 变量 赋值 输入,输出和导入 A:输入 B:输出 C:导入 运算符 A:算数运算符 B:比较运算符 C:赋值运算符 D:位运算符 E:逻辑运算符 F:成员运算符 G:身份运算 ...

  4. 字段自动递增的数据库建表的SQL写法

    数据库建表的SQL写法如下: 数据库建表的SQL写法如下: create table dataC(  a int identity(1,2) primary key,  b varchar(20)) ...

  5. SCI-hub使用技巧(下载外文文献)

    下载外文文献方法指南: (1)首先查找需要下载文献的DOI (2)在Sci-Hub主页搜索框输入URL.DOI或者PMID. (3)点击open即可看见下载界面. 参考文献:https://mp.we ...

  6. [转帖]谷歌宣称首次实现量子优越性，IBM“不服”，中国同行咋看？

    谷歌宣称首次实现量子优越性,IBM“不服”,中国同行咋看? 投递人 itwriter 发布于 2019-10-24 15:46 评论(7) 有306人阅读 原文链接 [收藏] « » https:// ...

  7. python 2.7 环境配置

    原文地址:Python 2.7的安装(64位win10) Python 2.7.12 下载地址:https://www.python.org/downloads/ 安装路径D:\Program Fil ...

  8. ElasticSearch RestHighLevelClient 通用操作

    项目中使用到ElasticSearch作为搜索引擎.而ES的环境搭建自然是十分简单,且本身就适应于分布式环境,因此这块就不多赘述.而其本身特性和查询语句这篇博文不会介绍,如果有机会会深入介绍. ​ 所 ...

  9. mysql数据库语言分类

    MySQL的sql语言分类DML.DQL.DDL.DCL.   MySQL的sql语言分类DML.DQL.DDL.DCL. SQL语言一共分为4大类:数据定义语言DDL,数据操纵语言DML,数据查询语 ...

  10. 字典的学习2——参考Python编程从入门到实践

    遍历字典 1. 遍历所有键值对 eg1: user_0 = { 'username': 'efermi', 'first': 'enrico', 'last': 'fermi',}for key, v ...