CSS的半壁江山(面试吊打面试官)

205 阅读11分钟

机缘巧合,因为一些缘故,得以有时间来整理下CSS相关笔记,希望能帮助到想要入门前端工作的朋友们,以及想要在前端工作提高的朋友们,有写的不对的地方希望多指正,后续总结jquery,JS高级以及VUE等学习笔记,一起学习,共同进步...

一、样式引入方式

  1. 行间式样式
<div style="background:red;"></div>
  1. 内嵌式样式
<style>
    div{
        background:red;
    }
</style>
  1. 外链式样式
<head>
    <link rel="stylesheet" href="css/style.css" />
</head>
  1. 导入式样式(几乎用不到,不推荐)

注意:如果有内嵌样式,一定要写在导入样式表后面,写在前面,导入式样式表失效

<style type="text/css">
    @import "css/style.css"
    div{    //写在导入样式表后面
        background:red;
    }
</style>
  1. 外链式和导入式区别
  • link是html标签,@import是CSS提供的一种方式,要写在CSS文件或者style标签中
  • 页面由上到下加载中,link引用的CSS文件也会随之加载,而@import导入的CSS文件会等页面全部加载完成再去加载。
  • link支持javascript控制DOM元素改变样式,而@import不支持。

二、块元素、行内元素、行内块元素

  1. 块元素

div,p,h1-h6,ul,ol,li,dl,dt,dd,table,form...

特点

  • 独占一行
  • 由上到下排列
  • 可以控制宽度高度及盒模型相关的CSS样式
  • 没有设置宽度时,默认撑满一行,高度是内容本身的高度
  • ul,ol下面只能跟li,dl下面只能是dt,dd。p标签不能包含其他块元素(包括自己本身)
  1. 行内元素

strong,a,em,i,label...

特点

  • 不独占一行,和其他行内元素从左到右显示
  • 由左到右排列
  • 不能控制宽度高度及盒模型的相关的CSS属性(padding-top/padding-bottom,margin-top/margin-bottom),但是可以设置padding-left/padding-right,marign-left/margin-right
  • 设置宽度高度不起作用,宽高由本身内容决定
  • 行内元素可以嵌套行内元素,行内不建议嵌套块元素(a标签例外)
  • 代码换行被解析
<span>111</span>
<span>222</span>    //换行会解析一个空格出来
  1. 行内块元素

img,input,textarea,select...

特点

  • 行内块在一行显示
  • 支持宽高设置
  • 代码换行被解析
  1. 块与行内之间的转换
    display:inline 转成行内
    display:block 转成块
    display:inline-block 转成行内块

三、选择器

  1. 标签选择器
  2. class选择器
  3. id选择器
  4. 群组选择器
div,p,span{
    background:red;
}
  1. 通配符选择器(*)
  2. 并集选择器
div,p,h{
    background:red;
}
  1. 交集选择器(精确的找到我们需要的标签上)
div.box{
    background:red;
}
  1. 后代选择器
ul li a{
    color:red;
}
  1. 子代选择器(精确到子代元素的第一代子元素)
span{
    color : #000;
}
p > span{
    color : red;
}
<p>
    父亲
    <span>
        儿子    //变红
        <span>孙子</span>
    </span>
</p>
  1. 相邻兄弟选择器(div是参照物,紧挨参照物的兄弟标签)--几乎用不到
div + p{
    background:red;
}
<p></p>
<div></div>
<p>只有我是红色背景</p>
<p></p>
  1. 伪类选择器

a:link/visited/hover/active,input:focus

==优先级==
行间 > id > class > 标签选择器 > *

四、盒模型

