昔洛 的个人博客

Bug不空,誓不成佛

目录
记录我的黑马前端学习经历----第四天
/        

记录我的黑马前端学习经历----第四天

今天学习内容

  • 显示模式
    • 块元素
    • 行内元素
  • 背景设置
    • 背景图片
    • 背景平铺方式
    • 背景定位
    • 背景附着
    • 属性连写
  • 标签的嵌套规范
  • 行高说明
  • CSS 三大特性
    • CSS 层叠性
    • CSS 继承性
    • CSS 优先级

1、显示模式

HTML 标签一般分为块标签和行内标签类型,它们也称块元素和行内元素。其中行内元素有个特殊的行内块模式,这三个就是常说的显示模式。

① 块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用与网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<div>、<p>、<ul>、<ol>、<li>、<dl>、<dd> 等,其中 <div>是最常见的块级元素。

块级元素特点:

  • 总是从新行开始
  • 高度,行高,外边距以及内边距都可以控制。
  • 宽度默认是容器的 100%
  • 可以容纳内联元素和其他块元素。
  • 是一个容器及盒子,里面可以放行内或者块级元素

② 行内元素(inline-level)

行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素有:

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签最典型的行内元素。

行内元素的特点:

  • 和相邻行内元素在一行上。
  • 高、宽无效,但水平方向的 padding 和 margin 可以设置,垂直方向的无效。
  • 默认宽度就是它本身内容的宽度。
  • 行内元素只能容纳文本或者其他行内元素。

注意:只有文字才能组成段落,因此 p 里面不能放块级元素,同理还有这些标签 h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。p 不能放 div.
链接里面不能再放链接。

③ 行内块元素(inline-block)

在行内元素中有几个特殊的标签—— < img \ >,< input \ >< td \ >< textarea \ >可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
行内块元素的特点:
1. 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
2. 默认宽度就是他本身内容的宽度。
3. 高度,行高,外边距以及内边距都可以控制。

④ 三种模式的区别:

元素模式 元素排列 设置样式 默认宽度 包含
块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或其他行内元素
行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度

⑤ 显示模式的转换:display

  • 块转行内:display:inline;
  • 行内转块:display:block;
  • 块、行内元素转换为行内块:display:inline-block;

2、背景的设置

CSS 背景的设置有如下属性:

col1 col2
background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺
background-position 背景位置
background-attachment 背景固定还是滚动
背景的合写(复合属性)
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

① 背景图片(image)
语法:
background-image : none | url(url)
none:无背景图(默认)
url:使用绝对或相对地址指定背景图像
background-image 属性允许指定一个图片展示在背景中(只有CSS3 才可以多背景)可以和 background-color 连用。如果图片不重复的话,图片覆盖不到的地方都会被背景颜色填充,如果有背景图片平铺,则会覆盖背景颜色。
示例如下:

<div style="width: 128px; height: 128px; background: url(https://jiangck.com/favicon.ico);">
</div>

② 背景平铺(repeat)
语法:
background-repeat: repeat | no-repeat | repeat-x | repeat-y

  • repeat : 背景图像在纵向和横向上平铺(默认的)
  • no-repeat : 背景图像不平铺
  • repeat-x: 背景图像在横向上平铺
  • repeat-y: 背景图像在纵向上平铺

设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。

③ 背景位置(position)
语法:

background-position: length || length
background-position: position || position

参数:

  • length: 百分数 | 由浮点数字和单位标识符组成的长度值。
  • position: top | center | bottom | left | center | right 方位名词

注意:

  • 1.写方位值 left(左) | right(右) | center(居中) | top(顶) | bottom(底)
    • 写2个方位值,没有顺序要求
    • 写1个放位置,另外一个方位值默认center
  • 2.写具体的数值
    • 写2个数字,第一个是距左边的距离,第2个是距顶边的距离
    • 写1个数字,另外值默认 center
  • 3.方位值和数值混合使用
    • 如果第1个是方位值,只能写水平方向 left | right | center
    • 如果第2个值方位值,只能写垂直方向 top | bottom | center

