CSS重学—基础知识

85 阅读7分钟

这是我参与更文挑战的第27天,活动详情查看: 更文挑战

1, 基础知识—选择器

1, 块级元素

div是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。
其他的常用块级元素包括:pform 和HTML5中的新元素:header,footer,section等等
span 是一个标准的行内元素,就像a元素一样

2,前端工程师主要打交道的是浏览器

​ 主要浏览器和内核:

 IE : 内核:trident
 Firefox:内核Gecko
 Google chrome:内核:Webkit/blink
 Safari:       内核:Webkit
 Opera:        内核:presto

3,异步的:分开同时加载

同步的:一个执行完在执行另一个

4, 选择器的优先顺序

!important > 行间样式 >id选择器 >class  | 属性选择器 > 标签选择器 > 通配符选择器

5,CSS权重

!importan                   Infinity
行间样式                     1000
id                          100
class|属性|伪类               10
标签|伪元素                    1
通配符                        0   

6,复杂选择器

1, div span{} //又叫父子选择器  或者 派生选择器
2, div > span {} // 直接子元素选择器
3, div.demo{}  //并列选择器
4, div#demo{}  //并列选择器
5, a:hover{}  //伪类选择器
6, 伪元素:一个标签天生都有两个伪元素
   <span></span>    span::before{}
                    span::after{};

7,选择器的先后顺序

!important > 行间样式 > id选择器 > class 选择器 == 属性选择器 > 标签选择器  > 通配符

8,CSS权重

!important    Infinity
行间样式         1000
id              100
class|属性|伪类   10
标签|伪元素        1
通配符            0
直接子元素选择器  div > em {};

2, 基础知识—属性

1,首行缩进

text-indent:2em

注意:1em == font-szie 大小
​ em是相对字体大小高度的

2,文本装饰

text-decoration:line-through;

3,行级元素

(1) 行级元素的内容决定元素所占位置(inline),不可以通过CSS改变宽高

​  比如:span strong em a del

(2)  块级元素:独占一行(block),可以通过CSS改变宽高

​  比如:div p url ol form address

(3)  行级块元素:内容决定大小,可以改变宽高(inlie-block)

​  比如: img

4, 所示带有inline属性的元素,都是文字特性

5,盒子模型

margin:4个值:上右下左

​ 3个值:上,左右,下

​ 2个值: 上下,左右

6,文字溢出处理

(1) 单行文本:
通用:p{
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;  //省略
}

(2) 多行文本:
  截断处理,不打点

7, 标签

p标签不能套div

a标签不能套a标签

行级元素只能嵌套行级元素

块级元素可以嵌套任何元素

8,解决图片中隐藏文字:

text-indent:200px;

white-space:nowrap;

overflow:hidden; 

9,一个行级元素一但设置 positon:absolute 或者 float:left/right 那个相当于

这个元素内部添加了display:inline-block;

10,float:CSS中的浮动很重要

作用:可以让元素站队

浮动元素产生了浮动流,,所有产生了浮动流的元素,块级元素看不到他们,产生了bfc的元素和文本类属性
(inline)的元素以及文本都能看到浮动  元素

清除浮动流:
clear  p{clear:both;}

.wrapper::after{
       content:"";
       clear:both;
       display:block;   
 }

3, 基础知识—布局

1,CSS定位属性:允许你对元素进行定位position的四种方式

1)static(默认值) 所有标准文档流中的元素都是静态定位

(2)relative:相对定位:在原来的位置,移动的距离   
    position: relative;/*相对定位*/ 脱离原来位置定位。相对自己原来的位置进行定位
    left:40px; /*保留了原来的位置,向右移动大小*/如果向左移动,则值是负数
    top: 300px; /*在原来的位置,向下移动大小*/如果向上移动,则值是负数
    
(3)absolute:/*绝对定位 */元素从原来的位置脱离,并让出自己的空间,后面的元素就会占有让出的空间  
 保留原来位置进行定位
 特别说明:absolute定位是对离自己最近的那个非标准流盒子而言的 

***相对最近的有定位的父级进行定位,如果没有,相对于文档进行定位
(1)如果这个元素没有父元素。那么top,left,right,bottom是相对浏览器窗口进行定位的
(2)如果有父元素,但是父元素没有定位。那么还是相对浏览器窗口进行定位
(3)如果绝对定位有父元素。而且父元素有定位(除static),那么这个定位元素偏移是以自己父元素为基础
(4)fixed: 固定定位,不会随着页面滚动而滚动

2,常用的布局定位技巧:

position:relative 与 position: absolute结合使用。
因为当子代设置了position:absolute,就会参考离自己最近并且设置了position:relative属性的父级元素。
(准确的来说是:非标准流盒子)

子绝父相  

3, body中默认的margin是8px,而且会根据不同的浏览器值会有所不同。所以开发中常设置:margin:0px; padding:0px;

4, 流,盒子模型

重点

1, 标准流:在网页布局中,写在前面的元素,出现在前面,写在后面的元素,出现在后面,这是默认的布局方式,
   也称为标准流
2, 非标准流:在实际网页布局中,我们可能需要使用非标准流的方式来布局,不按照顺序出现
3, 盒子模型:必懂得知识:
   两个div间的距离,称为margin边界
   填充 padding 内边距
   内容 content    边框 border

CSS的盒子模型的原理:

margin: 0 auto //表示上下边距为0 ,auto表示左右居中

@细节说明:1:在html元素都可以看成一个盒子

​ 2:盒子模型的参照物不一样,则使用的css属性不一样,比如从div1的

​ 角度看,是margin-right ,从div2看,则是margin-left

​ 3:如果不希望破坏外观,则尽量使用margin布局,因为padding可能会改变盒子的大小

4, 基础知识—实战

1, 居中

 text-align:center 和 margin: 0 auto 居中的区别
 text-algin: center 的居中显示是针对行内元素
 margin: 0 auto 的居中显示是针对块元素。

注意的是:

有些行内元素使用display:block设置为块元素,

text-algin:center会失效。 块元素设置为行内元素后,margin:0 auto 也会失效

2,实现div的水平居中和垂直居中

(1)如果宽高已知,父元素要设置position:relative

  <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
			 position: relative;
			 width: 500px;	
			 height: 500px;
			 border: 1px solid black;
			}
			.div2{
			 background: red;
			 width:300px;
			 height:200px;
			 position: absolute;
			 margin-left: -150px;
			 margin-top:-100px;
			 top:50%;
			 left: 50%;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2">
			</div>
		</div>
	</body>
</html>

(2) 设置父级flex属性:

  display: flex;
  justify-content:center;
  align-items:center;

(3) 经典Bug

1,父子嵌套的元素,垂直方向的margin,他两会重合,取最大的值
   这种现象称为:maring塌陷
  解决方案:(1)粗暴方法  给个border-top
           (2)BFC 能改变一个盒子的语法规则
       如何触发一个盒子的BFC
          1, 设置定位:position :absolute;
          2,display:inline-block;
          3,float:left/right;
          4,overflow:hidden

2,两个兄弟结构的元素,垂直方向的maring也会重合,
  这种想象称为:margin合并
  解决方案:通过设置BFC同样解决问题

5, 基础知识—总结

作为一名前端开发工程师,CSS使我们的基本功,也是大家最不重视,却感到最难受的东西,实际开发过程中,有些样式调整起来确实很难,非常耗时,只有自己懂了基本原理,对每个元素都有自己的 理解,加上自己平时的总结联系,很多问题都可以迎刃而解,我也是知识简单的有重新学习总结了一遍,后续还有继续,加油!