组成:width/height + padding + border + margin(影响盒模型大小的是width/height,padding,border)

  • margin不会影响最后元素的的实际宽高,padding会影响最后元素的的实际宽高(width/height减去相应padding的值,或者加上box-sizing:border-box)
  • margin主要控制元素间的间距,padding不能控制元素间的间距
    ==margin塌陷问题==
    margin-bottom和margin-top取两者最大值为上下间距(不会叠加)
    ==子级会把父级拽下来问题==
  1. 给父级加padding-top代替子级的margin-top
  2. 给父级加overflow:hidden;
    overflow的作用
  • 溢出隐藏
  • 清除浮动
  • 解决margin塌陷问题
  • 单行文本溢出省略号
p{
    width:100px;
    height:30px;
    line-height:30px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}
  • 多行文本溢出省略号
p{
    width:100px;
    overflow : hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;  //行数
    -webkit-box-orient: vertical;
}

五、浮动(left/right/none/inherit(继承))

浮动特性

  1. 浮动后脱离文档流(没有浮动的元素识别不了她的高度和位置就往上跑,占领浮动元素色位置。
    文档流:元素排版布局过程,元素会自动从左往右从上往下流式排列
    脱离文档流:正常的元素排列方式被打破(不能完全算脱离文档流(文本环绕))
  2. 浮动有方向
  3. 浮动元素在一行显示
  4. 文本环绕
  5. 左右各自浮动到父级的最左最右(左浮动由左往右排列,右浮动由右往左排列)
  6. 浮动后,父级宽度不够,浮动元素会掉下来
  7. 浮动后跟着最高的元素走
  8. 浮动后行内变成块,能给宽高值(具有块元素的特点)
  9. 浮动元素内的子元素,不会继承父元素浮动属性
  10. 浮动后宽度会变得尽可能的窄,窄到内容的宽度

清除浮动方法(有浮动要清除浮动)

  1. 父级clearfix伪类元素
.clearfix:after{
    content : '';
    display : block;
    clear : both;
}
.clearfix{
    *zoom : 1;  //*css hack兼容IE7浏览器
}
  1. 父级加overflow:hidden;
  2. 父级加高度(不推荐,有弊端)
  3. 在子元素的末尾加一个空标签(不推荐)

六、定位(能不用就不要用定位)

  1. 相对定位relative
    特征
  • 参照物:自己
  • 文档流:不会脱离文档流
  • 不能让行内变成块(能给宽高)
  • 如果方位里同时有left和right,最后听left的,同时有top和bottom,最后听top的
  • 改变层级
  1. 绝对定位absolute
    特征
  • 参照物:有定位的(相对/绝对)的父级,如果父级没有定位,它一级一级往上找,直到以html为参照物为止
  • 文档流:脱离文档流
  • 能让行内变成块(能给宽高)
  • 如果方位里同时有left和right,最后听left的,同时有top和bottom,最后听top的
  • 改变层级
  1. 固定定位fixed
    特征
  • 参照物:整个浏览器窗口
  • 文档流:脱离文档流
  • 能让行内变成块(能给宽高)
  • 如果方位里同时有left和right,最后听left的,同时有top和bottom,最后听top的
  • 改变层级

z-index 层级(必须和定位元素一起才起作用,单独不起作用)

  • 改变层级,加个定位元素上
  • 两个定位元素后面的元素比前一个元素默认层级高

定位的相同点

  1. 可以设置left/right top/bottom值,左右方位同时出现,左方向起作用,上下方位同时出现,上方位起作用
  2. 都可以设置z-index改变层级关系,值越大层级越高,在上面显示

定位的不同点

  1. 只有相对定位不脱离文档流,其他定位不脱离
  2. 参照物不同

七、BFC(块级格式化上下文)

触发一个元素的BFC,相当于元素里面建立起一道围墙,围墙里与围墙外互不干扰

<ul>
    <li浮动</li>
    <li>浮动</li>
</ul>
<p>上面没有清除浮动,所以ul和p已经互相干扰了</p>

触发BFC的条件

  1. 父元素加ovrflow:hidden;
  2. 子元素浮动,父元素也浮动
  3. position值不为static或relative
  4. display值为tablecell,inline-block,flex中的其中一个

八、浏览器内核

IE: trident内核
Firefox:gecko内核
Safari:webkit内核
Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit,Google与Opera Software共同开发)

