第二part——CSS。
CSS:Cascading Style Sheet,层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS 将网页内容和显示样式进行分离,提高了显示功能。
01-CSS属性:字体属性和文本属性
1、CSS的单位
html默认单位px,可以省略。
CSS中的单位是必须要写的。
1.1 绝对单位
1 in
=2.54cm
=25.4mm
=72pt
=6pc
。
1.2 相对单位
px
:像素
em
:印刷单位相当于12个点
%
:百分比,相对周围的文字的大小
2、font字体属性
css样式中,常见的字体属性有以下几种:
p{
font-size: 50px; /*字体大小*/
line-height: 30px; /*行高*/
font-family: 幼圆,黑体; /*字体类型:如果没有幼圆就显示黑体,没有黑体就显示默认*/
font-style: italic ; /*italic表示斜体,normal表示不倾斜*/
font-weight: bold; /*粗体*/
font-variant: small-caps; /*小写变大写*/
}
3、让单行文本垂直居中
vertical-align: middle;
属性
vertical-align
属性可用于指定行内元素(inline)、行内块元素(inline-block)、表格的单元格(table-cell)的垂直对齐方式。主要是用于图片、表格、文本的对齐。
4、字号、行高、字体三大属性
(1)字号: font-size:14px;
(2)行高: line-height:24px;
(3)字体: font-family:"宋体";(font-family就是“字体”,family是“家庭”的意思)
是否加粗属性以及上面这三个属性,我们可以连写:(是否加粗、字号 font-size、行高 line-height、字体 font-family)
格式: font: 加粗 字号/行高/ 字体
注:连写至少要有字号和字体,否则连写是不生效的(相当于没有这一行代码)。
4.1 字体属性
(1)网页中不是所有字体都能用,因为这个字体要看用户的电脑里面装没装,比如你设置:
font-family: "华文彩云";
上方代码中,如果用户的 Windows 电脑里面没有这个字体,那么就会变成宋体。
页面中,中文我们一般使用:微软雅黑、宋体、黑体。英文使用:Arial、Times New Roman。页面中如果需要其他的字体,就需要单独安装字体,或者切图。
(2)为了防止用户电脑里,没有微软雅黑这个字体。就要用英语的逗号,提供备选字体。如下:(可以备选多个)
font-family: "微软雅黑","宋体";
上方代码表示:如果用户电脑里没有安装微软雅黑字体,那么就是宋体。
(3)我们须将英语字体放在最前面,这样所有的中文,就不能匹配英语字体,就自动的变为后面的中文字体:
font-family: "Times New Roman","微软雅黑","宋体";
上方代码的意思是,英文会采用Times New Roman字体,而中文会采用微软雅黑字体(因为Times New Roman字体并不针对中文,所以中文会采用后面的微软雅黑)。比如说,对于smyhvae哈哈哈
这段文字,smyhvae
会采用Times New Roman字体,而哈哈哈
会采用微软雅黑字体。
可是,如果我们把中文字体写在前面:(错误写法)
font-family: "微软雅黑","Times New Roman","宋体";
上方代码会导致,中文和英文都会采用微软雅黑字体。
(4)所有的中文字体,都有英语别名。
微软雅黑的英语别名: font-family: "Microsoft YaHei";
宋体的英语别名: font-family: "SimSun";
于是,当我们把字号、行高、字体这三个属性合二为一时,也可以写成:
font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
(5)行高可以用百分比,表示字号的百分之多少。
一般来说,百分比都是大于100%的,因为行高一定要大于字号。
比如说, font:12px/200% “宋体”
等价于font:12px/24px “宋体”
。200%
可以理解成word里面的2倍行高。
反过来, font:16px/48px “宋体”;
等价于font:16px/300% “宋体”
。
4.2 字体加粗属性
在设置字体是否加粗时,属性值既可以填写normal
、bold
这样的加粗字体,也可以直接填写100至900这样的数字。normal
的值相当于400,bold
的值相当于700。
5、文本属性
-
letter-spacing: 0.5cm ;
单个字母之间的间距 -
word-spacing: 1cm;
单词之间的间距 -
text-decoration: none;
字体修饰:none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线 -
text-transform: lowercase;
单词字体大小写。uppercase大写、lowercase小写 -
color:red;
字体颜色 -
text-align: center;
在当前容器中的对齐方式。属性值可以是:left、right、center(在当前容器的中间)、justify -
text-transform: lowercase;
单词的字体大小写。属性值可以是:uppercase
(单词大写)、lowercase
(单词小写)、capitalize
(每个单词的首字母大写)
6、overflow属性:超出范围的内容要怎么处理
overflow
属性的属性值可以是:
-
visible
:默认值。多余的内容不剪切也不添加滚动条,会全部显示出来。 -
hidden
:不显示超过对象尺寸的内容。 -
auto
:如果内容不超出,则不显示滚动条;如果内容超出,则显示滚动条。 -
scroll
:Windows 平台下,无论内容是否超出,总是显示滚动条。Mac 平台下,和auto
属性相同。
7、鼠标的属性 cursor
-
auto
:默认值。浏览器根据当前情况自动确定鼠标光标类型。 -
pointer
:IE6.0,竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 -
hand
:和pointer
的作用一样:竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
02-CSS属性:背景属性
background 的常见背景属性
css2.1 中,常见的背景属性有以下几种:(经常用到,要记住)
-
background-color:#ff99ff;
设置元素的背景颜色。 -
background-image:url(images/2.gif);
将图像设置为背景。 -
background-repeat: no-repeat;
设置背景图片是否重复及如何重复,默认平铺满。(重要)-
no-repeat
不要平铺; -
repeat-x
横向平铺; -
repeat-y
纵向平铺。
-
-
background-position:center top;
设置背景图片在当前容器中的位置。 -
background-attachment:scroll;
设置背景图片是否跟着滚动条一起移动。 属性值可以是:scroll
(与fixed属性相反,默认属性)、fixed
(背景就会被固定住,不会被滚动条滚走)。 -
另外还有一个综合属性叫做
background
,它的作用是:将上面的多个属性写在一个声明中。
CSS3 中,新增了一些background属性:
-
background-origin
-
background-clip 背景裁切
-
background-size 调整尺寸
-
多重背景
1、background-color:背景颜色的表示方法
CSS2.1 中,颜色的表示方法有三种:单词、rgb表示法、十六进制表示法。
CSS3 中,有一种新的表示颜色的方式:RGBA或者HSLA。RGBA、HSLA可应用于所有使用颜色的地方。下面分别介绍。
(1)用英语单词表示
能够用英语单词来表述的颜色,都是简单颜色,比如red、green、blue、orange、gray等。代码举例:
background-color: red;
(2)RGB 表示法
RGB 表示三原色“红”red、“绿”green、“蓝”blue。
光学显示器中,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。r、g、b的值,每个值的取值范围0~255,一共256个值。
比如红色:background-color: rgb(255,0,0);
黑色:background-color: rgb(0,0,0);
颜色可以叠加,比如黄色就是红色和绿色的叠加:background-color: rgb(255,255,0);
(3)RGBA 表示法
background-color: rgba(0, 0, 255, 0.3); border: 30px solid rgba(0, 255, 0, 0.3);
代码解释:
-
RGBA 即:Red 红、Green 绿、Blue 蓝、Alpha 透明度。
-
R、G、B 的取值范围是:0~255;透明度的取值范围是 0~1。
RGB色彩模式:
-
自然界中绝大部分颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得,这就是人们常说的三原色原理。
-
RGB三原色也叫加色模式,这是因为当我们把不同光的波长加到一起的时候,可以得到不同的混合色。例:红+绿=黄色,红+蓝=紫色,绿+蓝=青。
-
RGB各有256级(0-255)亮度,256级的RGB色彩总共能组合出约1678万种色彩,即256×256×256=16777216。
在数字视频中,对RGB三基色各进行8位编码就构成了大约1678万种颜色,这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
(4)十六进制表示法
比如红色:
background-color: #ff0000;
所有用#
开头的色值,都是16进制的。
这里,我们就要学会16进制与10进制之间的转换。下面举几个例子。
问:16进制中的28等于10进制的多少? 答:2*16+8 = 40。
16进制中的af等于10进制的多少? 答:10 * 16 + 15 = 175
以此类推:
-
#ff0000等于rgb(255,0,0)。
-
background-color: #123456;
等价于background-color: rgb(18,52,86);
十六进制可以简化为3位,所有#aabbcc的形式,能够简化为#abc。
(4)HSLA 表示法
举例: background-color: hsla(240,50%,50%,0.4);
解释:
-
H
色调,取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。 -
S
饱和度,取值范围 0%~100%。值越大,越鲜艳。 -
L
亮度,取值范围 0%~100%。亮度最大时为白色,最小时为黑色。 -
A
透明度,取值范围 0~1。
关于设置透明度的其他方式:
(1)opacity: 0.3;
会将整个盒子及子盒子设置透明度。也就是说,当盒子设置半透明的时候,会影响里面的子盒子。
(2)background: transparent;
可以单独设置透明度,但设置的是完全透明(不可调节透明度)。
2、background-repeat
属性
background-repeat:no-repeat;
设置背景图片是否重复及如何重复,默认平铺满。属性值可以是:
-
no-repeat
(不要平铺) -
repeat-x
(横向平铺) -
repeat-y
(纵向平铺)
3、background-position属性
background-position
属性指的是背景定位属性。公式如下:在描述属性值的时候,有两种方式:用像素描述、用单词描述。下面分别介绍。
(1)用像素值描述属性值:
格式如下:
background-position:向右偏移量 向下偏移量;
属性值可以是正数,也可以是负数。比如:100px 200px
、-50px -120px
。
(2)用单词描述属性值:
格式如下:
background-position: 描述左右的词 描述上下的词;
-
描述左右的词:left、center、right
-
描述上下的词:top 、center、bottom
比如说,right center
表示将图片放到右边的中间;center center
表示将图片放到正中间。
比如说,bottom
表示图片的底边和父亲底边贴齐(好好理解)。
3、background-attachment 属性
background-attachment:scroll;
设置背景图片是否固定。属性值可以是:
-
fixed
(背景就会被固定住,不会被滚动条滚走)。 -
scroll
(与fixed属性相反,默认属性)
4、background 综合属性
background属性和border一样,是一个综合属性,可以将多个属性写在一起。
举例1:
background:red url(1.jpg) no-repeat 100px 100px fixed;
等价于:
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
5、backgroud-size属性:背景尺寸
(1)宽、高的具体数值
background-size: 500px 500px;
(2)宽高的百分比(相对于容器的大小)
background-size: 50% 50%; // 如果两个属性值相同,可以简写成:background-size: 50%;
background-size: 100% auto; //这个属性可以自己试验一下。
(3)cover:图片始终填充满容器,且保证长宽比不变。图片如果有超出部分,则超出部分会被隐藏。
background-size: cover;
(4)contain:将图片完整地显示在容器中,且保证长宽比不变。可能会导致容器的部分区域为空白。
background-size: contain;
这里我们对属性值 cover
和 contain
进行再次强调:
-
cover
:图片始终填充满容器,且保证长宽比不变。图片如果有超出部分,则超出部分会被隐藏。 -
contain
:将图片完整地显示在容器中,且保证长宽比不变。可能会导致容器的部分区域留白。
6、背景原点:background-origin
属性
控制背景从什么地方开始显示。
(1)从 padding-box 内边距开始显示背景图
background-origin: padding-box; //默认值
padding:内边距
(2)从 border-box 边框开始显示背景图
background-origin: border-box;
(3)从 content-box 内容区域开始显示背景图
background-origin: content-box;
7、backgroud-clip属性
设置元素的背景(背景图片或颜色)是否延伸到边框下面
属性值可以是:
-
border-box
超出 border-box 的部分,将裁剪掉 -
padding-box
超出 padding-box 的部分,将裁剪掉 -
content-box
超出 content-box 的部分,将裁剪掉
8、同时设置多个背景
我们可以给一个盒子同时设置多个背景,用以逗号隔开即可。可用于自适应局。
9、渐变:background-image
渐变分为:
-
线性渐变:沿着某条直线朝一个方向产生渐变效果。
-
径向渐变:从一个中心点开始沿着四周产生渐变效果。
-
重复渐变。
(1)线性渐变
background-image: linear-gradient(方向, 起始颜色, 终止颜色);
方向可以是:to left
、to right
、to top
、to bottom
、角度30deg
(指的是顺时针方向30°)。
(2)径向渐变
background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
中心点的位置可以是:at left right center bottom top。如果以像素为单位,则中心点参照的是盒子的左上角。
10、clip-path:裁剪出元素的部分区域做展示
clip-path
属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。
虽然clip-path
不是背景属性,但这个属性非常强大,但往往会结合背景属性一起使用,达到一些效果。
clip-path
属性的好处是,即使做了任何裁剪,容器的占位大小是不变的。比如上方代码中,容器的占位大小一直都是 320px * 320px。这样的话,也方便我们做一些动画效果。
03-CSS样式表和选择器
为什么需要css呢,html不可以吗?
HTML 的缺陷:
-
不能够适应多种设备
-
要求浏览器必须智能化足够庞大
-
数据和显示没有分开
-
功能不够强大
CSS 优点:
-
使数据和显示分开
-
降低网络流量
-
使整个网站视觉效果一致
-
使开发效率提高了(耦合性降低,一个人负责写 html,一个人负责写 css)
比如说,有一个样式需要在一百个页面上显示,如果是 html 来实现,那要写一百遍,现在有了 css,只要写一遍。现在,html 只提供数据和一些控件,完全交给 css 提供各种各样的样式。
1、CSS语法
语法格式:(其实就是键值对)
选择器{ 属性名: 属性值; 属性名: 属性值; }
-
选择器代表页面上的某类元素,选择器后一定是大括号。
-
属性名后必须用冒号隔开,属性值后用分号(最后一个属性可以不用分号,但最好还是加上分号)。
-
冒号和属性值之间可以留一个空格(编程习惯的经验)。
-
如果一个属性有多个值的话,那么多个值用空格隔开。
2、CSS注释
CSS 只有/* */
这种注释,没有//
这种注释。而且注释要写在<style>
标签里面才算生效。
3、CSS 的一些简单常见的属性
(1)字体颜色:(c)
color:red;
color 属性的值,可以是英语单词,比如 red、blue、yellow 等等;也可以是 rgb、十六进制。
(2)字号大小:(fos)
font-size:40px;
font 就是“字体”,size 就是“尺寸”。px 是“像素”。单位必须加,不加不行。
(3)背景颜色:(bgc)
background-color: blue;
background 就是“背景”。
(4)加粗:(fwb)
font-weight: bold;
font 是“字体” weight 是“重量”的意思,bold 粗。
(5)不加粗:(fwn)
font-weight: normal;
normal 就是正常的意思。
(6)斜体:(fsi)
font-style: italic;
italic 就是“斜体”。
(7)不斜体:(fsn)
font-style: normal;
(8)下划线:(tdu)
text-decoration: underline;
decoration 就是“装饰”的意思。
(9)没有下划线:(tdn)
text-decoration:none;
4、CSS的书写方式
1.行内样式:在某个特定的标签里采用 style 属性。范围只针对此标签。
2.内嵌样式(内联样式):在页面的 head 标签里里采用<style>
标签。范围针对此页面。
3.外链样式:引入外部样式表 CSS 文件。这种引入方式又分为两种:
3.1 采用<link>
标签。例如:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
3.2 采用 import 导入,必须写在<style>
标签中。然后用类似于@import url(a.css) ;
这种方式导入。
4.1 行内样式
<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>
4.2 内嵌样式表
在 head 标签中加入<style>
标签,对多个标签进行统一修改,范围针对此页面。
该方式可以对单个页面的样式进行统一设置,但对于局部不够灵活。
4.3 外部样式表
引入样式表文件的方式又分为两种:
-
(1)采用
<link>
标签。例如:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
-
(2)采用 import,必须写在
<style>
标签中,并且必须是第一句。例如:@import url(a.css) ;
注:<link>
标签的 rel 属性有两种值:
-
stylesheet
:定义的样式表 -
alternate stylesheet
:候选的样式表
5、CSS 的四种基本选择器
CSS 选择器:就是指定 CSS 要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。
CSS 的选择器分为两大类:基本选择器和扩展选择器。
5.1 基本选择器:
-
标签选择器:针对一类标签
-
ID 选择器:针对某一个特定的标签使用
-
类选择器:针对你想要的所有标签使用
-
通用选择器(通配符):针对所有的标签都适用(不建议使用)
5.1.1 标签选择器:选择器的名字代表 html 页面上的标签
标签选择器,选择的是页面上所有这种类型的标签,描述“共性”。
p{ font-size:14px; }
上方选择器的意思是说:所有的<p>
标签里的内容都将显示 14 号字体。
【总结】
(1)所有的标签,都可以是选择器。比如 ul、li、label、dt、dl、input。
(2)无论这个标签藏的多深,一定能够被选择上。
(3)选择的所有,而不是一个。
5.1.2 ID选择器:规定用#定义
针对某一个特定的标签来使用,只能使用一次。css 中的 ID 选择器以”#”来定义。
#mytitle{ border:3px dashed green; }
id 选择器的选择符是“#”。
任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字,可以任取,但是:
-
(1)只能有字母、数字、下划线。
-
(2)必须以字母开头。
-
(3)不能和标签同名。比如 id 不能叫做 body、img、a。
另外,特别强调的是:HTML 页面,不能出现相同的 id,哪怕他们不是一个类型。
5.1.3 类选择器:规定用圆点.
来定义
针对你想要的所有标签使用。css 中用.
来表示类。
.one{ width:800px; }
和 id 非常相似,任何的标签都可以携带 id 属性和 class 属性。class 属性的特点:
-
特性 1:类选择器可以被多种标签使用。
-
特性 2:同一个标签可以使用多个类选择器。用空格隔开。
<h3 class="teshu zhongyao">我是一个h3啊</h3>
注:
(1)不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同完成这个标签的样式。
(2)每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。
问题:到底用 id 还是用 class?
答案:尽可能的用 class,除非极特殊的情况可以用 id。
原因:id 是 js 用的。也就是说,js 要通过 id 属性得到标签,所以 css 层面尽量不用 id,要不然 js 就很别扭。另一层面,我们会认为一个有 id 的元素,有动态效果。
类上样式,id 上行为
★ 上面这三种选择器的区别:
-
标签选择器针对的是页面上的一类标签。
-
ID 选择器是只针对特定的标签(一个),ID 是此标签在此页面上的唯一标识。
-
类选择器可以被多种标签使用。
6、CSS的几种高级选择器
高级选择器:
-
后代选择器:用空格隔开
-
交集选择器:选择器之间紧密相连
-
并集选择器(分组选择器):用逗号隔开
-
伪类选择器
6.1 后代选择器: 定义的时候用空格隔开
对于E F
这种格式,表示所有属于 E 元素后代的 F 元素,有这个样式。空格就表示后代。
后代选择器,就是一种平衡:共性、特性的平衡。当要把某一个部分的所有的什么,进行样式改变,就要想到后代选择器。
后代选择器,描述的是祖先结构。
<style type="text/css">
.div1 p {
color: red;
}
</style>
.div1 p
表示.div1
的后代所有的p
。
上方代码的意思是说:定义了<h3>
标签中的<b>
标签中的<i>
标签的样式。
同理:h3 和 b 和 i 标签不一定是连续紧挨着的,只要保持一个后代的关联即可。
6.2 交集选择器:定义的时候紧密相连
定义交集选择器的时候,两个选择器之间紧密相连。一般是以标签名开头,比如div.haha
,再比如p.special
。
如果后一个选择器是类选择器,则写为div.special
;如果后一个选择器 id 选择器,则写为div#special
。
h3.special {
color: red;
}
注意,交集选择器没有空格。
所以,没有空格的div.red
(交集选择器)和有空格的div .red
(后代选择器)不是一个意思。
6.3 并集选择器
三种基本选择器都可以放进来。
p,h1,.title1,#one {
color: red;
}
04-CSS选择器:伪类
1、伪类
同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
比如div是属于box类,这一点很明确,就是属于box类。但是a属于什么类?不明确。因为需要看用户点击前是什么状态,点击后是什么状态。所以,就叫做“伪类”。
伪类选择器分为静态伪类和动态伪类两种。
(1)静态伪类:只能用于超链接的样式。如下:
-
:link
超链接点击之前 -
:visited
链接被访问过之后
PS:以上两种样式,只能用于超链接。
(2)动态伪类:针对所有标签都适用的样式。如下:
-
:hover
“悬停”:鼠标放到标签上的时候 -
:active
“激活”: 鼠标点击标签,但是不松手时。 -
:focus
是某个标签获得焦点时的样式(比如某个输入框获得焦点)
2、超链接a标签
2.1 超链接a标签有4种伪类(即对应四种状态)
-
:link
“链接”:超链接点击之前 -
:visited
“访问过的”:链接被访问过之后 -
:hover
“悬停”:鼠标放到标签上的时候 -
:active
“激活”: 鼠标点击标签,但是不松手时。
在css中,这四种状态必须按照固定的顺序写(“爱恨准则”:love hate。必须先爱,后恨):
a:link 、a:visited 、a:hover 、a:active
a:link
、a:visited
这两个伪类,要么同时写,要么同时不写。如果只写a
属性和a:link
属性,不规范。
2.2 超链接的美化
a{}
和a:link{}
的区别:
-
a{}
定义的样式针对所有的超链接(包括锚点) -
a:link{}
定义的样式针对所有写了href属性的超链接(不包括锚点)
05-CSS样式表的继承性和层叠性
1、CSS的继承性
-
关于文字样式的属性,都具有继承性。这些属性包括:color、 text-开头的、line-开头的、font-开头的。
-
关于盒子、定位、布局的属性,都不能继承。
2、CSS的层叠性
层叠性:计算权重,就是css处理冲突的能力。
当多个选择器,选择上了某个元素的时候,要按照如下顺序统计权重:
-
id 选择器
-
类选择器、属性选择器、伪类选择器
-
标签选择器、伪元素选择器
因为对于相同方式的样式表,其选择器排序的优先级为:ID选择器 > 类选择器 > 标签选择器
(1)计算权重
统计各个选择器的数量,优先级高的胜出。
(2)权重相同时
第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后,因此以第二个样式为准。
如果大家的权重相同,那么就采用就近原则:谁描述的近,听谁的。
3、CSS样式表的冲突的总结
-
1、对于相同的选择器(比如同样都是类选择器),其样式表排序:行级样式 > 内嵌样式表 > 外部样式表(就近原则)
-
2、对于相同类型的样式表(比如同样都是内部样式表),其选择器排序:ID选择器 > 类选择器 > 标签选择器
-
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
4、!important标记:优先级最高
k:v !important;
(1)!important提升的是一个属性,而不是一个选择器
(2)!important无法提升继承的权重,该是0还是0
(3)!important不影响就近原则
如果大家都是继承来的,按理说应该按照“就近原则”,那么important能否影响就近原则呢? 答案是:不影响。远的,永远是远的。不能给远的写一个important,干掉近的。
06-CSS盒模型详解
盒子模型,英文即box model。无论是div、span、还是a都是盒子。但是,图片、表单元素一律看作是文本,它们并不是盒子。因为一张图片里并不能放东西,它自己就是自己的内容。
1、盒子中的区域
一个盒子中主要的属性就5个:width、height、padding、border、margin。
-
width和height:内容的宽度、高度(不是盒子的宽度、高度)。
-
padding:内边距。
-
border:边框。
-
margin:外边距。
CSS盒模型和IE盒模型的区别:
-
在 标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
-
IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度。
<body>
标签也有margin
2、认识padding
2.1 padding区域也有颜色
padding就是内边距。css2.1前提下,padding的区域有背景颜色,并且背景颜色一定和内容区域的相同。也就是说,background-color将填充所有border以内的区域。
2.2 padding有四个方向
padding是4个方向的,所以我们能够分别描述4个方向的padding。
方法有两种,第一种写小属性;第二种写综合属性,用空格隔开。
(1)小属性的写法:
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
(2)综合属性的写法:(上、右、下、左)(顺时针方向,用空格隔开。margin的道理也是一样的)
padding:30px 20px 40px 100px;
如果写了四个值,则顺序为:上、右、下、左。
如果只写了三个值,则顺序为:上、右和左、下。
如果只写了两个值,则顺序为:上和下、左和右。
(3)用小属性层叠大属性。
padding: 20px;
padding-left: 30px;
如果顺序反过来,那么第一行的小属性无效,因为被第二行的大属性层叠掉了。
padding-left: 30px;
padding: 20px;
3、认识border
border就是边框。边框有三个要素:像素(粗细)、线型、颜色。
.div1{
width: 10px;
height: 10px;
border: 2px solid red;
}
颜色如果不写,默认是黑色。另外两个属性如果不写,则无法显示边框。
3.1 border-style
`border:10px ridge red;`
3.2 border拆分
border属性是能够被拆开的,有两大种拆开的方式:
-
(1)按三要素拆开:border-width、border-style、border-color。(一个border属性是由三个小属性综合而成的)
-
(2)按方向拆开:border-top、border-right、border-bottom、border-left。
现在我们明白了:一个border属性,是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值,那么就是上右下左的顺序。
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;
(1)按三要素拆:
border-width:10px; //边框宽度
border-style:solid; //线型
border-color:red; //颜色。
等价于:
border:10px solid red;
(2)按方向来拆:
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
等价于:
border:10px solid red;
(3)按三要素和方向来拆:(就是把每个方向的,每个要素拆开。3*4 = 12)
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
等价于:
border:10px solid red;
3、border-image属性
border-image: url(.img.png) 30 round;
07-浮动
1、标准文档流
宏观地讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个“流”,必须从上而下,像“织毛衣”。而设计软件,想往哪里画个东西,都能画。
1.1 标准文档流的特性
(1)空白折叠现象:
无论多少个空格、换行、tab,都会折叠为一个空格。
(2)高矮不齐,底边对齐
(3)自动换行,一行写不满,换行写。
1.2 行内元素和块级元素
1.2.1区别:
行内元素:
-
与其他行内元素并排;
-
不能设置宽、高。默认的宽度,就是文字的宽度。
块级元素:
-
霸占一行,不能与其他任何元素并列;
-
能接受宽、高。如果不设置宽度,那么宽度将默认变为父亲的100%。
1.2.2 分类
从HTML的角度来讲,标签分为:
-
文本级标签:p、span、a、b、i、u、em。
-
容器级标签:div、h系列、li、dt、dd。
现在,从CSS的角度讲,CSS的分类和上面的很像,就p不一样:
-
行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级,但是是个块级元素。
-
块级元素:所有的容器级标签都是块级元素,还有p标签。
1.2.3 行内元素和块级元素的相互转换
(1)块级元素转换为行内元素:
一旦,给一个块级元素(比如div)设置:display: inline;
那么,这个标签将立即变为行内元素,此时它和一个span无异。inline就是“行内”。也就是说:
-
此时这个div不能设置宽度、高度;
-
此时这个div可以和别人并排了。
(2)行内元素转换为块级元素:
一旦给一个行内元素(比如span)设置:display: block;
那么,这个标签将立即变为块级元素,此时它和一个div无异。block”是“块”的意思。也就是说:
-
此时这个span能够设置宽度、高度
-
此时这个span必须霸占一行了,别人无法和他并排
-
如果不设置宽度,将撑满父亲
2、脱离标准流
标准流里面的限制非常多,导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高,那该怎么办呢?办法是:移民!脱离标准流!
css中一共有三种手段,使一个元素脱离标准文档流:
-
(1)浮动
-
(2)绝对定位
-
(3)固定定位
2.1 浮动的性质
性质1:浮动的元素脱标
脱标即脱离标准流。
一旦一个元素浮动了,那么,将能够并排了,并且能够设置宽高了。无论它原来是个div还是个span。
性质2:浮动的元素互相贴靠
性质3:浮动的元素有“字围”效果
标准流中的文字不会被浮动的盒子遮挡住。
性质4:收缩
收缩:一个浮动的元素,如果没有设置width,那么将自动收缩为内容的宽度(这点非常像行内元素)。
2.2 浮动的清除
方法1:给浮动元素的祖先元素加高度
如果一个元素要浮动,那么它的祖先元素一定要有高度。有高度的盒子,才能关住浮动。
方法2:clear:both
clear就是清除,both指的是左浮动、右浮动都要清除。clear:both
的意思就是:不允许左侧和右侧有浮动对象。
这种方法有一个非常大的、致命的问题,它所在的标签,margin属性失效了。
方法3:隔墙法
上面这个例子中,为了防止第二个div贴靠到第一个div,我们可以在这两个div中间用一个新的div隔开,然后给这个新的div设置clear: both;
属性;同时,既然这个新的div无法设置margin属性,我们可以给它设置height,以达到margin的效果(曲线救国)。这便是隔墙法。
内墙法:
方法4:overflow:hidden;
overflow即“溢出”, hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义:所有溢出边框的内容,都要隐藏掉。
3、浏览器兼容问题
兼容性1(微型盒子)
兼容性的第一条:IE6不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大。即:IE 6不支持微型盒子。
解决办法很简单,就是将盒子的字号大小,设置为小于盒子的高,比如,如果盒子的高为5px,那就把font-size设置为0px(0px < 5px)。
只要给css属性之前,加上下划线,这个属性就是IE6的专有属性。
于是乎,为了解决微型盒子(即height小于12px)的问题,正确写法:(注意不要忘记下划线)
height: 10px;
_font-size:0;
兼容性2
兼容性的第二条:IE6不支持用overflow:hidden;
来清除浮动。
4、margin
margin塌陷/margin重叠
标准文档流中,竖直方向的margin不叠加,取较大的值**作为margin(水平方向的margin是可以叠加的,即水平方向没有塌陷现象)。
后面还有一堆,太复杂了,等我实际敲代码的时候再说叭。 内容太多了,换一节继续码字。