CSS-02
15-浮动
浮动
浮动式css里面布局最多的一个属性,也是很重要的一个属性
float: 标识浮动的意思.他又四个值
none: 表示不浮动
left: 表示左浮动
right: 表示右浮动
看一个例子:
HTML结构:
<div class="box1"></div> <div class="box2"></div> <span>路飞学诚</span>
css样式
.box1{
width: 300px;
height: 300px;
background-color: red;
float:left;
}
.box2{
width: 400px;
height: 400px;
background-color: green;
float:right;
}
span{
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
我们会发现,三个元素并排显示,.box1和sapn因为是左浮动,紧挨着在一起,这种现象贴边, .box2盒子因为右浮动,所以紧靠着右边
那么浮动如果大家想学好: 一定要知道它的四大特性:
1,浮动的元素脱标
2,浮动的元素互相贴靠
3,浮动的元素由"字围"效果
4,收缩的效果
浮动元素脱标
脱标: 就是脱离了标准文档流
看列子
<div class="box1">小红<div> <div class="box2">小黄<div> <span>陈润</span> <span>陈润</span>
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: yellow;
}
span{
background-color: green;
float: left;
width: 300px;
height: 50px;
}
效果: 红色盒子压盖住了黄色的盒子,一行内的span标签竟然能够设置宽高了.
原因1: 小红设置了浮动.小黄没有设置浮动,小红脱离了标准文档流,其实就是它不再页面中占位置了,此时浏览器认为小黄时标准文档流中的第一个盒子.所以就渲染到了页面中的第一个位置上,这种现象,也有一种叫法,浮动元素"飘起来了",但我不建议大家这样叫,.
原因2:所有的标签一旦设置浮动,就能够并排,并且都不区分行内,块状元素,都能够设置宽高
浮动元素互相贴靠
看例子
html结构
<div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div>
css样式
.box1{
width: 100px;
height: 400px;
float: left;
background-color: red;
}
.box2{
width: 150px;
height: 450px;
float: left;
background-color: yellow;
}
.box3{
width: 300px;
height: 300px;
float: left;
background-color: green;
}
效果发现:
如果父元素由足够的空间,那么3哥紧靠着2哥,2哥紧靠着1哥,1哥靠着边.
如果没有足够的空间,那么就会靠着1哥,如果在没有足够的空间靠着1哥,自己往边靠
浮动元素字围效果
html结构
<div> <img src="./images/企业1.png" alt=""> </div> <p> 123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 </p>
css结构:
*{
padding: 0;
margin: 0;
}
div{
float: left;
}
p{
background-color: #666;
}
效果发现:所谓字围效果,当div浮动,p不浮动,div遮盖住了p,div的层级提高,但是p中的文字不会被遮盖,此时就形成了字围效果
浮动元素紧凑效果
收缩:一个浮动元素.如果没有设置width,那么就自动收缩为文字的宽度
html结构:
<div> alex </div>
css样式
div{
float: left;
background-color:red;
}
大家一定要谨记: 关于浮动,我们初期一定要遵循一个原则,永远不是一个盒子单独浮动,要浮动就要一起浮动,一定要清除浮动
为什么要清楚浮动
在页面布局的时候，每个结构中的父元素的高度，我们一般不会设置。（为什么？）
大家想，如果我第一版的页面的写完了，感觉非常爽，突然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白，肯定是去每个地方加内容，改图片，然后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是肯定的。
看一个效果：
html效果：
<div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div>
css样式
*{
padding: 0;
margin: 0;
}
.father{
width: 1126px;
/*子元素浮动 父盒子一般不设置高度*/
/*出现这种问题，我们要清除浮动带来影响*/
/*height: 300px;*/
}
.box1{
width: 200px;
height: 500px;
float: left;
background-color: red;
}
.box2{
width: 300px;
height: 200px;
float: left;
background-color: green;
}
.box3{
width: 400px;
float: left;
height: 100px;
background-color: blue;
}
.father2{
width: 1126px;
height: 600px;
background-color: purple;
}
效果发现:如果不给父盒子一个高度,那么浮动子元素是不会填充父盒子的高度,那么此时,father2的盒子就会跑到第一个位置上,影响页面布局
那么我们知道,浮动元素确实能实现我们页面元素并排的效果,这是他的好处,同时他还带了个页面布局极大的错乱,所以我们要清除浮动
一下有四种清楚浮动的方法:
1,给父盒子设置高度
2,clear: both
3,伪元素清除法
4,overflow: hidden
给父盒子设置高度
这个使用不灵活,一般会再常用页面中固定高度的,并且子元素并排显示的布局,比如: 导航栏
clear: both
clear: 意思就是清除的意思
有三个值:
left: 当前元素左边不允许有浮动元素
right: 当前元素右边不允许有浮动元素
both: 当前元素左右两边不允许有浮动元素
给浮动元素的后面加一个空的div,并且该元素不浮动,然后这只clear: both
html结构:
<div> <ul> <li>Python</li> <li>web</li> <li>linux</li> <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both 清除别人对我的浮动影响--> <!-- 内墙法 --> <!-- 无缘无故加了div元素 结构冗余 --> <div class="clear"></div> </ul> </div> <div class="box"> </div>
css结构
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 400px;
}
div ul li {
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box{
width: 200px;
height: 100px;
background-color: yellow;
}
.clear{
clear: both;
}
伪元素清除法(常用)
给浮动子元素的父盒子,也就是不浮动元素,添加一个clearfix的类,然后设置
.clearfix:after{
/*必须要写这三句话*/
content: '.';
clear: both;
display: block;
}
新浪首页推荐伪元素清除的写法
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
overflow: hidden(常用)
overflow属性规定当内容溢出元素框时发生的事情
说明:
这个属性定义溢出元素内容区的内容会如何处理,如果值为scroll,不论时候需要,用户代理都会提供一种滚轮机制,因此,有可能即使元素框中可以放下所有内容也会出现滚动条
有五个值:
visible:默认值,内容不会被修建,会呈现再元素框之外
hidden: 内容会被修剪,并且其余内容是不可见的.
scroll: 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto: 如果内容被修剪,则浏览器会显示滚动条以便查看其余内容
inherit; 规定应该从父元素继承overflow属性的值
逐渐演变成了overflow: hidden清除法.
其实它是一个BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522
16-margin的用法
margin塌陷问题
当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素再垂直方向上margin里面有坑
html结构
<div class="father"> <div class="box1"></div> <div class="box2"></div> </div>
css样式
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
overflow: hidden;
border: 1px solid gray;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px;}
.box2{
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
}
当给两个标准流下兄弟盒子设置垂直方向上的margin时,那么以较大的为标准,那么我们称这种想象叫塌陷.没法解决,我们称这种技巧叫"奇淫技巧".记住这种想象,再布局垂直方向盒子的时候主要margin的用法
当我们给两个标准留下的兄弟盒子设置浮动之后,就不会出现margin塌陷的问题
margin: 0 auto
div{
width: 780px;
height: 50px;
background-color: red;
/*水平居中盒子*/
margin: 0px auto;
/*水平居中文字*/
text-align: center;
}
当一个div元素设置margin: 0 auto;时就会居中盒子,那么我们知道margin: 0 auto;表示上下外边距离为0,左右为auto的距离,那么auto时什么意思呢?
设置margin-left: auto;我们发现盒子尽可能的右边有很大距离,没有什么意义.当设置margin-right: auto;我们发现盒子尽可能的左边有很大的距离.当两条语句并存的时候,我们发现盒子尽可能大的左右两边有很大的距离,此时我们就发现盒子居中了.
另外如果给盒子设置浮动,那么margin: 0 auto失效
使用margin: 0 auto;注意点:
1,使用margin: 0 auto;水平居中盒子必须有width,要有明确width,文字水平居中使用text-alighn: center
2,只有标准流下的盒子 才使用margin: 0 auto;
当一个盒子浮动了,固定定位,绝对定位,margin: 0 auto;不能用了
3,margin: 0 auto;居中盒子.而不是居中文本,文字水平居中使用text-align: center
另外大家一定要知道margin属性时描述兄弟盒子的关系,而padding描述的时父子盒子的关系
善于使用父亲的padding,而不是margin
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
}
.xiongda{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 30px;
}
因为父亲没有border,那么儿子margin-top实际上踹的时"流"踹的时行,所以父亲掉下来了,一旦给父亲一个border发现就好了
呢么问题来了,我们不能在页面无缘无故的给盒子加一个border,所以此时的解决方案只有一种,就是用父亲的padding,让盒子挤下来
17-文本属性和字体属性
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
属性值：none | center | left | right | justify
文本颜色
color属性
文本首行缩进
text-indent 属性规定元素首行缩进的距离，单位建议使用em
文本修饰
text-decoration属性规定文本修饰的样式
属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)
行高
line-height就是行高的意思，指的就是一行的高度。
字体属性
字体大小
font-size表示设置字体大小，如果设置成inherit表示继承父元素的字体大小值。
字体粗细
font-weight表示设置字体的粗细
属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）
字体系列
font-weight表示设置字体的粗细
属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）
行高 line-height
针对单行文本垂直居中
公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。
针对多行文本垂直居中
行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
font-family介绍
使用font-family注意几点：
1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
那么就会变成宋体
页面中，中文我们只使用： 微软雅黑、宋体、黑体。
如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman
2.为了防止用户电脑里面，没有微软雅黑这个字体。
就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。
3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，
就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体";
4.所有的中文字体，都有英语别名，
我们也要知道： 微软雅黑的英语别名：
font-family: "Microsoft YaHei";
宋体的英语别名： font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高可以用百分比，表示字号的百分之多少。
一般来说，都是大于100%的，因为行高一定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来，比如： font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”
18-定位
定位有三种
1,相对定位 2,绝对定位 3,固定定位
相对定位
相对定位: 相对于自己原来的位置定位
现象和使用:
1,如果对当前元素仅仅设置了相对定位,那么标准流的盒子什么区别.
2,设置相对定位之后,我们才可以使用四个方向的属性: top, bottom, left, right
特性:
1,不脱标(不脱离标准流)
2,形象分离
3,老家留坑
所以说相对定位,在页面中没有什么太大的作用,影响我们页面布局,我们不要使用相对定位来做压盖效果
用途:
1,微调元素
2,做绝对定位的参考(父相子绝)绝对定位会说到此内容
参考点:
自己原来的位置做参考点
绝对定位
特性:
1,脱标2,做遮盖效果,提成了层级,设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高.
参考点(重点):
一: 单独一个绝对定位的盒子
1,当我们使用top属性描述的时候,是以页面的左上角(跟浏览器的左上角区分) 为参考点来调整位置
2,当我使用bottom属性描述的时候,是以首屏页面左下角为参考点来调整位置
二: 以父辈盒子作为参考点
1,父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,他可以是爷爷, 曾爷爷
2,如果父亲设置了定位,那么以父亲为参考点,那么如果父亲,没有设置定位,那么以父辈元素设置定位的参看点
3,不仅仅是父相子绝,父绝子绝,父固子绝,都是以父辈元素为参考点
注意了: 父绝子绝,没有实战意义,做站的时候不会出现父绝字绝,因为绝对定位脱离标准流,影响页面布局,相反,父相子绝哎我们页面布局中,是常用的布局方案.因为父亲设置相对定位,不脱离标准流,子元素设置相对定位,仅仅是在当前父辈元素内调整该元素的位置.
还要注意,绝对定位的盒子无视父辈的padding
作用: 页面布局常见的"父相子绝",一定要会!
绝对定位的盒子居中
当做公式记下来:
1 *{
2 padding: 0;
3 margin: 0;
4 }
5 .box{
6 width: 100%;
7 height: 69px;
8 background: #000;
9 }
10 .box .c{
11 width: 960px;
12 height: 69px;
13 background-color: pink;
14 /*margin: 0 auto;*/
15 position: relative;
16 left: 50%;
17 margin-left: -480px;
18
19 /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
20 }
固定定位
固定当前的元素不会随着页面滚动而滚动
特性:
1, 脱标 2,遮盖,提升层级 3,固定不变
参考点:
设置笃定定位,用top表述,那么是以浏览器的左上角为参考点,如果用bottom描述,那么是以浏览器的左下角为参考点
作用: 1,返回顶部栏2,固定导航栏,3小广告
19-z-index
这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
浙公网安备 33010602011771号