一. 元素类型
1.1 元素类型的划分方式
- 块级元素,行内级元素 (按元素的显示类型划分)
- 块级元素
- block-level-elements
- 独占父元素整行
- 可以设置宽高
- 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等
- 行内级元素
- inline-level-elements
- 多个行内级元素可以在同一行显示
- 不可以随意设置宽高
- 比如a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video、audio等
- 块级元素
- 替换元素,非替换元素 (浏览器是否会替换掉某些元素)
- 替换元素
- replaced elements
- 元素本身没有实际内容,但是浏览器会根据元素的属性动态绝对元素的显示内容
- 比如img、input、iframe、video、embed、canvas、audio、object等
- 非替换元素
- non-replaced elements
- 和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
- 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label等
- 替换元素
1.2 元素类型的总结
image.png
-
块级元素的特点: 块级元素都是非替换元素,独占父元素的整行,可以任意设置宽高
-
行内非替换元素的特点:可以和其他元素在同一行,但是不能设置宽高
-
行内替换元素的特点:可以和其他元素在同一行,能设置宽高
1.3 CSS属性 --- display
-
display有以下几个常用取值
- block: 让元素显示为块级元素
- inline: 让元素显示为行内级元素
- inline-block: 让元素同时具有块级元素和行内级元素的特点
- none:让元素不显示
-
display其他的不常用的取值,等同于某些HTML元素
- table: <table> 一个block-level的表格
- inline-table: <table> 一个inline-level的表格
- table-row: <tr>
- table-row-group: <tbody>
- table-header-group: <thead>
- table-footer-group: <tfoot>
- table-cell: <td>,<th> 一个单元格
- table-caption: <caption> 表格的标题
- list-item : <li>
1.4 CSS属性 --- visibility
visibility可以控制元素的可见性,有两个常见的取值
- visible: 默认值,让元素可见
- hidden: 让元素隐藏不可见
visibility:hidden和display:none都是让元素隐藏,有什么不同?
- visiblity:hidden是让元素隐藏,但是元素依旧占据原来的位置,就像隐身一样
- display:none是真正的消失,元素会不占据原来的位置,旁边的元素会顶替它的元素,就像消失一般
1.5 CSS属性 --- overflow
overflow属性用于控制元素内容溢出的处理方式,常用取值如下
- visible:超出部分仍然可见,这是默认值
- hidden:超出部分直接裁剪
- scroll
- 溢出部分会裁剪,但是可以通过滚动条来查看裁剪内容
- 滚动条占据位置
- 不管元素内容超不超出元素本身,都会出现滚动条
- auto
- 溢出部分会裁剪,但是可以通过滚动条来查看裁剪内容
- 滚动条占据位置
- 会根据元素内容是否移溢出动态决定是否出现滚动条
注意:
- overflow是设置水平,垂直两个方向的溢出处理行为
- 如果要设置单方向的,可以通过overflow-x,和overflow-y来分别设置,但是不推荐,因为这两个属性还没有成为标准
- 建议直接使用overflow即可
1.6 元素之间的空格
- 行内级元素(包括inline-block)之间会出现空格,这是由于空格和换行引起的
- 目前可行的解决方法
- 代码不要留空格(会造成代码难以阅读,难以维护)
- 代码注释掉空格(比较麻烦)
- 给父元素font-size设为0,自己单独设置font-size(此方法在Safari浏览器不可用)
- 给元素加浮动(推荐)
1.7 元素之间的嵌套规范
- 块级元素,inline-block元素
- 一般情况下,可以包含任何元素
- 但是,p元素不能包含div元素'
- 行内元素(a,span,strong等):
- 一般情况下,只能嵌套行内元素
二. 盒子模型
2.1 盒子的概念
HTML中每一个元素都可以看作是一个盒子,都有自己的盒模型
2.2 盒子模型 (box model )的几个重要属性
- 内容(content)
- 内边距(padding)
- 边框(border)
- 外边距(margin
默认盒子模型图示
image.png
浏览器开发者工具的盒模型
image.png
2.3 内容相关属性
- width: 宽度
- min-width: 最小宽度,无论内容多少,宽度都不小于这个值,小于最小宽度时,浏览器将出现横向滚动条
- max-width: 最大宽度,无论内容多少,宽度都不大于这个值
- height: 高度
- min-height: 最小高度,无论内容多少,高度都不小于这个值,小于最小高度时,浏览器将出现纵向滚动条
- max-height: 最大高度,无论内容多少,高度都不大于这个值
2.4 内边距
2.4.1 内边距相关属性
-
padding-top:上内边距
-
padding-right: 右内边距
-
padding-bottom: 下内边距
-
padding-left: 左内边距
-
padding:是padding-top,padding-right,padding-bottom,padding-left属性的简写
2.4.2 padding的取值规律
- 按顺时针排序: padding-top,padding-right,padding-bottom,padding-left
- 四个值: 代表上,右,下,左
- 三个值,代表上,右(左),下
- 两个值: 代表上(下),右(左)
- 一个值: 上下左右取一样的值
代码示例
div {
padding:10px 20px 30px 40px;
}
/* 等同于 */
div {
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;
}
div {
padding: 10px 20px 30px;
}
/* 等同于 */
div {
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:20px;
}
div {
padding:10px 20px;
}
/* 等同于 */
div {
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
}
div {
padding:10px;
}
/* 等同于 */
div {
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
}
2.5 外边距
2.5.1 外边距的相关属性
-
margin-top:上外边距
-
margin-right: 右外边距
-
margin-bottom: 下外边距
-
margin-left: 左外边距
-
margin:是margin-top,margin-right,margin-bottom,margin-left属性的简写
2.5.2 外边距的取值规律
- 按顺时针排序: margin-top,margin-right,margin-bottom,margin-left
- 四个值: 代表上,右,下,左
- 三个值,代表上,右(左),下
- 两个值: 代表上(下),右(左)
- 一个值: 上下左右取一样的值
代码示例
div {
margin:10px 20px 30px 40px;
}
/* 等同于 */
div {
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}
div {
margin: 10px 20px 30px;
}
/* 等同于 */
div {
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:20px;
}
div {
padding:10px 20px;
}
/* 等同于 */
div {
marign-top:10px;
margin-right:20px;
margin-bottom:10px;
marign-left:20px;
}
div {
margin:10px;
}
/* 等同于 */
div {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
2.5.3 外边距的上下传递问题(对象是父子元素)
- margin-top传递(常用)
- 如果块级元素的顶部线于父元素的顶部线重叠(也就是第一个块级子元素)的话,那么这个块级元素的margin-top会传给父元素
- margin-bottom传递(不常用)
- 如果块级元素的底部线与父元素的底部线重叠,并且父元素的高度为auto的话,那么这个块级元素的margin-bottom会传递给父元素
- 如何解决这种传递问题呢?
- 给父元素设置padding-top/padding-bottom,而不要使用margin-top/margin-bottom
- 给父元素设置border
- 触发BFC,给父元素设置overflow为auto/hidden
- 建议:
- margin主要用来设置兄弟元素的间距
- padding主要用来设置父子元素的间距
2.5.4 外边距的上下折叠问题(对象是兄弟元素)
-
什么是外边距的上下折叠?
-
垂直方向上的两个相邻元素的marign-top和margin-bottom会合并成一个margin,这种现象叫做外边距的折叠现象
-
水平方向的margin(margin-left和margin-right是永远不会折叠的)
-
-
折叠后最终值的计算规则
- 取较大值的那个
-
建议
- 为了防止产生折叠问题,只设置一个元素的垂直方向的margin即可
2.6 border(边框)
2.6.1 边框的相关属性
- 边框宽度: border-width
- border-top-width,border-right-width,border-bottom-width,border-left-width
- border-width是以上四个取值的简写形式,取值也是上右下左
- 边框颜色: border-color
- border-top-color,border-right-color,border-bottom-color,border-left-color
- border-color是以上四个取值的简写形式,取值也是上右下左
- 边框样式: border-style
- border-top-style,border-right-style,border-bottom-style,border-left-style
- border-style是以上四个取值的简写形式,取值也是上右下左
- 上边框: border-top
- 包含border-top-width,border-top-style,border-top-color,且三者书写顺序无关紧要
- 书写形式: border-top: 2px solid #ccc;
- 右边框: border-right
- 包含border-right-width,border-right-style,border-right-color,且三者书写顺序无关紧要
- 书写形式: border-right: 2px solid #ccc;
- 下边框: border-bottom
- 包含border-bottom-width,border-bottom-style,border-bottom-color,且三者书写顺序无关紧要
- 书写形式: border-bottom: 2px solid #ccc;
- 左边框: border-left
- 包含border-left-width,border-left-style,border-left-color,且三者书写顺序无关紧要
- 书写形式: border-left: 2px solid #ccc;
- border的复合写法
- border:2px solid #ccc;
- 代表4个方向的border采取一样的样式
2.6.2 边框样式(border-style)的取值
- none: 没有边框,这是默认值
- dotted: 边框上是一系列的点
- dashed: 边框上是一系列的虚线
- solid: 实线,最常用
2.6.3 边框的形状
- 矩形
- 梯形
- 三角形
image.png
2.7 行内非替换元素的注意点
- 以下属性对于行内非替换元素(span,strong等)无效
- width,height,margin-top,margin-bottom
- 以下属性对于行内非替换元素比较特殊
- padding-top,padding-bottom,上下方向的border(有效,但是上下方向的bortder,padding均不占空间)
2.8 边框圆角 (border-radius)
2.8.1 CSS属性 ---- border-*-*-radius
-
border半径相关的属性有
- border-top-left-radius: 左上角圆角
- border-top-right-radius: 右上角圆角
- border-bottom-left-radius: 左下角圆角
- border-bottom-right-radius: 右下角圆角
-
border-*-*-radius的取值,以border-top-left-radius为例
- 定义的是四分之一的椭圆的半径
- 第一个是水平半径,即长半轴
- 第二个是垂直半径,即短半轴
- 只写一个值,代表垂直半径与水平半径相同
- 百分比代表的是: 水平百分比代表的是盒模型的宽度,垂直百分比代表的是盒模型的高度
代码演示
border-top-left:20px 30px; border-top-right: 20% 30%;
2.8.2 CSS属性 ---- border-radius
border-radius是一个缩写属性
border-radius:10px 20px 30px 40px / 15px 25px 35px 45px;-
'/ '前面是水平的四个值,后面是垂直方向的四个值
-
四个值分别是按顺时针方向分为top-left,top-right,bottom-right,bottom-left
-
如果bottom-left没设置，就跟随top-right
-
如果bottom-right没设置，就跟随top-left
-
如果top-right没设置，就跟随top-left
-
-
border-radius:大于等于50% 如果这是个正方形,则会变成一个正圆
2.9 CSS属性 --- outline
-
outline代表元素的外轮廓
- 不占用元素空间
- 默认显示在border的外面,但是用法与border一样
-
outline的相关属性有
- outline-width: 外轮廓的宽度
- outline-style: 外轮廓的样式,等同于border-style
- outline-color:外轮廓的颜色
- outline: outline-width,outline-style,outline-color的复合写法,与border一样
outline:10px solid gray; -
应用场景
- 去除a元素,input元素默认聚焦时的默认样式
2.10 CSS属性 --- box-shadow
-
box-shadow用来设置元素一个或者多个阴影
-
每个阴影用shadow表示,多个阴影效果可以叠加
-
shadow的常见格式是: inset ? && <length>{2,4} && <color>?
- 第一个length: 水平方向的偏移,正值向右,负值向左
- 第二个length: 垂直方向的偏移,正值向下,负值向上
- 第三个length: 模糊半径
- 第四个length: 扩散距离
- color: 阴影的颜色,默认黑色
- inset 外框阴影变内框阴影,默认为outside,阴影往外
-
一个元素可以设置多组阴影值,中间以逗号隔开
.box { width:100px; height:100px; box-shadow:10px 10px 10px 10px #f00,-10px -10px 10px 10px #ff0; }
2.11 CSS属性 --- text-shadow
- 给文字添加阴影效果,用法与box-shadow类似
- text-shadow没有扩散距离和inset 意思是 text-shadow的书写格式是: <length>{2,,3} <color>?
- text-shadow同样适用于::first-line,::first-letter
2.12 CSS属性 --- box-sizing
2.12.1 box-sizing的定义
- box-sizing用来设置盒子模型中元素大小的行为
2.12.2 box-sizing的取值
- content-box: padding,border都设置在width/height的外面
- border-box: padding,border都设置在width/height的里面
2.12.3 box-sizing:content-box
- 元素默认值就是box-sizing: content-box
- 是w3c标准建议的盒模型,又称标准盒模型
- 元素实际的width = content的width + padding-left + padding-right + border-left + border-right
- 元素实际的height = contnet的height + padding-top + padding-bottom + border-top + border-bottom
-
增加padding和border的值会使元素变大
image.png
2.12.4 box-sizing: border-box
- IE8以下的浏览器采用的盒子模型,俗称怪异盒子模型
- 元素实际的width就是content的width
- 元素实际的height就是content的height
- 增加padding和border,元素不会变大,但是content区域会缩小
image.png
2.13 元素的水平居中显示
在一些需求中,需要元素在其父元素中水平居中(父元素一般是block元素或者是inline-bloc元素)
- 行内级元素,inline-block元素
- 父元素设置text-align:center即可实现居中
- block元素
- 本身设置margin:0 auto以达到水平居中
三. background背景的使用
3.1 background-image
-
background-image是用来设置元素的背景图片
- 背景图片会盖在(注意不是覆盖)background-color上
-
如果设置了多张背景图片
.box { background-image:url("./img/a.jpg"),url("./img/b.png"),url("./img/c.gif") }-
设置的第一张图片在最上面,,其他元素按照顺序层叠在下面
-
注意,如果元素没有宽度或者高度,加上背景图片,也不会显示
3.2 background-repeat
- background-repeat用来设置当背景图片的大小小于元素的大小时,元素背景是否平铺
- 常用的取值有
- repeat: 水平方向和垂直方向都平铺(默认值)
- no-repeat: 不平铺(最常用)
- repeat-x : 水平方向平铺,垂直方向不平铺
- repeat-y: 垂直方向平铺,水平方向不平铺
3.3 background-size
-
background-size用于设置背景图片的大小,可以有如下的几个值
- auto: 以背景图片本身大小设置 (这是默认值)
- cover: 以宽高比缩放背景图,使其完全铺满整个元素,但是图片可能会裁剪一部分
- contain:以宽高比缩放图片,但是未必保证可以铺满整个元素
- 百分比: 指的是背景放置的元素的宽高
- length: 具体的大小,比如100px
-
注意
- 默认值为auto auto
- 只设置一个值时,另外一个值是auto
- 设置两个值时,第一个值是背景的宽度,第二个值是背景图的高度
-
代码如下
/* 背景图片宽度为100px 高度为200px */ div { background-size: 100px 200px; } /* 背景图片宽度为100px 高度为auto */ div { background-size: 100px; } /* 背景图片宽度为auto 高度为200px */ div { background-size: auto 200px; }/* 背景图片宽度为元素宽度的50% 高度为元素高度的60% */ div { background-size: 50% 60%; } /* 背景图片宽度为元素宽度的66% 高度为auto */ div { background-size:66%; }/* 以宽高比缩放背景图,使其完全铺满整个元素,但是图片可能会裁剪一部分*/ div { background-size:cover; }/* 背景图片被拉伸,保证图片的宽高比,当不能保证一定能铺满整个元素*/ div { background-size:contain; }
3.4 background-position
3.4.1 background-position的基本认识
-
用于设置背景图片在元素中水平,垂直的位置
-
background-position: 水平值,垂直值,默认为0,0,正值向右,下,负值向左,上
-
水平方向: 可以设left,center,right三个方向值
-
垂直方向: 可以设top,center,bottom三个值
-
如果只设了一个值,另一个值为center
- 比如: background-position:100px;等价于 background-position:100px center;
3.4.2 CSS Sprite (雪碧图/精灵图)
- 什么是CSS Sprite
- 是一种图片合成技术,将多个小图片合并到一张图片上,再利用CSS背景定位技术显示对应的图片
- 也称为雪碧图,精灵图等
- 使用CSS Sprite的好处
- 减少网页http请求数量,加速显示网页,减少服务器压力
- 减少图片总大小
- 减少了图片命名的困扰,只需要命名一张图片即可
- CSS Sprite的制作方法
3.5 background-attachment
- background-attachment可以设置以下几个值
- scroll: 默认值, 背景图片跟随元素一起滚动
- local: 背景图片跟随元素以及元素内容一起滚动
- fixed: 背景图片相当于浏览器窗口固定,不会根据元素滚动而滚动
3.6 background的复合写法
background是背景一系列的复合写法,其常用格式是
image position/size repeat attachment color
注意:
-
background-size可以省略,如果不省略,size必须紧跟再posiiton后面,并以/分开
-
其他属性也都可以省略,且顺序无所谓
.box{ background:url("../img/beer.png") center bottom/cover no-repeat fixed #ff0; }
3.7 background-image和img的选择
- 利用background-image和img元素都能实现显示图片的需求,那么在开发中应该如何选择呢
-
img background-image 性质 HTML元素 CSS样式 图片是否占据空间 是 否 浏览器右键能否查看图片地址 能 不能 支持CSS Sprite 不支持 支持 更有可能被搜索引擎收录 可以,结合alt属性 不行 加载顺序 优先加载 等HTML元素加载完毕之后才加载 -
总结
- img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
- background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息
3.8 CSS属性 --- cursor
-
cursor用来设置鼠标指针(光标)在元素上面的显示样式,常用值有
- auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
- default：由操作系统决定，一般就是一个小箭头
- pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
- text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
- none：没有任何指针显示在元素上面
网友评论