2.1 css进阶企业开发经验,习惯,盒子模型,层模型

本文链接：https://blog.csdn.net/weixin_45538956/article/details/109349986

「HTML+CSS」来源:渡一教育

css的注释

文字排版

行对齐样式
单行文本行距
行首缩进
中,下划线样式

通用属性none

聚焦无,失焦有

光标样式

伪类选择器之一

区分与定义默认css属性特性级

初始化css文件属性

<body>的margin默认值

消除img间隙

盒子模型

定位元素与层模型

css的注释是: /* 内容 */

编辑器				|	css
行对齐样式			|	div{text-align:center;}居中
<div>1</div>							right  居右

单行文本所占间距		|	div{line-height:16px|1.2em;}	
<div>1</div>
<div>2</div>

行首缩进				|	div{text-indent:1em|2em;}数字代表个			
<div>1</div>
说明:em是相对单位
绝对单位:不可变 米
相对单位:可概念	em,px也是这种单位
查一下吧,这里没那么详细
计算公式:lem= 1	font-size:16px;

中,下划线样式 及 通用属性none
<dil>1</del>		|	span{text-decoration:line-through;}
											 overline(下划线)(上划线自己查)
<span>2</span>			如果span{text-decoration:none;}添加none后,就是没有的意思
说明:del 其实就是默认带有了css样式属性,才有的效果

光标样式				|	div{cursor:(自己查)}

伪类选择器之一 
a>1</a>|			|	a:hover{bockground-colo:orange;}(:hover = 伪类选择器)

聚焦无,失焦有
<a>1</a>			|	a{text-decoration:underline;}聚焦无

						a{text-decoration:none;}失焦有

区分与定义 默认css属性 特性级

行级元素(cblock)	例:<span>
1.内容决定元素所占位置
2.不可以通过css改变宽高

块级元素(inline-block)	例:<div>
1独占一行
2.可以通过css改变宽高

行块级元素
1.内容决定大小
2.可以该宽高

说明:这是三种默认属性,可以更改

如何消除<img>加载多个图片的间隙,达到无缝
编辑器							|	css
<img></img>
<img></img>
<img></img>

说明:凡是带有inline的元素,都带有文字特性,文字分隔符起作用就分开了
解决:
1.<img></img><img></img><img></img>
说明:排在一行内,解决

2.								|	img{margin-left:-6px;}
说明:这种方法解决不了,
在文件压缩时,
一个单词用一个字符代替
去掉了空格,回车,
然后你再解压,发现解决不了

开发经验

开发经验
1.过程式开发
一步一步来

2.定义功能(函数式)
初始化标签,并分类
如
*{padding:0;
margin:0;}

1.盒子模型
html每个元素否符号盒子模型的概念

组成盒子的三大部分
外边距		=外壁		margin
1.柜壁的厚度=内壁		border
2.夹层		=内距		padding
3.内容		=盒子内容	width+height
margin + border + padding +(content=width+height)
说明:padding=100px	(1,2,3,4个px都可以)
	可以这样设置这些属性

2.模型计算问题

3.<body></body>标签
的margin属性默认值是8px

3.层模型概念
css文件内
1.
当一个有定位元素,另一个没有定位元素时,并处理同一个位置,他们会重叠
posttion:absolute;(定位元素)
(左)left:100px;
(下)top:100px;
(右)right:100px;
(上)bootom:100px;
apacity:0.5;

说明:
absolute(定位元素):脱离原来位置进行定位(你可以想象它是新的图层)
最近的有定位的父级进行定位,
如果没有,那么相对于文档进行定位

2.
当一个有定位元素,另一个没有定位元素时,属性不同时,会重叠
posttion:relative;(定位元素)
(左)left:100px;
(下)top:100px;
(右)right:100px;
(上)bootom:100px;
apacity:0.5;
说明:
relative(定位元素):
保留原来位置进行定位,属性相同时什么都不会发生,不让
相对自己的原来位置进行定位(参照物)

3.相对文档定位(广告定位)
posttion:tixed;(定位元素)
加上这个,广告会固定,不会随着刷动页面消失原位置

4.广告居中不动
posttion:absolute;(定位元素)
left:50%;
top:50%;
margin:left:-50px
margin:top:-50px
说明:四个方块有其中的一块定位到中间

5.拼五个奥运圈圈
添加index:0(默认值)
		 :1(层面靠近你)(图层)