该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出。本文主要介绍CSS基础知识,包括盒子模型、浮动布局、PS切图、定位、元素的显示与隐藏和一些零碎知识点
思维导图
第1章 盒子模型
页面布局核心:盒子模型、浮动、定位
1.1 网页布局的本质
网页布局过程:
根据设计稿准备好相关的网页元素
利用CSS设置好盒子样式,然后摆放到相应位置
往盒子里装内容
由上述过程可以看出:
网页布局的核心本质就是利用CSS摆盒子
1.2 盒子模型组成
盒子模型包括:边框、外边距、内边距和实际内容等
1.3 边框
border可以设置元素的边框。边框由三部分组成:边框宽度(粗细)、边框样式、边框颜色
a.语法格式
div {width: 300px;height: 200px;/* border-width 边框宽度 */border-width: 4px;/* 常用的三种边框样式:实线边框 solid 实线边框 dashed 虚线边框 dotted 点线边框 *//* border-style: solid; *//* border-style: dashed; */border-style: dotted;border-color: skyblue;}
边框语法简写
div {width: 300px;height: 200px;border: 4px dotted skyblue;}
也可以把各部分边框分开写
div {width: 300px;height: 200px;border-top: 4px dotted skyblue;}
小练习:给一个200*200的盒子,设置上边框为红色,其余边框为蓝色。(提示:层叠性)
b. 表格的细线边框
border-collaPSe属性控制浏览器绘制表格边框的方式。
语法格式
table,td,th {border: 1px solid skyblue;border-collaPSe: collaPSe;}
注:collaPSe是合并的意思。 border-collaPSe: collaPSe;表示将相邻边框合并在一起。(让表格线条更细、更美观)
c. 边框会增加盒子大小
对于这种情况有两种解决方案:
测量盒子大小时,不量边框
测量时包含了边框,那么width/height要减去对于的边框宽度
1.4 内边距
padding用于设置内边距,即边框与内容之间的距离
padding属性简写可以有一到四个值
如果盒子有了高度和宽度,再指定内边距,会撑大盒子。
解决办法:
width/height减去多出来的内边距大小
不设置width/height
1.5 外边距
margin用于设置外边距,即控制盒子和盒子之间的距离
margin的简写方式与padding完全一致,这里不做讲解
外边距可以让块级盒子水平居中,但是必须满足两个条件:
盒子指定了宽度
盒子的左右外边距设置为auto
.header {width: 900px;height: 300px;background-color: skyblue;margin: 10px auto;text-align: center;}
注:想要行内元素或行内块元素水平居中给父级元素添加text-align:center即可
a. 外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。主要有两种情况:
i. 相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是取两个值中间的最大值。这种现象被称为相邻块元素垂直外边距的合并
示例
.damao,.ermao {width: 200px;height: 200px;background-color: skyblue;}.damao {margin-bottom: 100px;}.ermao {margin-top: 200px;}
效果图
解决方案:尽量只给一个盒子添加margin值
ii. 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距
示例
.father {width: 300px;height: 300px;background-color: skyblue;margin-top: 40px;}.son {width: 100px;height: 100px;background-color: pink;margin-top: 100px;}
效果图
解决方案:
为父元素定义上边框
为父元素定义上内边距
为父元素添加overflow:hidden
还有其他方法:如浮动、固定、绝对定位的盒子
1.6 清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器的默认边距也不一致。因此在布局前,首先要清除网页元素的内外边距
/* 这也是实际开发中CSS的第一段代码 */* {padding: 0;margin: 0;}
注:行内元素为了兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级元素或行内块元素时不受影响
练习
第二章 零碎知识点
2.1 PS基本操作
利用PS可以测量图片的大小,方便练习时还原网页或者设计稿
文件-打开:打开需要测量的图片
Ctrl+R(视图-标尺):可以打开标尺。右击标尺,将单位改为像素。
左键点击标尺拖动,可以拉出辅助线(方便测量)
Ctrl+加号可以放大视图,Ctrl+减号可以缩小视图
按住空格键,鼠标会变成小手,可以拖动PS视图
用选区(测量工具)拖动,可以测量高度和宽度
Ctrl+D或者在旁边空白处点击可以取消选区
2.2 圆角边框
border-radius可以设置元素的外边框圆角
语法格式
div {width: 432px;height: 321px;background-color: skyblue;border-radius: 10px;}
效果图
注:
参数值可以为数值或者百分比(高度的百分比)的形式
该属性是简写属性,可以设置四个值,分别代表左上角、右上角、右下角、左下角
.radius {width: 100px;height: 100px;background-color: skyblue;border-radius: 10px 20px 30px 40px;}
分开写则是:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
2.3 盒子阴影
box-shadow可以为盒子添加阴影
语法格式
div:hover {/* box-shadow: 阴影水平位移量 阴影垂直位移量 阴影模糊半径 阴影尺寸 阴影颜色 阴影模式*/box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);}
注:
默认是外阴影(outset),但不可以设置该属性值,否则会导致阴影失效
盒子阴影不占空间,不会影响其他盒子排列
2.4 文字阴影
text-shadow可以为文本设置阴影
语法格式
div {font-weight: 700;color: orange;font-size: 50px;text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);}
2.5 line-style
使用列表布局时,可以使用下列语句去除无序列表前面的小圆点
li {line-style:none;}
第三章 浮动
3.1 传统网页布局的三种方式
网页布局的本质:用CSS把盒子摆放到相应位置
CSS提供了三种传统布局方式:
普通流(标准流)
浮动
定位
3.2 标准流(普通流/文档流)
含义:标签按照默认方式排列
块级元素会独占一行,从上向下顺序排列
常用元素:div、hr、p、h1-h6、ul、ol、dl、form、table
行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行
常见元素:span、a、i、em等
以上都是标准流布局,前面的内容讲述的都是标准流。标准流是最基本的布局方式
注:实际开发中,一个页面基本都包含了这三种布局方式
3.3 如何让多个块级盒子(div)水平排列成一行
按照以前的写法,将div转换为行内块元素可以实现一行显示,但是它们之间会有空白缝隙,无法控制
此时利用浮动就可以很好的完成布局(这也是浮动最典型的应用),因为浮动可以改变元素标签默认的排列方式
3.4 浮动语法
float属性用于创建浮动框,将其移动到一边,直到左边缘/右边缘/另一个浮动框的边缘/块元素
语法格式
.right {float: right;}
3.5 浮动特性
脱标:脱离标准流的控制(浮)移动到指定位置(动),浮动的盒子不再保留原先的位置
示例
.box1 {float: left;background-color: pink;width: 231px;height: 231px;}.box2 {background-color: skyblue;width: 321px;height: 321px;}<div class="box1">浮动的盒子</div><div class="box2">标准流的盒子</div>
效果图
可以看到:设置了浮动的元素,漂浮在标准流的上面,不占位置
如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐(示例可以看3.3)
浮动元素具有行内块元素特性
块级盒子添加浮动后,如果没有设置宽度,它的宽度根据内容决定
浮动的盒子中间没有缝隙,是紧挨在一起的
行内元素同理
3.6 练习
第四章 常见网页布局及清除浮动
4.1 常见网页布局
网页布局准则
多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
先设置盒子大小,再设置盒子的位置
根据准则可以看出浮动元素通常和标准流父级搭配使用
常见网页布局
第一个是标准流布局,第二个是浮动+标准流的布局,可以尝试自行还原,这里不做讲解
4.2 浮动布局注意点
1.浮动和标准流的父级盒子搭配
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
2.一个元素浮动了,理论上其余的兄弟元素也要浮动
如果盒子浮动,而后面的标准流的同级盒子不浮动,会出现覆盖的现象
4.3 为什么要清除浮动
由于父级盒子很多情况下,不方便给高度(子元素需要更新,父元素高度无法确定),但是子盒子浮动不占位置,此时父级盒子高度为0,就会影响后面的标准流盒子
示例
.box {width: 921px;border: 1px solid black;}.damao {float: left;width: 321px;height: 321px;background-color: pink;}.ermao {float: left;width: 231px;height: 321px;background-color: red;}.footer {height: 321px;background-color: gray;}
4.4 清除浮动本质
本质是清除浮动元素造成的影响
如果父级元素有高度,则不需要清除浮动
清除浮动之后,父级会根据浮动的子盒子自动检测高度,这样就不会影响后面的标准流了
4.5 清除浮动方法
clear可以闭合浮动,实际开发中,基本只用clear:both
额外标签法
在浮动元素末尾添加一个空的标签(必须是块级元素)。例如
.clear {clear: both;}<div class="clear"></div>
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差
父级添加overflow属性
为父级标签添加overflow属性,将其属性值设置为hidden、auto或scroll
优点:代码简介
缺点:无法显示溢出的部分
父级添加:after伪属性
:after是额外标签法的升级版,给父元素添加样式
.clearfix:after {content: '';display: block;height: 0;clear: both;visibility: hidden;}.clearfix { /* IE6、7专有 */*zoom: 1;}
优点:没有增加标签,结构更简单
缺点:需要照顾低版本浏览器
代表网站:百度、淘宝网、网易等
父级添加双伪属性
给父元素添加样式
.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix { /* IE6、7专有 */*zoom: 1;}
优点:代码更简洁
缺点:需要照顾低版本浏览器
代表网站:小米、腾讯等
总结
第五章 PS切图
5.1 常见的图片格式
5.2 图层切图
这是最简单的切图方式:右击图层-快速导出为PNG(如果需要导出其他格式,则选”导出为...“。然后根据需要调整设置)
如果图片内容分别在不同图层内,按住shift键选中多个图层-图层-合并图层(或者CTRL+E),之后按上述步骤导出即可
5.3 切片切图
利用切片工具手动划出需要的内容
导出选中的图片:文件菜单-导出-存储为web设备所用格式-设置所需格式-存储
5.4 cutterman插件切图
cutterman是一款运行在photoshop中的插件,能够自动将你需要的图层进行输出, 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出,方便你在pc、ios、Android等端上使用。
下载地址:使用之前确定PS是正式版本(窗口菜单-拓展功能,如果里面的文字发亮说明是正式版本)
使用方法
打开插件:窗口菜单-拓展功能-cutterman
选择存储位置:在插件栏输出那部分选择导出内容存放的位置
切图:选中需要的图层(记得勾选”合并导出选中的图层“),然后点击导出选中图层即可
5.5 像素大厨
作为PS(毕竟安装及使用较为复杂)的替代,功能也是非常强大。本人未使用,所以这里不做讲解,如有兴趣可以查看pink老师的教学视频
5.6 练习
第六章 定位
6.1 为什么需要定位
以下效果利用标准流和浮动难以实现或者无法实现
令某个元素自由在一个盒子移动位置,并且压住其他盒子
滚动窗口时,盒子固定在屏幕某个位置
6.2 定位组成
定位由定位模式和边偏移组成。其中定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置
语法格式
div {position:relative;top:20px;left:20px;}
定位模式
边偏移
注:如果一个盒子既有left属性也有right属性,则默认会执行left属性。同样,如果一个盒子既有top属性也有bottom属性,则默认会执行top属性
6.3 静态定位 static
静态定位是元素的默认定位方式,意思是无定位
tiPS:
按照标准流特性摆放位置,没有边偏移
在布局时很少用到
6.4 相对定位 relative
相对定位的元素是以原来的位置作为参考点移动的
案例
.box1 {position: relative;top: 100px;left: 100px;width: 200px;height: 200px;background-color: blue;}.box2 {width: 200px;height: 200px;background-color: skyblue;}
效果
特点:
它是相对于原来的位置移动的(即移动时的参照点是自己原来的位置)
原本在标准流的位置仍然占有,后面的盒子以标准流的方式对待它(不脱标)。最典型的应用是作为绝对定位盒子的父级元素
6.5 绝对定位 absolute
绝对定位的元素是以最近一级的有定位祖先元素为参考点移动
示例
.grandfather {position: relative;width: 800px;height: 800px;background-color: purple;}.father {width: 500px;height: 500px;background-color: skyblue;}.son {position: absolute;left: 30px;bottom: 20px;width: 200px;height: 200px;background-color: blue;}
效果图
tiPS:
如果祖先元素都没有定位,则以浏览器为准进行定位
如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动
绝对定位不占有原先的位置(脱标)
6.6 子绝父相
含义:子级用绝对定位,父级通常要用相对定位
原因
子级是绝对定位,不会占有位置,可以放到父级盒子的任何位置,而不会影响其他兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时,需要占有位置,因此父盒子只能是相对定位
案例
.father {position: relative;width: 200px;height: 200px;background-color: red;}.son {position: absolute;top: 20px;right: 0;width: 20px;height: 20px;background-color: skyblue;}
效果图
6.7 固定定位fixed
固定定位的元素会固定在浏览器的可视区域,在浏览器页面滚动时元素的位置不会改变
特点
以浏览器的可视窗口为参考点移动,与父级元素没有关系
不随滚动条移动
不占有原先的位置(脱标)
示例:参考右侧的快捷栏
小技巧:将盒子固定到版心右侧
让固定定位的盒子left:50%,走到浏览器可视区的一半位置
让固定定位的盒子margin-left:版心一半的距离。再走版心宽度的一半
示例
.w {width: 800px;height: 800px;margin: 0 auto;background-color: pink;}.box {position: fixed;/* 1.先走浏览器宽度的一半 */left: 50%;/* 2.再将外边距设置为版心宽度的一半 */margin: 405px;width: 100px;height: 50px;background-color: skyblue;}
效果图
6.8 粘性定位 sticky
粘性定位可以认为是相对定位和固定定位的混合
特点
以浏览器的可视区域为参考点移动元素(固定定位特点)
粘性定位占有原先的位置(相对定位特点)
必须添加top、bottom、left、right其中一个才生效
tiPS:跟页面滚动搭配使用。兼容性较差,IE不支持
6.9 总结
6.10 定位叠放次序 index
使用定位时,可能会出现盒子重叠的情况。这时可以使用z-index来控制盒子的前后次序
案例
.box {position: absolute;top: 0;left: 0;width: 200px;height: 200px;}.xiongda {z-index: 1;background-color: green;}.xionger {top: 50px;left: 50px;background-color: red;}.guangtouqiang {top: 50px;left: 100px;background-color: blue;}
效果图
tiPS:
数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越往上
如果属性值相同,则按照书写顺序,后来者居上
只有定位的盒子有z-index属性
6.11 定位的拓展
1.绝对定位的盒子居中
绝对/固定定位的盒子不能通过margin:0 auto水平居中,但是可以通过以下方法实现水平/垂直居中
.box {position: absolute;top: 50%;/* 1.让盒子的左侧移动到父级元素水平中心位置 */left: 50%;margin-top: -100px;/* 2.盒子向左移动自身宽度的一半 */margin-left: -100px;width: 200px;height: 200px;background-color: pink;}
2.定位特性
行内元素添加绝对/固定定位,可以直接设置高度和宽度
块级元素添加绝对/固定定位,如果不给高度和宽度,默认大小是内容的大小
脱标的盒子(浮动、固定/绝对定位)不会触发外边距塌陷
绝对/固定定位会完全压住下面标准流的内容,浮动只会压住盒子,但不会压住文字(因为浮动最初就是为了做文字环绕效果出现的)
6.12练习
6.13 总结
一个完整的网页,是标准流、浮动、定位一起完成布局的。
标准流:可以让盒子上下排列或者左右排列。垂直的块级盒子显示用标准流布局
浮动:可以让多个盒子一行显示或左右对齐盒子。多个块级盒子水平排列用浮动布局
定位:最大的特点是有层叠的概念,可以让多个盒子前后叠压来显示。如果元素在盒子内压住其他元素用定位布局
第七章 元素的显示与隐藏
7.1 display属性
设置一个元素应该如何显示,display隐藏元素后,不再占有原来的位置
示例
.page {width: 200px;height: 200px;background-color: pink;}.george {width: 200px;height: 200px;background-color: skyblue;}
没有设置元素隐藏时,按照标准流正常显示且占有位置
.page {display: none;width: 200px;height: 200px;background-color: pink;}.george {width: 200px;height: 200px;background-color: skyblue;}
设置display:none后元素隐藏,不再占有原来的位置
7.2 visibility可见性
用于指定一个元素是可见还是隐藏。元素使用visibility隐藏后,还是会占有原来的位置
示例
.baba {visibility: hidden;height: 200px;width: 200px;background-color: pink;}.mama {height: 200px;width: 200px;background-color: skyblue;}
设置visibility:hidden后,元素虽然不可见但还是占据原来的位置
7.3 overflow溢出
指定内容溢出(内容超出指定高度或宽度)时的操作
示例
.peppa {overflow: visible;width: 200px;height: 200px;margin: 100px auto;border: 1px solid black;}
默认overflow: visible,显示溢出部分
overflow: hidden,隐藏溢出部分
overflow: scroll,在需要的时候添加滚动条
overflow: auto,在需要的时候添加滚动条
7.4 总结