技巧

上箭头

.arrow{
    width:10px;
    height:10px;
    border-top-width:1px;
    border-right-width:1px;
    border-bottom-width:0;
    border-left-width:0;
    border-color:red;
    border-style:solid;
    transform:rotate(-45deg);
}

三角

.triangle{
    width:0;
    height:0;
    line-height:0;
    border:10px dashed transparent;
    border-top:10px solid red;
}

inli-block两边空白Bug
1.方案1

div{
    font-size : 0;  //父级设置字体大小为0
}
div button{
    font-size:14px  //子级字体大小为自己想要的大小
}
  1. 方案2(不推荐)
<div>
    <button>111</button><button>222</button><button>333</button> //inline-block元素必须放在一行上写
</div>

==水平垂直居中(绝对居中、居中)的多种方法==

  1. table-cell:使表格内容垂直对齐方式为middle,实现垂直居中,然后根据行内或者块级内容采取不同的方式达到水平居中(兼容性好IE8+)
  • 子级为块级元素
.fa{
	width: 500px;
	height: 500px;
	border: 1px solid red;
	display: table-cell;
	vertical-align: middle;
}
.child{
	width: 200px;
	height: 200px;
	background: green;
	color: #fff;
	margin: 0 auto;
}
  • 子级为行内元素(未知宽高绝对居中)
