【前端基础篇】CSS基础速通万字介绍（下篇）1：https://developer.aliyun.com/article/1617345
Chrome调试工具
打开方式
有两种方式可以打开 Chrome 调试工具
- 直接按
F12键 - 鼠标右键页面 => 检查元素
标签页含义
elements查看标签结构console查看控制台source查看源码+断点调试network查看前后端交互过程
application查看浏览器提供的一些扩展功能(本地存储等)- Performance, Memory, Security, Lighthouse 先不深究
elements标签页使用
ctrl + 滚轮进行缩放,ctrl + 0恢复原始大小.- 使用 左上角 箭头选中元素
- 右侧可以查看当前元素的属性, 包括引入的类.
- 右侧可以修改选中元素的 css 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色. 例如
- 字体大小, 可以使用方向键来微调数值.
此处的修改不会影响代码, 刷新就还原了~
如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号)
元素显示模式
在 CSS 中, HTML 的标签的显示模式有很多.
此处只重点介绍两个:
- 块级元素
- 行内元素
块级元素
常见的元素：
h1 - h6 p div ul ol li ...
特点:
- 独占一行
- 高度, 宽度, 内外边距, 行高都可以控制.
- 宽度默认是父级元素宽度的 100% (和父元素一样宽)
- 是一个容器(盒子), 里面可以放行内和块级元素.
<style> .demo1 .parent { width: 500px; height: 500px; background-color: green; } .demo1 .child { /* 不写 width, 默认和父元素一样宽 */ /* 不写 height, 默认为 0 (看不到了) */ height: 200px; background-color: red; } </style> <div class="demo1"> <div class="parent"> <div class="child"> child1 </div> <div class="child"> child2 </div> </div> </div>
注意：
- 文字类的元素内不能使用块级元素
p标签主要用于存放文字, 内部不能放块级元素, 尤其是div
如下：
<body> <p> <div>蛤蛤</div> </p> </body>
行内元素/内联元素
常见的元素：
a strong b em i del s ins u span ...
特点：
- 不独占一行, 一行可以显示多个
- 设置高度, 宽度, 行高无效
- 左右外边距有效(上下无效). 内边距有效.
- 默认宽度就是本身的内容
- 行内元素只能容纳文本和其他行内元素, 不能放块级元素
<style> .demo2 span { width: 200px; height: 200px; background-color: red; } </style> <div class="demo2"> <span>child1</span> <span>child2</span> <span>child3</span> </div>
注意:
a标签中不能再放a标签 (虽然 chrome 不报错, 但是最好不要这么做).a标签里可以放块级元素, 但是更建议先把a转换成块级元素
行内元素和块级元素的区别
- 块级元素独占一行, 行内元素不独占一行
- 块级元素可以设置宽高, 行内元素不能设置宽高.
- 块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置
改变显示模式
使用 display 属性可以修改元素的显示模式.
可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.
display:block改成块级元素 [常用]display:inline改成行内元素 [很少用]display:inline-block改成行内块元素
盒模型
每一个 HTML 元素就相当于是一个矩形的 “盒子”
这个盒子由这几个部分构成
- 边框
border - 内容
content - 内边距
padding - 外边距
margin
边框
基础属性
- 粗细:
border-width - 样式:
border-style, 默认没边框.
solid实线边框dashed虚线边框dotted点线边框
- 颜色:
border-color
<div>test</div> div { width: 500px; height: 250px; border-width: 10px; border-style: solid; border-color: green; }
支持简写, 没有顺序要求：
border: 1px solid red;
可以改四个方向的任意边框：
border-top/bottom/left/right
以下的代码只给上边框设为红色, 其余为蓝色.
利用到的层叠性, 就近原则的生效.
border: 1px solid blue; border-top: red;
边框会撑大盒子
div { width: 500px; height: 250px; border-width: 10px; border-style: solid; border-color: green; }
可以看到, width, height 是 500*250, 而最终整个盒子大小是 520 * 270. 边框10个像素相当于扩大了大小
通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.
* { box-sizing: border-box; }
【前端基础篇】CSS基础速通万字介绍（下篇）3：https://developer.aliyun.com/article/1617351
