06_CSS入门和高级技巧(4)
复习
CSS : 负责样式层,层叠式样式表cascading style sheet。CSS2.1,最新版本CSS3。
CSS选择器: 选择哪些元素加样式。基本选择3种:标签p、id选择器#id、class选择器.;高级选择器4种:后代选择器div p 、交集选择器div.haha 、并集选择器div,p 、通配符*
id选择器:全页面id唯一;
class选择器:同一个标签可以带多个class:
<p class=”para1 spec”></p>
class选择器不要求页面唯一
<p class=”para1 spec”></p>
<h3 class=”spec”></h3>
- 继承性:
哪些属性能继承:color、font-、text-、line-开头的。
不能继承的:background-color
、盒模型的属性、浮动、定位
body{
font-size:12px;
}
层叠性:
遇见冲突,听谁的。有一个非常严密的图。!important提升权重,要知道!important能提升什么,不能提升什么?比如不能影响就近原则:离得近的就是近的,远的写!important没用;不能把继承来的提升权重:选中了的就是选中了的,继承来的!important也无法干掉选中了的。文本属性:
font-weight:bold;
font-weight:700;
font-style:italic;
text-decoration:underline;
font-size:12px;
line-height:24px;
font-family:”Consolas”,”Microsoft Yahei”,”SimSun”;
font:12px/24px ”Consolas”,”Microsoft Yahei”,”SimSun”;
- 盒模型
width:200px; /*盒子内容的宽度*/
height:200px; /*盒子内容的高度*/
padding:10px; /*内边距*/
border:1px solid red;
margin:40px;
我们在这里补充强调一下:padding区域有背景颜色;并且现在的知识水平,你不能给padding
区域单独设置颜色;
padding: 10px 20px 30px 40px;
上、右、下、左
padding:10px 20px 30px;
上、左右、下
边框的三要素:
border-width:1px;
border-style:solid;
border-color:red;
还能继续拆:
border-top-style:dashed;
三要素的写法可以上右下左:
border-width:1px 2px 3px 4px;
- 浮动:我们还没有科学的介绍,一些性质还不知道,没关系作业已经能做了。因为浮动是干嘛的我们已经知道了:制作并排的。
标准文档流中元素分为两种:
block-level
: 能够设置宽高、不能并排,比如div、h、p、li、dt、dd
inline-level
: 不能设置宽高、能并排,比如span、a、b、u、i
浮动,就能让元素又能并排,又能设置宽高。
深入了解浮动的性质
1.浮动的元素脱离标准流,没有标准流的行块之分了
脱离标准流一共就3个方法:
浮动:
float:left;
绝对定位:
position:absolute;
固定定位:
position:fixed;
浮动的元素已经脱离了标准流,所以没有inline、block之分了。
span在标准流中一个经典的行内元素,但是浮动了,就可以不转块直接设置宽度、高度。
<span class="no1">1</span>
.no1{
float: left;
width: 300px;
height: 50px;
background-color: orange;
}
div在标准流中是一个经典的块级元素,不设置宽度在标准流中是自动撑满父亲的width。但是浮动了,就不自动撑满了,而是自动收缩了,收缩为内部文字的大小了:
2.依次贴边
左浮动:
父盒子的左边框内部 ← 老1 ← 老2 ← 老3 ← 老4
如果之前的兄弟已经不足以容纳自己,比如老4没有足够的空间并排了,那么将依次寻找老3、老2、老1、父亲的边框去贴:
2.2 依次贴边
左浮动:
父盒子的左边框内部 ← 老1 ← 老2 ← 老3 ← 老4
如果之前的兄弟已经不足以容纳自己,比如老4没有足够的空间并排了,那么将依次寻找老3、老2、老1、父亲的边框去贴:
但是不钻:
3.竖直方向上的margin塌陷现象消失
margin塌陷是标准流的性质,因为浮动脱标了,就没有这个事儿了。
4.让出了标准流
<div class="box1"></div> → 浮动
<div class="box2"></div> → 没有浮动
注意,这个性质没啥用,工作中制作“压盖”使用定位,而不是用这个浮动的小技巧。
橙色盒子浮动了,让出了标准流的位置,标准流的光标还在页面左上角,所以蓝色盒子就渲染在左上角,被橙色盒子压住了。
5.字围
清除浮动
1.父亲不能被浮动的儿子撑出高
下面的代码,no1、no2都浮动了,box就不能被儿子撑出高度:
<div class="box">
<p class="no1"></p>
<p class="no2"></p>
</div>
因为父亲只能被标准流的元素撑高。
2.治这个病的一个偏方
有一个属性叫做
overflow:hidden;
能够解决事情。
现在先来学习overflow:hidden;
的本意是什么
overflow是英语“溢出”的意思;hidden就是隐藏的意思。
这个属性的意思,就是让溢出边框的内容隐藏。
就如同橘子皮就是橘子皮,但是我们发现可以治感冒,就是世界上存在很多这样的事情,八竿子打不着的事儿,居然有联系。
overflow:hidden;
是用来隐藏掉溢出边框的内容的,是用来变魔术的。但是我们发现,overflow:hidden;
有神奇的别的用处,就是能够让父亲认识自己脱标的儿子,能够让父亲被自己脱标的儿子撑出高度。
<div class="box"> →不能被撑出高了,解决办法: overflow:hidden;
<p class="no1"></p> → 脱标了
<p class="no2"></p> → 脱标了
</div>
3.有高度的盒子能够管住自己内部的浮动元素
有高度的盒子,能够管住自己的内部的浮动元素,不会影响别人内部的浮动元素,也不会受别人影响。
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="box2">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
4.清除浮动方法1:clear:both;
我们发现,有高度的盒子可以管住自己的儿子,但是如果父盒子没有高度,那么序列就乱套了,第二个序列就去追随第一个序列了:
解决办法挺简单,就是给后面的盒子加上
clear:both;
clear就是清除意思,它的值可以是:
clear:left;
表示清除左浮动带来的影响
clear:right;
表示清除右浮动带来的影响
clear:both;
表示清除所有浮动带来的影响
这个东西不好用,原因是:
- box还是没有高
- margin失效
5.清除浮动方法2:隔墙
隔墙法是非常常用的,在网页中两个非常大的部分,我们总希望之间隔一堵墙,把两部分内部的浮动都关在里面,不要相互影响,小技巧就是margin依旧失效,可以用墙的高度来模拟间隔。
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="cl h20"></div>
<div class="box2">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
margin虽然失效,但是可以用小技巧来弥补,可以用墙的高来当做间隔。
但是盒子依然没有高。
6.清除浮动方法3:内墙法
cl就是clear:both;
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<div class="cl"></div>
</div>
<div class="box2">
<p>1</p>
<p>2</p>
<p>3</p>
<div class="cl"></div>
</div>
现在margin好用了,并且盒子也有高了,所有的事情都解决了!但是还是有问题:
HTML标签有点放置的太多了。这些标签页没有语义,看起来不爽。
7.清除浮动方法4:overflow:hidden;
<div class="box1"> → 这个盒子没高,就写上overflow:hidden;
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="box2"> → 这个盒子没高,就写上overflow:hidden;
<p>1</p>
<p>2</p>
<p>3</p>
</div>
总结:记住,清除浮动的方法有很多,但是很多都是在面试中有意义。工作中:
- 我们总喜欢给内部有浮动的父盒子加上overflow:hidden;
- 我们总喜欢在两个大部分之间隔外墙
<div class="header">
</div>
<div class="cl h18"></div>
<div class="content">
</div>
<div class="cl h18"></div>
<div class="footer">
</div>
06_CSS入门和高级技巧(4)的更多相关文章
- 03_CSS入门和高级技巧(1)
上节课知识的复习 插入图片,页面中能够插入的图片类型:jpg.jpeg.bmp.png.gif:不能的psd.fw. 语法: <img src="路径" alt=" ...
- (Dos)/BAT命令入门与高级技巧详解(转)
目录 第一章 批处理基础 第一节 常用批处理内部命令简介 1.REM 和 :: 2.ECHO 和 @ 3.PAUSE 4.ERRORLEVEL 5.TITLE 6.COLOR 7.mode 配置系统设 ...
- 10_CSS入门和高级技巧(8)
图片透明 先来复习一下盒子的透明问题: opacity:0.6; 介于0~1之间,为了让IE兼容,我们要使用IE自己的滤镜: filter:alpha(opacity=60); 盒子的透明,会让里面的 ...
- 07_CSS入门和高级技巧(5)
超级链接美化 1.伪类 同一个超级链接,根据用户的点击情况,有自己样式: 超级链接根据用户点选情况,有4种状态: a:link 没有访问的超级链接 a:visited 已经访问的超级链接 a:hove ...
- 08_CSS入门和高级技巧(6)
排查错误 Chrome浏览器的审查功能. 错误1:选择器写错了,压根没有选择上: 如果写了一个错误的选择器, <style type="text/css"> dvi p ...
- 09_CSS入门和高级技巧(7)
浏览器兼容问题 1.现在中国网民用什么浏览器? 中国流量最大的网站就是百度,百度在统计着每一个访问者的浏览器.地域.操作系统.分辨率等等信息. 百度流量研究院:http://tongji.baidu. ...
- 05_CSS入门和高级技巧(3)
上节课复习 !important不能影响就近原则,远的标签如果加上!important也干不过近的标签! !important不能影响继承权重是0,通过继承的标签加上!important也干不过直接选 ...
- 04_CSS入门和高级技巧(2)
上节课复习 HTML表格,table.tr.td(th):thead.tbody:caption. 一定要会根据图形,来写表格: <table border="1"> ...
- smarty半小时快速上手入门教程
http://www.jb51.net/article/56754.htm http://www.yiibai.com/smarty/smarty_functions.html http://www. ...
随机推荐
- ModuleNotFoundError: No module named 'sklearn.cross_validation'
本文为CSDN博主「不服输的南瓜」的原创文章,遵循 CC 4.0 BY-SA 版权协议 原文链接 ModuleNotFoundError: No module named 'sklearn.cross ...
- L14梯度消失、梯度爆炸
梯度消失.梯度爆炸以及Kaggle房价预测 梯度消失和梯度爆炸 考虑到环境因素的其他问题 Kaggle房价预测 梯度消失和梯度爆炸 深度模型有关数值稳定性的典型问题是消失(vanishing)和爆炸( ...
- stand up meeting 12-14
今日更新: 项目的refactor部分均已经基本完成.答题界面和结果展示界面与code hunters team项目的merge部分也已经完成. 当然在这其中我们也遇到了一个小问题,在背单词模块中的词 ...
- testlink的api
testlink可以做很多你想象得到的事情,如API测试参数管理,Excel导入导出,快速模板创建测试用例,集成Jenkins. TestLink API第三方库: TestLink-API-Pyth ...
- [php] 猴子偷桃
<?php /* 10:五只猴子采得一堆桃子,猴子彼此约定隔天早起后再分食. 不过,就在半夜里,一只猴子偷偷起来,把桃子均分成五堆后, 发现还多一个,它吃掉这桃子,并拿走了其中一堆.第二只猴子醒 ...
- EF-三种映射
更改实体的类名称,字段名称,来映射表名称,表字段. 1,用EF自带的特性方式: 直接加上特性,更新对应的类名,字段名以及引用类,字段名的相关地方 2,参考NHibernate建立一个EF自带的映射 ...
- python 进阶篇 python 的值传递
值传递和引用传递 值传递,通常就是拷贝参数的值,然后传递给函数里的新变量,这样,原变量和新变量之间互相独立,互不影响. 引用传递,通常是指把参数的引用传给新的变量,这样,原变量和新变量就会指向同一块内 ...
- 15分钟从零开始搭建支持10w+用户的生产环境(三)
上一篇文章介绍了这个架构中,选择MongoDB做为数据库的原因,及相关的安装操作. 原文地址:15分钟从零开始搭建支持10w+用户的生产环境(二) 三.WebServer 在SOA和gRPC大行其 ...
- curl的$post传递多维数组
php curl传数组的话只能传一维数组,如果想传多维数组:两个方法: 1.转换成json在传输 2. //通过curl模拟post的请求: function SendDataByCurl($url, ...
- bootstrop设置背景图片自适应屏幕
如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...