④ 背景附着
语法:background-attachment: scroll | fixed
参数:

  • scroll: 背景图像是随对象内容滚动
  • fixed: 背景图像固定

说明:设置或检索背景图像是随对象内容滚动还是固定的。如果背景附着的值为 fixed 的时候,背景定位参考的不是盒子的大小,而是浏览器。

⑤ 背景属性的组合写法
background 属性的值的书写顺序官方没有强制标准的。为了可读性可以用以下写法:

background: transparent(透明,默认的) url(image.jpg) repeat-y scroll 50% 0;

3、标签的嵌套规范

① 块元素可以嵌套块元素、行内元素、行内块元素。

div 可以嵌套任意标签
p标签不能嵌套其他块元素,可以嵌套行内元素、行内块元素。
不推荐标题里面嵌套其他块元素,可以嵌套行内元素、行内块元素。

② 行内块不能嵌套块元素,可以嵌套行内元素,行内块元素。
③ 行内元素不能嵌套块元素,行内块元素,只能嵌套行内元素,a标签不能嵌套a标签。

4、行高说明

行高的测量方式如图:
line1.png
line2.png
行高利用最多的一个地方就是:可以让一行文本在盒子中垂直居中对齐。

文字的行高等于盒子的高度

1.png
上距离和下距离总是相等的,因此文字看上去是垂直居中的。

  • 如果行高等于 height 高度文字会垂直居中
  • 如果行高大于高度文字会偏下
  • 如果行高小于高度文字会偏上

5、CSS 三大特性:

① 层叠性

所谓层叠性就是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉。
比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。
一般情况下:

  • 样式冲突,遵循的原则是就近原则。那个样式离着结构近,就执行那个样式。
  • 样式不冲突,不会层叠。

② CSS 继承性

所谓继承性是指书写 CSS 样式表时,子标签会继承父标签的某些样式,如文本颜色和字号,想要设置一个可继承的属性,只需将它应用于父元素即可。

注意:
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及 color属性)文字类的。
a标签不能继承父元素的文字颜色,但是可以继承文字大小。
标题标签不会继承父元素的文字大小。

③ CSS优先级

  • 权重计算公式
标签选择器 计算权重公式
继承或者* 0,0,0,0
每个元素(标签选择器) 0,0,0,1
每个类,伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style 1,0,0,0
每个!important 重要的 ∞无穷大

!important > 行内 style > id 选择 > 类,伪类选择器 > 标签选择器 > 通配符、继承

  • 继承的权重是 0
    如果子元素自身没有样式,会继承父元素的样式,子元素的样式和父元素的样式发生冲突,永远执行子元素自身的样式,父元素继承的过来的样式,权重为0.
  • 权重是可以叠加的
    如下例子:
div		ul	li	------>	0,0,0,1

.nav	ul	li	------>	0,0,1,2

a:hover			------>	0,0,1,1
.nav 	a	 	------> 0,0,1,1
#nav	p	   	------>	0,1,0,1

注意:
数位之间没有进制,比如说:0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0,1,0,所以不会存在 10 个 div 能赶上一个类选择器的情况。
早期的权重的进制是 256进制,后来已经修复了,1万个 div 也干不过 1个类选择我 huaji
计算权重的时候不能忽略CSS的层叠性,示例如下:

<style type="text/css">
	.c1 .c2 div {      
/* 0,0,2,1 */
		color: blue;
	} 
	#box1 div {              
		color:yellow;
 /*0,1,0,1*/
	}
	div #box3 {           
		color:green;
 /* 0,1,0,1 */
	}
		
</style>
<body>
	<div id="box1" class="c1">
		<div id="box2" class="c2">
			<div id="box3" class="c3">
				文字
			</div>
		</div>
	</div>
</body>
文字
权重相同参考重叠性,需要注意的是浏览器解析其实是按照从右向左的顺序进行解析

总之,权重是优先级的算法,层叠是优先级的表现

他们说学习说会的第一句话都是"Hello world"?
评论
歌名 - 歌手
0:00