再战css
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的更多相关文章
- uoj #31. 【UR #2】猪猪侠再战括号序列 贪心
#31. [UR #2]猪猪侠再战括号序列 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/31 Descript ...
- A*搜索详解(2)——再战觐天宝匣
书接上文.在坦克寻径的,tank_way中,A*算法每一步搜索都是选择F值最小的节点,步步为营,使得寻径的结果是最优解.在这个过程中,查找最小F值的算法复杂度是O(n),这对于小地图没什么问题,但是对 ...
- [BZOJ 4350]括号序列再战猪猪侠 题解（区间DP）
[BZOJ 4350]括号序列再战猪猪侠 Description 括号序列与猪猪侠又大战了起来. 众所周知,括号序列是一个只有(和)组成的序列,我们称一个括号 序列S合法,当且仅当: 1.( )是一个 ...
- 学长小清新题表之UOJ 31.猪猪侠再战括号序列
学长小清新题表之UOJ 31.猪猪侠再战括号序列 题目描述 大家好我是来自百度贴吧的_叫我猪猪侠,英文名叫\(\_CallMeGGBond\). 我不曾上过大学,但这不影响我对离散数学.复杂性分析等领 ...
- 再谈CSS动画 - 说点不知道的（一）贝塞尔曲线
今天重新翻看<CSS 揭秘>"过渡与动画"一章,并把该章代码重新敲了一遍,代码托管在我的Github,在此总结一些心得. 动画的奥秘 在网页中添加动画的目的是让用户有更 ...
- 不要再纠结css/js/html有没有必要放在WEB-INF下了
原因 首先,css/js/html没有必要放在WEB-INF下. 最终这些会被原封不动的展现在客户端,所以访问安全根本就不会成为问题. jsp放在web-inf下,原因主要有两个 1. 远古时代的模式 ...
- 再探CSS 中 class 命名规范
一直以来我的CSS 的 class命名都是比较随意,有时采用驼峰式.有时采用下划线,好像没有什么统一的标准,想到什么英文单词就拿过来用,这对于自己瞎写的小项目无伤大雅,遇到冲突的问题可稍加调整改变即可 ...
- 。。。再战JQuery。。。
今天从学习JQurery的第一个函数开始!!! JQuery里面的show这个函数很不错,我很喜欢,他的使用方法如下:JQuery对象.show(speed,callback); speed你可以指定 ...
- linux 3.4.103 内核移植到 S3C6410 开发板 移植失败 (问题总结，日本再战！)
linux 3.4.103 内核移植到 S3C6410 开发板 这个星期差点儿就搭在这里面了,一開始感觉非常不值得,移植这样的浪费时间的事情.想立刻搞定,然后安安静静看书 & coding. ...
随机推荐
- CF1237D Balanced Playlist
思路:假设从第i首歌开始听,结束位置为j,那么从第i+1首歌开始听,结束位置一定不早于j.可以用反证法证明.想到这一点,就不难解决了. 实现: #include <bits/stdc++.h&g ...
- C/C++文件操作经验总结
最近在做一个从groundtruth_rect.txt中读取按行存储的矩形元素(x, y, w, h),文本存储的格式如下: 310,102,39,50 308,100,39,50 306,99,39 ...
- Winsock.简单UDP
PS:vs2017 编译C++代码 支持 XP:项目属性-->链接器-->系统-->需要的最小版本--> 输入 "5.1" 1.ZC:测试:c向s 发送长度 ...
- svn查看登录过的账号密码
直接下载:http://www.leapbeyond.com/ric/TSvnPD/
- mysql left join 右表数据不唯一的情况解决方法
mysql left join 右表数据不唯一的情况解决方法 <pre>member 表id username1 fdipzone2 terry member_login_log 表id ...
- PAT(B) 1074 宇宙无敌加法器（Java）
题目链接:1074 宇宙无敌加法器 (20 point(s)) 题目描述 地球人习惯使用十进制数,并且默认一个数字的每一位都是十进制的.而在 PAT 星人开挂的世界里,每个数字的每一位都是不同进制的, ...
- rabbitMQ 重试
rabbitMQ 重试机制 spring.rabbitmq.listener.simple.retry.max-attempts=5 最大重试次数spring.rabbitmq.listener.si ...
- 2019牛客多校八 H. How Many Schemes (AC自动机,树链剖分)
大意: 给定树, 每条边有一个字符集合, 给定$m$个模式串, $q$个询问$(u,v)$, 对于路径$(u,v)$中的所有边, 每条边从对应字符集合中取一个字符, 得到一个串$s$, 求$s$至少包 ...
- Luogu5400 CTS2019随机立方体（容斥原理）
考虑容斥,计算至少有k个极大数的概率.不妨设这k个数对应的格子依次为(k,k,k)……(1,1,1).那么某一维坐标<=k的格子会对这些格子是否会成为极大数产生影响.先将这样的所有格子和一个数集 ...
- VS.NET(C#)--2.6_ASP.NET服务器控件层次结构
ASP.NET服务器控件层次结构 语法 <asp:ControlType Id="ControlID" Rubat="Server" Property=& ...