这是我参与更文挑战的第27天,活动详情查看: 更文挑战
1, 基础知识—选择器
1, 块级元素
div是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。
其他的常用块级元素包括:p,form 和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使我们的基本功,也是大家最不重视,却感到最难受的东西,实际开发过程中,有些样式调整起来确实很难,非常耗时,只有自己懂了基本原理,对每个元素都有自己的 理解,加上自己平时的总结联系,很多问题都可以迎刃而解,我也是知识简单的有重新学习总结了一遍,后续还有继续,加油!