机缘巧合,因为一些缘故,得以有时间来整理下CSS相关笔记,希望能帮助到想要入门前端工作的朋友们,以及想要在前端工作提高的朋友们,有写的不对的地方希望多指正,后续总结jquery,JS高级以及VUE等学习笔记,一起学习,共同进步...
一、样式引入方式
- 行间式样式
<div style="background:red;"></div>
- 内嵌式样式
<style>
div{
background:red;
}
</style>
- 外链式样式
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
- 导入式样式(几乎用不到,不推荐)
注意:如果有内嵌样式,一定要写在导入样式表后面,写在前面,导入式样式表失效
<style type="text/css">
@import "css/style.css"
div{ //写在导入样式表后面
background:red;
}
</style>
- 外链式和导入式区别
- link是html标签,@import是CSS提供的一种方式,要写在CSS文件或者style标签中
- 页面由上到下加载中,link引用的CSS文件也会随之加载,而@import导入的CSS文件会等页面全部加载完成再去加载。
- link支持javascript控制DOM元素改变样式,而@import不支持。
二、块元素、行内元素、行内块元素
- 块元素
div,p,h1-h6,ul,ol,li,dl,dt,dd,table,form...
特点
- 独占一行
- 由上到下排列
- 可以控制宽度高度及盒模型相关的CSS样式
- 没有设置宽度时,默认撑满一行,高度是内容本身的高度
- ul,ol下面只能跟li,dl下面只能是dt,dd。p标签不能包含其他块元素(包括自己本身)
- 行内元素
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> //换行会解析一个空格出来
- 行内块元素
img,input,textarea,select...
特点
- 行内块在一行显示
- 支持宽高设置
- 代码换行被解析
- 块与行内之间的转换
display:inline 转成行内
display:block 转成块
display:inline-block 转成行内块
三、选择器
- 标签选择器
- class选择器
- id选择器
- 群组选择器
div,p,span{
background:red;
}
- 通配符选择器(*)
- 并集选择器
div,p,h{
background:red;
}
- 交集选择器(精确的找到我们需要的标签上)
div.box{
background:red;
}
- 后代选择器
ul li a{
color:red;
}
- 子代选择器(精确到子代元素的第一代子元素)
span{
color : #000;
}
p > span{
color : red;
}
<p>
父亲
<span>
儿子 //变红
<span>孙子</span>
</span>
</p>
- 相邻兄弟选择器(div是参照物,紧挨参照物的兄弟标签)--几乎用不到
div + p{
background:red;
}
<p></p>
<div></div>
<p>只有我是红色背景</p>
<p></p>
- 伪类选择器
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取两者最大值为上下间距(不会叠加)
==子级会把父级拽下来问题==
- 给父级加padding-top代替子级的margin-top
- 给父级加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(继承))
浮动特性
- 浮动后脱离文档流(没有浮动的元素识别不了她的高度和位置就往上跑,占领浮动元素色位置。
文档流:元素排版布局过程,元素会自动从左往右从上往下流式排列
脱离文档流:正常的元素排列方式被打破(不能完全算脱离文档流(文本环绕)) - 浮动有方向
- 浮动元素在一行显示
- 文本环绕
- 左右各自浮动到父级的最左最右(左浮动由左往右排列,右浮动由右往左排列)
- 浮动后,父级宽度不够,浮动元素会掉下来
- 浮动后跟着最高的元素走
- 浮动后行内变成块,能给宽高值(具有块元素的特点)
- 浮动元素内的子元素,不会继承父元素浮动属性
- 浮动后宽度会变得尽可能的窄,窄到内容的宽度
清除浮动方法(有浮动要清除浮动)
- 父级clearfix伪类元素
.clearfix:after{
content : '';
display : block;
clear : both;
}
.clearfix{
*zoom : 1; //*css hack兼容IE7浏览器
}
- 父级加overflow:hidden;
- 父级加高度(不推荐,有弊端)
- 在子元素的末尾加一个空标签(不推荐)
六、定位(能不用就不要用定位)
- 相对定位relative
特征
- 参照物:自己
- 文档流:不会脱离文档流
- 不能让行内变成块(能给宽高)
- 如果方位里同时有left和right,最后听left的,同时有top和bottom,最后听top的
- 改变层级
- 绝对定位absolute
特征
- 参照物:有定位的(相对/绝对)的父级,如果父级没有定位,它一级一级往上找,直到以html为参照物为止
- 文档流:脱离文档流
- 能让行内变成块(能给宽高)
- 如果方位里同时有left和right,最后听left的,同时有top和bottom,最后听top的
- 改变层级
- 固定定位fixed
特征
- 参照物:整个浏览器窗口
- 文档流:脱离文档流
- 能让行内变成块(能给宽高)
- 如果方位里同时有left和right,最后听left的,同时有top和bottom,最后听top的
- 改变层级
z-index 层级(必须和定位元素一起才起作用,单独不起作用)
- 改变层级,加个定位元素上
- 两个定位元素后面的元素比前一个元素默认层级高
定位的相同点
- 可以设置left/right top/bottom值,左右方位同时出现,左方向起作用,上下方位同时出现,上方位起作用
- 都可以设置z-index改变层级关系,值越大层级越高,在上面显示
定位的不同点
- 只有相对定位不脱离文档流,其他定位不脱离
- 参照物不同
七、BFC(块级格式化上下文)
触发一个元素的BFC,相当于元素里面建立起一道围墙,围墙里与围墙外互不干扰
<ul>
<li浮动</li>
<li>浮动</li>
</ul>
<p>上面没有清除浮动,所以ul和p已经互相干扰了</p>
触发BFC的条件
- 父元素加ovrflow:hidden;
- 子元素浮动,父元素也浮动
- position值不为static或relative
- 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 //子级字体大小为自己想要的大小
}
- 方案2(不推荐)
<div>
<button>111</button><button>222</button><button>333</button> //inline-block元素必须放在一行上写
</div>
==水平垂直居中(绝对居中、居中)的多种方法==
- 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;
}
- 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;
}
- 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;
}
两列布局的实现方案
- 左列定宽,右边自适应 (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;
}
- float+overflow的BFC(右侧不加宽度,加上overflow的BFC属性)
.left{
float: left;
width: 300px;
height: 300px;
background: red;
}
.right{
background: green;
height: 500px;
overflow: hidden; //BFC
}
- 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;
}
- 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;
}
- flex布局
.fa{
width: 100%;
display: flex;
}
.left{
width: 300px;
height: 300px;
background: red;
}
.right{
flex: 1;
height: 300px;
background: green;
}
- 网格grid布局(兼容差)
.fa{
width: 100%;
display: grid;
grid-template-columns : 300px auto; //每列的宽度 左:300px,右:自适应
}
.left{
height: 300px;
background: red;
}
.right{
height: 300px;
background: green;
}
三列布局的实现方案(两侧定宽,中间自适应)
- 圣杯布局(居中内容提前显示,布局的时候写在前面)
.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>
- 双飞翼布局
在圣杯基础上,中间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负值移动
等高布局的实现方案
- table
.fa{
width:100%;
display:table;
}
.left,right{
display:table-cell;
width:50%;
}
.left{
background:red;
}
.right{
background:green;
}