.fa{
	width: 500px;
	height: 500px;
	border: 1px solid red;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.child{
	background: green;
	color: #fff;
}
  1. position定位:父级相对定位子级绝对定位,然后根据margin或者transform组合来实现定位
  • margin负值
.fa{
	position: relative;
	width: 500px;
	height: 500px;
	border: 1px solid red;
}
.child{
	position: absolute;
	width: 200px;
	height: 200px;
	background: green;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -100px;
}
  • transform(未知宽高绝对居中,兼容不好,兼容IE9+)
.fa{
	position: relative;
	width: 500px;
	height: 500px;
	border: 1px solid red;
}
.child{
	position: absolute;
	top: 50%;
	left: 50%;
	background: green;
	transform: translate(-50%,-50%);
}
  • absolute定位四个方向为0
.fa{
	position: relative;
	width: 500px;
	height: 500px;
	border: 1px solid red;
}
.child{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 200px;
	height: 200px;
	background: green;
}
  1. flex弹性盒模型(未知宽高绝对居中,兼容不好,适用移动端)
.fa{
	width: 500px;
	height: 500px;
	border: 1px solid red;
	display: flex;
	justify-content: center;
	align-items: center;
}
.child{
	width: 200px;
	height: 200px;
	background: green;
}
或者
.child{//未知宽高绝对居中
	background: green;
}

两列布局的实现方案

  1. 左列定宽,右边自适应 (float+margin)
    弊端:右侧right元素,子级元素清除浮动,会把右侧right掉到底部
html,body{
	height: 100%;
}
div{
	height: 100%;
}
.left{
	float: left;
	width: 300px;
	background: red;
}
.right{
	width: 100%;
	background: green;
	margin-left: 300px;
}
.right-child{
    clear:both;会把右侧内容整体掉到底部
}

解决上面的弊端(左右都浮动)

.left{
	float: left;
	width: 300px;
	height: 600px;
	background: red;
	position: relative;	//提高层级
}
.fa-right{
	float: right;
	width: 100%;
	height: 700px;
	background: green;
	margin-left: -300px;	//让右侧浮动上去
	font-size: 36px;
}
.child{
	margin-left: 300px;	//避开左侧宽度
	height: 600px;
	background: blue;
}
.inner{
	clear: both;	//内容有浮动也不会把自己的父级掉下来
	background: yellow;
	height: 300px;
}
  1. float+overflow的BFC(右侧不加宽度,加上overflow的BFC属性)
.left{
	float: left;
	width: 300px;
	height: 300px;
	background: red;
}
.right{
	background: green;
	height: 500px;
	overflow: hidden;   //BFC
}
  1. table+table-cell(类似table>td)
.fa{
	display: table;
	width: 100%;    //一定加width:100%
	height: 300px;
}
.left{
	display: table-cell;    //td
	width: 300px;
	height: 300px;
	background: red;
}
.right{
	display: table-cell;    //td
	height: 300px;
	background: green;
}
  1. absolute绝对定位
.fa{
	position: relative;
}
.left{
	position: absolute;
	left: 0;
	top: 0;
	width: 300px;
	height: 300px;
	background: red;
}
.right{
	position: absolute;
	left: 300px;
	right: 0;   //减去左侧的300,是整个页面的宽度
	top: 0;
	height: 300px;
	background: green;
}
  1. flex布局
.fa{
	width: 100%;
	display: flex;
}
.left{
	width: 300px;
	height: 300px;
	background: red;
}
.right{
	flex: 1;
	height: 300px;
	background: green;
}
  1. 网格grid布局(兼容差)
.fa{
	width: 100%;
	display: grid;
	grid-template-columns : 300px auto;	//每列的宽度  左:300px,右:自适应
}
.left{
	height: 300px;
	background: red;
}
.right{
	height: 300px;
	background: green;
}

三列布局的实现方案(两侧定宽,中间自适应)

  1. 圣杯布局(居中内容提前显示,布局的时候写在前面)
.fa{
	padding: 0 300px;	//第二步,给父级元素的左右两边加子级left,right的宽度,预留给left,right空间位置 
	height: 300px;
}
.left,.center,.right{
	height: 300px;
	float: left;	/*第一步,浮动*/
}
.left,.right{
	width: 300px;
}
.left{
	background: red;
	margin-left: -100%;	/*第三步,将底部的left移上去一个负的center100%的宽度*/
	position: relative;	/*利用相对定位(不脱离文档流),往左移一个left的宽度到页面的最左边*/
	left: -300px;
}
.center{
	width: 100%;
	background: green;
}
.right{
	background: yellow;
	margin-left: -300px;	/*第四步,移动一个right的宽度*/
	position: relative;	/*利用相对定位(不脱离文档流),往右移一个right的宽度到页面的最右边*/
	right: -300px;
}
<div class="fa">
	<div class="center">center</div>
	<div class="left">left</div>
	<div class="right">right</div>
</div>
  1. 双飞翼布局
    在圣杯基础上,中间center容器里嵌套了一个子容器inner,解决了圣杯定位再次移动的问题,没有定位进行位置移动,优化了圣杯的代码(去掉定位)
.fa{
	height: 300px;
}
.left,.center,.right{
	height: 300px;
	float: left;	/*第一步,浮动*/
}
.left,.right{
	width: 300px;
}
.left{
	background: red;
	margin-left: -100%;	/*第三步,将底部的left移上去一个负的center100%的宽度*/
}
.center{
	width: 100%;
	background: green;
}
.right{
	background: yellow;
	margin-left: -300px;
}
.inner{
    height:300px;
    margin-left:300px;/*第二步,给center进行挤压*/
    margin-right:300px;
    background:blue;
}
<div class="fa">
	<div class="center">
	    <div class="inner">
	        center
	    </div>
	</div>
	<div class="left">left</div>
	<div class="right">right</div>
</div>

区别:都要浮动,圣杯的留白(margin-left,margin-right)加给父级(fa)。双飞翼的留白,加个center中的子级元素身上。圣杯:margin负值移动+position的left移动。双飞翼:margin负值移动

等高布局的实现方案

  1. table
.fa{
    width:100%;
    display:table;
}
.left,right{
    display:table-cell;
    width:50%;
}
.left{
    background:red;
}
.right{
    background:green;
}