一.浏览器调试工具
查看CSS属性
1.打开
在网页上F12或者右键检查打开调试工具
2.标签页含义
elements 查看标签结构
console 查看控制台
source 查看源码+断点调试
network 查看前后端交互过程
application 查看浏览器提供的一些扩展功能(本地存储等)
Performance, Memory, Security, Lighthouse 暂时不使用, 先不深究
3.elements标签页使用
ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小.
使用左上角箭头选中元素
右侧可以查看当前元素的属性, 包括引入的类.
右侧可以修改选中元素的 css 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色. 例如
字体大小, 可以使用方向键来微调数值.
此处的修改不会影响代码, 刷新就还原了~
如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号)
二.元素显示模式
在CSS中,元素有很多显示模式,这里具体介绍两种
块级元素
行内元素
1.块级元素
常见元素
h1 - h6 p div ul ol li ...
特点
独占一行
高度, 宽度, 内外边距, 行高都可以控制.
宽度默认是父级元素宽度的 100% (和父元素一样宽)
是一个容器(盒子), 里面可以放行内和块级元素.
Document parent不指明高度
注:文字类的元素内不能使用块级元素
p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div
2.行内元素/内联元素
常见元素
a
strong
b
em
i
del
s
ins
u
span
...
特点
不独占一行, 一行可以显示多个
设置高度, 宽度, 行高无效
左右外边距有效(上下无效). 内边距有效.
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素
Document 内容1内容2内容3
a 标签中不能再放 a 标签 (虽然 chrome 不报错, 但是最好不要这么做).
a 标签里可以放块级元素, 但是更建议先把 a 转换成块级元素.
3.块级元素和行内元素的区别
块级元素独占一行, 行内元素不独占一行
块级元素可以设置宽高, 行内元素不能设置宽高.
块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置
4.改变显示模式
使用 display 属性可以修改元素的显示模式.
可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.
display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素
Document 内容1内容2内容3内容1内容2内容3
三.盒模型
每个HTML元素都相当于一个盒子
1.盒子组成
边框 border
内容 content
内边距 padding
外边距 margin
2.边框
基础属性
粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color
Document test1test2test3
当对边框整体设置又对某个边框单独设置了,就近原则
谁在下面就是什么颜色
.test3 {border-top: red;border:green;border-bottom: blue;border-style: solid;border-width: 4px;}
边框撑大盒子
Document 边框撑大盒子边框不撑大盒子
可以看到第一个比400*400大个边框的距离,第二个就整整是400*400
* {
box-sizing: border-box;
}一般来说这个设置是放在统配符选择器中的,修改浏览器的行为,使得边框不撑大盒子,这里为了演示就放在类里了
3.内边距
padding 设置内容和边框之间的距离
基础写法
默认内容是顶着边框来放置的. 用 padding 来控制这个距离
可以给四个方向都加上边距
padding-top
padding-bottom
padding-left
padding-right
Document
复合写法
可以把多个方向的 padding 合并到一起. [四种情况都要记住, 都很常见]
padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)控制台查看元素的盒模型
这个控制台显示的很清楚
4.外边距
控制盒子和盒子之间的距离
基础写法
可以给四个方向都加上边距
margin-top
margin-bottom
margin-left
margin-right
复合写法
规则与padding相同
margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40Document 
5.块级元素水平居中
前提
指定宽度(如果不指定宽度, 默认和父元素一致)
把水平 margin 设为 auto
三种写法
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;Document 哈哈哈
这里我们就要介绍一下text-align和margin:auto的区别了
margin: auto 是给块级元素用得到.
text-align: center 是让行内元素或者行内块元素居中的.
另外, 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式.
四.去除浏览器的默认样式
浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别.
为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式.
使用通配符选择器即可完成这件事情
* {margin: 0;padding: 0;}五.弹性布局
1.初体验
Document span1span2span3span1span2span3span1span2span3span1span2span3span1span2span3
2.flex布局基本概念
flex 是 flexible box 的缩写. 意思为 "弹性盒子".
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式
基础概念
被设置为 display:flex 属性的元素, 称为 flex container
它的所有子元素立刻称为了该容器的成员, 称为 flex item
flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)
注意:当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效
常用属性
justify-content
设置主轴上的子元素排列方式.
使用之前一定要确定好主轴是哪个方向
| 取值 | 效果 |
|---|---|
flex-start | 子元素紧贴主轴起始端（默认）。 |
flex-end | 子元素紧贴主轴结束端。 |
center | 子元素在主轴上居中。 |
space-between | 首尾贴边，中间等距。 |
space-around | 每个子元素两侧间距相等（首尾间距为中间的一半）。 |
space-evenly | 所有间距（包括首尾）完全相等。 |
未指定 justify-content 时, 默认按照从左到右的方向布局
align-items
设置侧轴上的元素排列方式
在上面的代码中, 我们是让元素按照主轴的方向排列, 同理我们也可以指定元素按照侧轴方向排列.
| 取值 | 效果 |
|---|---|
stretch | 子元素拉伸填满交叉轴（默认）。 |
flex-start | 子元素紧贴交叉轴起始端（顶部或左侧）。 |
flex-end | 子元素紧贴交叉轴结束端（底部或右侧）。 |
center | 子元素在交叉轴上居中。 |
baseline | 子元素根据文本基线对齐。 |
first baseline | 明确使用首行基线对齐（CSS Grid 常用）。 |
last baseline | 明确使用末行基线对齐（CSS Grid 常用）。 |
取值和 justify-content 差不多
理解 stretch(拉伸):
这个是 align-content 的默认值. 意思是如果子元素没有被显式指定高度, 那么就会填充满父元素的
高度
Document span1span2span3
注意:align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents
