再战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. ...
随机推荐
- 15、Vue CLI 3+tinymce 5富文本编辑器整合
富文本编辑器里大佬们都说tinymce NB! 插件安装 inymce官方提供了一个vue的组件tinymce-vue 如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,懒的注册或者 ...
- robot：循环遍历数据库查询结果是否满足要求
使用list类型变量@{}接收查询结果,再for循环遍历每行数据,取出需要比较的数值
- WPF 使用winform的webbrowser
首先要添加如下引用: WindowsFormsIntegration System.Drawing System.Windows.Forms 然后在xaml中添加引用 xmlns:winform=&q ...
- 使用 RedisDesktopManager 连接redis所需步骤
服务器开放了6379端口 redis默认配置是只允许本地连接,我们需要修改redis配置文件 配置文件找到 bind 127.0.0.1 这一行注释掉 在找到 protected-mode yes 修 ...
- npm安装10
https://www.cnblogs.com/zouke1220/p/9723191.html
- qt linux下自动检测U盘热插拔
如果用U盘来更新软件,需要先删除当前的可执行文件,但是如果删除之后,复制失败的话会导致后续没有文件可以运行了.一个方法是将新的可执行文件放到另一个目录中,当copy成功后修改linux的启动文件,然后 ...
- redhat与zlib兼容性问题？
今天在redhat 6.3 x64版本上安装了zlib,安装完后可以正常使用,就是发现gedit使用有点异常——无法启动,当时也没在意,但是后来重启电脑后出现桌面背景图片后就不弹出登陆窗口了,但是进命 ...
- 03 CSS听课笔记
CSS:页面美化和布局控制 1. 概念: Cascading Style Sheets 层叠样式表层叠:多个样式可以作用在同一个html的元素上,同时生效 2. 好处:(1)功能强大(2)将内容展示和 ...
- [转帖]InfiniBand, RDMA, iWARP, RoCE , CNA, FCoE, TOE, RDMA, iWARP, iSCSI等概念
InfiniBand, RDMA, iWARP, RoCE , CNA, FCoE, TOE, RDMA, iWARP, iSCSI等概念 2017-12-15 15:37:00 jhzh951753 ...
- noip2019集训测试赛（二十一）Problem B: 红蓝树
noip2019集训测试赛(二十一)Problem B: 红蓝树 Description 有一棵N个点,顶点标号为1到N的树.N−1条边中的第i条边连接顶点ai和bi.每条边在初始时被染成蓝色.高桥君 ...