CSS基础学习

最新推荐文章于 2023-12-14 20:51:28 发布

原创最新推荐文章于 2023-12-14 20:51:28 发布 · 403 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

25 篇文章

订阅专栏

1. css的引入方式：行内式、内嵌式、链接式、导入式。

导入式@import 可以放到style标签中，也可以放到css文件里面，但是不管是放到style元素中还是css文件中都必须写在前面，否则就根本不起作用。

<style type="text/css">

     @import"mystyle.css"; 此处要注意.css文件的路径

 </style>

导入式：会在整个页面装载完成后再装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式的页面，闪烁一下之后再出现设置样式后的效果，从浏览者的感受来说，这是导入式的一个缺陷。

CSS中 link 和@import 的区别是？

(1)、link属于HTML标签，而@import是CSS提供的;
(2)、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3)、import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4)、link方式的样式的权重高于@import的权重.

2. CSS Reset(重设)：

CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

最简化的CSS Reset(重设) :

* {
      padding: 0;
      margin: 0;
}

将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

3.CSS权重 256进制

!important Infinity

行内样式 1000

ID选择器 100

类|属性|伪类 10

标签 1

通配符 *

并列选择器：

div.demo 中间没有空格，选出div且类名是demo，有标签选择器，标签选择器必须在前面

如果放在后面系统会认为.demodiv是类名为demodiv

权重计算：

<div class="classDiv" id="idDiv">
	<p class="classP" id="idP">1</p>
</div>

#idDiv p{/*权重是101*/
		background-color: red;   
	}
	.classDiv .classP{/*权重是20*/
		background-color: yellow;
	}

不管有没有空格，只要在同一行权重相加即可

#idDiv p{/*101*/
		background-color: red;
	}
	.classDiv .classP#idP{/*10+10+100=120*/
		background-color: yellow;
	}

如果权重相，同后面的会覆盖前面的:

背景是黄色

#idDiv p.classP{
		background-color: red;
	}
	.classDiv .classP#idP{
		background-color: yellow;
	}

!important权重：

显示红色：

#idDiv p.classP{
		background-color: red!important;/*100+1+10+Infinity*/
	}
	.classDiv .classP#idP{
		background-color: yellow;
	}

黄色：

#idDiv p.classP{
		background-color: red!important;
	}
	.classDiv .classP#idP{
		background-color: yellow!important;
	}

红色：

div#idDiv p.classP{
		background-color: red!important;
	}
	p .classP#idP{
		background-color: yellow!important;
	}

文字：

<div>前端工程师</div>

div{
		font-size: 20px;
		border: 1px solid black;
		/*水平居中*/
		text-align: center;
		/*height==lineheight垂直居中*/
		height: 200px;
		line-height: 200px;
	}

首行缩进2个字符：

div{
		font-size: 20px;
		border: 1px solid black;
		text-indent: 2em;
	}

img之间有间隔：这是因为凡是带有inline的元素，都有文字特性

<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>

当去掉img之间的回车符：

<img src="img/1.jpg"/><img src="img/2.jpg"/><img src="img/3.jpg"/><img src="img/4.jpg"/>

<style>
	img{
		width: 200px;
		margin-left: -8px;
	}
</style>

<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>

压缩代码放到服务器上会去回车，去空格符号，所以测试环境margin-left：-8px；线上不用处理，会自动去掉回车符。

可以设置父级元素的font-size：0;

也可以将图片样式设置成display: block;float: left;

在实际开发中,有左边图片，右边文字的样式：

使用float，

使用display：inline-block，但是使用inline-block时，也会出现空隙的问题，本来按照UI设置padding、margin等，却发现有像素差，还是因为产生了空隙，设置父级元素font-size:0就可以了。

使用弹性盒子也可以解决。

CSS浮动：

浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们，产生了BFC的元素和文本类属性（带有inline属性）的元素以及文本都能看到浮动元素。

<div class="box"></div>
<div class="demo"></div>

1.块级元素看到不见浮动元素；

.box{
		width: 100px;
		height: 100px;
		background-color: yellow;
		float: left;
	}
	.demo{
		width: 200px;
		height: 200px;
		background-color: red;
	}

2.带有inline属性的元素看见浮动元素：

.box{
		width: 100px;
		height: 100px;
		background-color: yellow;
		float: left;
	}
	.demo{
		width: 200px;
		height: 200px;
		background-color: red;
		display: inline-block;
	}

<div class="box"></div>
<img src="img/1.jpg" style="height: 100px;"/>

.box{
		width: 100px;
		height: 100px;
		background-color: yellow;
		float: left;
	}

文本能看见浮动元素：

<div class="box"></div>123

