12.CSS学习（三）
上一篇：11.CSS学习（二）
CSS学习
- 背景
-
- 背景图片
- 背景重复方式
- 背景定位
- 图标字体
- 厂商前缀
- 简写属性
- 列表
-
- 列表类型
- 列表图像
- 列表标记的位置
- 简写属性
- 表格的边框
- 文档流和浮动
-
- 利用float形成图片、文字环绕的原理
- float的属性规则
- 抗浮动
- 例子
- 项目布局
- 定位
-
- 定位属性
- 相对定位
- 绝对定位
- 固定定位
-
- 堆叠顺序
背景
背景色
格式： background-color:value
-
transparent，透明。元素的默认背景都是透明的。
body和html都不是整个页面，body由内容撑开，html由body撑开。
刚才我先给body设置上了背景颜色整个页面变了背景颜色，紧接着又给html设置了背景颜色整个页面颜色又变了。
为什么：
- 整个层次：body-> html->页面画布
- 最终整体的背景颜色由页面画布决定。
- 有html就用html的颜色、如果没有就用body的颜色，如果都没有页面最终的颜色由浏览器自己决定，但是一般的浏览器设置的都是白色。
-
还可以用其他我们学过的任何的颜色。
元素的背景在边框的外边界终止（默认的时候可以包含内容区、内边距、边框，不会延伸到外边距区域的）。
背景图片
格式：background-image:url(图片地址)
有时候我们会先设置背景颜色，然后设置背景图片。这个时候实际上背景图片是压在了背景颜色上面。
背景图和盒子大小没有关系， 背景图比元素大将会显示一部分超出的部分不会显示，如果背景图比元素小那默认的时候就是横向重复和纵向重复。
背景重复方式
格式：background-repeat:value
- repeat，默认值，横向平铺，纵向平铺。
- repeat-x，横向平铺
- repeat-y，纵向平铺
- no-repeat，不重复。
背景定位
格式： background-position:value
-
关键字
- left
- right
- top
- bottom
- center
通常使用两个参数，一个是横向的位置，一个是纵向的位置，但是你如果只写了一个那么另外一个默认就是center。
-
px，像素
相对于元素内边距的外边界来进行定位
对于横向来说：正数往右走，负数往左走。
对于纵向来说：正数往下走，负数往上走。
精灵图：（雪碧图、CSS Sprites），是一种网页中对于背景图片的处理方式，允许将一个页面中的多个小图片包含到一张大图中。
现在的网速越来越快，下载一张大图和小图所需的时间（这些图片要经过处理）差不多，但是服务器的请求连接数是有限制的。所以我们将小图放入到大图中然后只请求一次减少服务器的请求数量。
图标字体
图标字体和我们平常用的字体一样，都是设计师设计的。
-
定义图标字体
让浏览器可以从web服务器下载字体，这就意味着我们不比再依赖用户机器中的字体也可以确保用户看到设定的字体。
@font-face { font-family: 'iconfont';//自定义一个字体的名字，现在这个名字iconfont src: url('iconfont.woff2') format('woff2'),//引入的外部资源，可以是系统的字体，也可以是单独的字体。 url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'); } -
使用字体
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased;/*CSS3中让字体抗锯齿，让字体看起来更加清晰*/ -moz-osx-font-smoothing: grayscale; } -
挑选相应的图标并且获取编码
<span class="iconfont">3span>
厂商前缀
如果你在源代码中发现类似-webkit-开头的代码，这种东西叫厂商前缀、供应商前缀。浏览器厂商用它标记实验性或者专属的属性。
-moz-，firefox浏览器-ms-，微软。-o-，欧朋浏览器-webkit-，safari和chrome浏览器。
简写属性
background:image position repeat color
列表
每个列表项的外部都会给自己设置内边距或者外边距（为了缩进列表，让列表好看）
有40px的padding-left和16px的margin-top、margin-bottom。
但是，我们在做有些效果的时候不希望有margin、padding，所以我们需要给他设置为0。
CSS中的每个列表项目是块级元素再加上标记，但是前面的标记不参与文档布局。虽然不参与布局但是它会随着列表的移动而移动。
列表项会生成两个盒子（标记盒子和内容盒子）
列表类型
list-style-type:value
-
none，去掉列表项标记盒子中的标记。
-
其他的值，自己去百度。
decimal，disc。
列表图像
list-style-image:url('')
列表标记的位置
list-style-position来规定列表的记号是在标记盒子里面还是在内容盒子里面。
- outside，默认值，将标记放在标记盒子中。
- inside，标记放在内容盒子中。
简写属性
list-style:type image postion
表格的边框
格式： border-collapse:value，写在 table元素上，继承到td上
- separate，分离边框，边框之间有距离。
- collapse，单元格之间的边框没有间隔，他们之间的边框将合并或折叠在一起。
文档流和浮动
所谓的文档流在HTML中元素在计算布局、排版过程中的这种机制。
我们写代码的时候从上到下、从左到右。解释的代码的时候也从上到下、从做到右。但是其中分为行内元素（排列在一行上）、块状元素（自己独占一行）
浮动的出现就是为了打破正常文档流，从而实现文字环绕效果。浮动的本质就是为了文字环绕效果。
格式:float:value（不可以继承）
- none，无浮动。
- left，元素向左浮动（其他的内容包围在浮动元素的右边）
- right，元素向右浮动（其他的内容包围在浮动元素的左边）
利用float形成图片、文字环绕的原理
-
父类高度塌陷，让跟随的内容可以和浮动元素在一个水平线上。
DOCTYPE html> <html> <head> <style> img { float: left; } div { border:1px solid red; } style> head> <body> <div> <img src="./1117.jpg" /> div> <div> 闺怨少妇、清纯校花、妩媚教师、暴躁警花、善良护士，霸道总裁、高冷军官、刁蛮二代、无情杀手、可爱道姑、呆萌萝莉、优雅舞蹈家……这小小的四合院，住着一群绝色美女房客，而陈阳则是她们的房东。好吧，既然如此，保护美女房客这个光（yin）荣（dang）而艰（feng）巨（sao）的任务，只能落在我的头上了。——陈阳 div> <div> 闺怨少妇、清纯校花、妩媚教师、暴躁警花、善良护士，霸道总裁、高冷军官、刁蛮二代、无情杀手、可爱道姑、呆萌萝莉、优雅舞蹈家……这小小的四合院，住着一群绝色美女房客，而陈阳则是她们的房东。好吧，既然如此，保护美女房客这个光（yin）荣（dang）而艰（feng）巨（sao）的任务，只能落在我的头上了。——陈阳 div> body> html> -
块状元素和浮动元素会重叠，但是块状元素中的行框盒子和浮动元素不会重叠。
float的属性规则
-
浮动元素的位置，要考虑在它之前的块元素或浮动元素。
-
正常的元素在浮动元素之前，这个时候要考虑前面的正常元素的位置，浮动元素会从新的一行开始。
DOCTYPE html> <html> <head> <style> div{ width:300px; height:300px; } #one{ background-color:blue; } #two{ float:left; background-color:black; } style> head> <body> <div id="one">div> <div id="two">div> body> html> -
正常位置取值时不考虑在它的之前的浮动元素（该怎么样就怎么样，当浮动元素不存在）
DOCTYPE html> <html> <head> <style> div{ width:300px; height:300px; } #one{ float:left; background-color:blue; } #two{ width:310px; background-color:black; } style> head> <body> <div id="one">div> <div id="two">div> body> html>
-
-
不管什么元素浮动之后都会变成块级元素。
DOCTYPE html> <html> <head> <style> span { float: left; width: 100px; height: 100px; border: 1px solid green; } style> head> <body> <span>span> body> html> -
浮动元素的左边边界不能超过父元素的左边界，右边界不能超过父元素的右边界。顶边也不能超过父元素。
DOCTYPE html> <html> <head> <style> #f{ width:300px; height:300px; border:1px solid green; margin-top:100px; margin-left:100px; } .z{ width:160px; height:160px; border:1px solid red; float:left; } style> head> <body> <div id="f"> <div class="z">div> <div class="z">div> <div class="z">div> <div class="z">div> <div class="z">div> div> body> html> -
子元素浮动，父元素又没有设置高度，将会导致父元素塌陷。
DOCTYPE html> <html> <head> <style> #f { width: 300px; /* height:300px; */ border: 1px solid green; } .z { width: 160px; height: 160px; border: 1px solid red; float: left; } style> head> <body> <div id="f"> <div class="z">div> div> body> html> -
浮动元素的上、下外边距不会折叠。
-
在文件源码中前面的元素向左浮动，那后面的浮动元素的左外边界在前一个元素的右外边界的右侧。（横着排着）
后面的浮动元素不与前一个浮动元素在一行，那么将会另起一行，后面的浮动元素的上边距在前一个浮动元素的下边距的下边。
DOCTYPE html> <html> <head> <style> #f { width: 300px; /* height:300px; */ border: 1px solid green; } .z { width: 140px; height: 160px; border: 1px solid red; margin-top:10px; margin-bottom:10px; float: left; } style> head> <body> <div id="f"> <div class="z">div> <div class="z" style="height:500px;">div> <div class="z">div> <div class="z">div> <div class="z">div> <div class="z">div> div> body> html> -
浮动元素的顶边不能比前方任何一个浮动元素的顶边高。
DOCTYPE html> <html> <head> <style> #f{ width:500px; height:500px; border:1px solid green; } #f div{ width:200px; height:100px; border:1px solid green; } #z2,#z3{ float:left; } #z2{ height:150px !important; } #z1{ margin-bottom:20px; } style> head> <body> <div id="f"> <div id="z1">div> <div id="z2">div> <div id="z3">div> div> body> html> -
浮动元素的后代也浮动时，将扩大范围，将会包含浮动元素后代的元素。
DOCTYPE html> <html> <head> <style> #f{ float:left; width:500px; border:1px solid green; } #z1{ width:100px; height:100px; float:left; border:1px solid red; } style> head> <body> <div id="f"> <div id="z1">div> div> body> html>
抗浮动
格式：clear:value
clear是用来设置自身应该怎么样，而不是float的元素怎么样。使用了clear浮动依然存在并没有清除。
官方对他的解释：元素盒子的边不能和前面的浮动元素相邻。
-
none，允许元素像另外一个元素的任何一边浮动。
-
left，左侧抗浮动。
-
right，右侧抗浮动。
-
both，两侧抗浮动。（用的最多的）
-
防止父元素塌陷
-
方法一：
DOCTYPE html> <html> <head> <style> #f{ border:1px solid green; } .z{ width:100px; height:100px; border:1px solid green; float:left; } .clearboth{ clear:both; } style> head> <body> <div id="f"> <div class="z">div> <div class="z">div> <div class="z">div> <div class="clearboth">div> div> body> html>原理：
- 浮动元素不能超过父元素的顶边、左边、右边。
- 加上clear:both的div意思就是不允许前面的元素对自己造成任何影响。clear在应用于非浮动元素时，它将非浮动元素移动到所有相关浮动元素的下方。
- 父元素自然要把普通文档流的普通元素包裹来，进而导致父元素的高度撑起来了。
-
方法二：
DOCTYPE html> <html> <head> <style> #f { border: 1px solid green; } .z { width: 100px; height: 100px; border: 1px solid green; float: left; } /*::after是在#f的结束标签的前面插入内容，是通过CSS插入的*/ /*只用来处理修饰性的东西*/ #f::after { content: '';/*我在这里插入了一个空字符*/ display: block;/*::after插入的内容默认是行内元素*/ width:100%; height:3px; border:1px solid red; clear: both; } style> head> <body> <div id="f"> <div class="z">div> <div class="z">div> <div class="z">div> div> body> html>
-
例子
- 需求：两列效果，要求左侧宽度固定，右侧宽度不固定。
项目布局
目录结构：css、js、imgs都需要单独的放在单个的目录中。
页面布局的一些准备工作：
-
默认样式问题：
很多元素都会有默认样式，p、h、ul、li、body这些都有默认的样式。
- 很多元素都有自己的默认样式，并且我们还不需要。
- 默认样式在不同的浏览器呈现的效果也有可能不同，这就有可能导致页面显示不一致。
- 我们通常会引入一个文件，让这个文件将样式修正或者删除掉。（
normalize.css）- 保护了有价值的默认样式。并且如果浏览器之间有不同的样式效果它力求多个浏览器之间显示一致。
- 它修复了了常见的桌面端与移动端的一些浏览器BUG。
-
版心和通栏盒子
版心：PC端的网页通常是一个固定宽度并且水平居中的盒子，版心通常用来显示网页的主要内容，版心按照设计稿来，一般都在1100以上（1100~1300）
通栏盒子：从屏幕最左边到屏幕最右边。
万事开头难，第一次难免会难受。
我们写的HTML是普通文档流：float让块状元素重叠，但是行内元素不重叠。
定位
定位是指将元素移动到哪里，允许元素相对于某个基准来进行移动。
定位属性
格式：position:value
- static，默认值，正常的生成元素框。块级元素生成矩形框、行内元素生成一个或多个内联盒子并且随着父元素流动。
相对定位
poistion:relative，相对于元素自身本来的位置进行定位，也就是基准是自身本来的位置。
使用top、bottom、left、right来移动元素
- top，指定定位元素上边界相对于正常位置上边界的偏移位置。（正数向下、负数向上）
- left，指定定位元素左边界相对于正常位置左边界的偏移位置。（正数向右、负数向左）
- bottom，指定定位元素下边界相对于正常位置下边界的偏移位置。（正数向上、负数向下）
- right，指定定位元素右边界相对于正常位置右边界的偏移位置。（正数向左、负数向右）
注意：
- 相对定位之后该元素即使移动走，其本来的位置也不会被其他元素占据。
- left、right同时使用，left生效。top、bottom同时使用，top生效。
- relaitve移动的时候百分比是相对于包含的父元素计算的，而不是自身。
绝对定位
它的位置相对于容纳块来确定。
-
绝对定位的容纳块是position的值不是static的最近的祖辈元素。
最小权限原则：我们用的时候确实是会将祖辈元素postion的值设置为relative，这样做的原因是为了更好的去控制子元素，不让子元素随意跑（祖辈为relative的元素怎么动，子元素都会随着这个元素在动。）
-
如果没有祖辈元素，元素的容纳块是 初始容纳块。
初始容纳块可以理解为页面的第一屏。它是第一屏的窗口的大小。
-
绝对定位后生成的是一个块级元素。
DOCTYPE html> <html> <head> <style> body { margin: 0; height:1000px; width:2000px; } span{ position:absolute; width:100px; height:100px; border:1px solid green; } style> head> <body> <span>10010span> body> html> -
如果绝对定位元素中的元素浮动不会造成绝对定位元素的塌陷。
DOCTYPE html> <html> <head> <style> body { margin: 0; height:1000px; width:2000px; } div div{ float:left; width:100px; height:100px; background-color:yellow; } style> head> <body> <div style="border:10px solid blue;position:absolute"> <div>div> div> body> html> -
同时使用四个偏移属性来定位元素，但是width和height为auto时将会自动计算宽度和高度。
本元素的内容宽度 = 容纳块的宽度 -left -margin-left - border-left - padding-left -padding-right -border-right - margin-right -righthttps://docs.emmet.io/固定定位
position:static\relative\absolute\fixed相对于视口来进行定位。
DOCTYPE html> <html> <head> <style> body{ height:1000px; } div{ position:fixed; right:0; top:50%; margin-top:-150px; width:50px; height:300px; border:1px solid green; background-color:rgba(0,0,0,.6); } style> head> <body> <div>哈哈div> body> html>CSS中还有一个关于透明的属性
opacity指定了一个元素的透明度，当该属性的值被应用到某个元素上时，是将这个元素当成一个整体看待（它里面的内容、背景色、前景色、边框），所以这个元素和它包含的子元素都会具有和元素相同的透明度。opacity属性的值是从0~1的值，0为完全透明，1位完全不透明。
格式：
visibility:value -
visible，元素可见
- hidden，元素不可见。
__注意： __
- display:none和visibility:hidden的区别：display:none完全从文档中移除，对布局不会再有影响。但是visibility:hidden依然会影响布局。
堆叠顺序
从后到前是z轴。可以使用z-index来设置定位元素的z轴。
z-index:
-
auto，可以将auto当做0来处理。
元素一旦成为定位元素（不包括static），其
z-index就自动生效这个时候z-index的auto也就默认为0。DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; position:absolute; top:0; left:0; } style> head> <body> <div style="background-color:pink;">div> <div style="background-color:green;">div> body> html>如果当前的元素的层叠水平一致（都是经过定位的）、层叠顺序相同时，源代码后面的元素会覆盖前面的元素。如上例。
定位元素始终在非定位元素上。
DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; position:absolute; top:0; left:0; } style> head> <body> <div style="background-color:pink;">div> <div style="background-color:green;position:static;">div> body> html> -
数值，值为任何整数（正数或负数），值越大元素离我们越近，值越小元素离我们越远。
多个元素之间的z-index的值无需连续。
DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; position:absolute; top:0; left:0; } style> head> <body> <div style="background-color:pink;z-index:999;">div> <div style="background-color:green;z-index:-999;">div> body> html>
下一篇：13.CSS学习（四）
友情推荐：全栈大佬笔记 Android领域肥宅