.box{
		width: 100px;
		height: 100px;
		background-color: yellow;
		float: left;
	}

在父元素内浮动的情况：

<div class="wrap">
	<div class="left">left</div>
</div>

.wrap{
	background-color: red;
	width: 200px;
	height: 200px;
}
.left{
	width: 100px;
	height: 100px;
	float: left;
	background-color: yellow;
}

当父元素添加20px的padding后：

.wrap{
	background-color: red;
	width: 200px;
	height: 200px;
	padding: 20px;
}
.left{
	width: 100px;
	height: 100px;
	float: left;
	background-color: yellow;
}

当浮动元素在父级元素内浮动时，只在内容区域，子元素遇到父元素的内容区边界，停止移动。

清除浮动：

先了解伪元素：:first-line、:first-letter、:before、:after，

伪类：：hover、：focus等

CSS3为了区别伪类和伪元素，将伪元素的写法由单冒号改为双冒号::first-line、::first-letter、::before、::after

<span>css</span>

span::before{
		content: 'html';
	}
span::after{
	        content: 'javaScript';
        }

伪元素天生存在，是inline，如果设置宽高，必须改为块级元素。

<div class="wrap">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>

.wrap{
		width: 300px;
		border: 1px solid red;
	}
	.box{
		width: 100px;
		height: 100px;
		background-color: yellow;
		float: left;
	}
	.wrap::after{
		content: "";
		clear: both;
	}

并没有清除浮动，因为clear属性只对块级元素起作用

在将伪元素的display属性设置为块级元素即可，display的值设置成block、table都行，但是不能设置为inline-block

.wrap{
		width: 300px;
		border: 1px solid red;
	}
	.box{
		width: 100px;
		height: 100px;
		background-color: yellow;
		float: left;
	}
	.wrap::after{
		content: "";
		display: block;
		clear: both;
	}

position:absolute和float:left/right会将元素转换成inline-block

<div class="demo">
         position:absolute和float:left/right会将元素转换成inline-block
</div>

.demo{
		float: left;
		border: 1px solid red;
	}

虽然样式表中仍是display：block，但是div的宽度不是全屏，而是由内容决定。

<span class="demo"></span>

.demo{
		float: left;
		background-color: yellow;
		width: 100px;
		height: 100px;
	}

设置浮动后，span元素可以设置宽高

文字溢出处理：

单行文字溢出处理：

<p>
		文字溢出单行处理，不换行，溢出隐藏，文本溢出ellipsis
</p>

p{
		width: 300px;
		height: 20px;
		line-height: 20px;
		border: 1px solid black;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

多行文字溢出打点可以用css3，但是有兼容性问题，一般使用截断：

主要是两点：容器高度设置为行高的倍数，如果是两倍，则height:2em; overflow:hidden,这样就只显示两行。

文字代替图片：

<a href="http://taobao.com" target="_blank">淘宝网</a>

a{
	display: inline-block;
	text-decoration: none;
	color: #f40;
	width: 80px;
	height: 33px;
	background-image: url(img/taobao.png);
	background-size: 80px 33px;
	text-indent: 100px;
	white-space: nowrap;
	overflow: hidden;
}

css加载失败时：

css加载成功时：

或者利用padding，将height设置为0。

a{
	display: inline-block;
	text-decoration: none;
	color: #f40;
	width: 80px;
	height: 0px;
	padding-top: 33px;
	background-image: url(img/taobao.png);
	background-size: 80px 33px;
	overflow: hidden;
}

’常见布局：

一列布局：设置宽度，margin：0 auto；

二列布局：

侧列div放在前面；

侧列设置浮动，主列margin-left：侧列宽度+间距（间距自己设置）。

三列布局：main-wrap必须要设置左浮动。

<div class="main-wrap">
     <div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

	*{
		margin: 0;
		padding: 0;
	}
.left{
	width: 200px;
	height: 600px;
	float: left;
	margin-left: -100%;
	background-color: red;
}
.right{
	width: 200px;
	height: 600px;
	float: right;
	margin-left: -200px;
	background-color: red;
}
.main-wrap{
	width: 100%;
	height: 600px;
	float: left;
	background-color: yellow;
}
.main{
	margin: 0 200px;
}

渐进增强和优雅降级：

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
　　优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

　　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

CSS 预处理器和后处理器：

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，Sass、LESS、Stylus 是目前最主流的 CSS 预处理器。

CSS 后处理器是对CSS进行处理，并最终生成CSS的预处理器，它属于广义上的CSS 预处理器。Autoprefixer，通过Can I Use数据库来确定哪些浏览器前缀是需要的，然后解析CSS文件，将前缀添加到CSS规则里。