在浏览器里调试html和css
问题
写出来的html和css在浏览器里打开之后发现效果和想象并不一样
但是一次次改了html/css再在浏览器里打开来看对不对实在是烦人且没有效率
解决方法
预备步骤（在浏览器打开，右键检查）
比如一个非常简单的html文档在浏览器里打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p>this is a line</p>
<h1> this is another line</h1>
<div>
<p>this is line in div</p>
<h2>another line in div</h2>
</div>
</body>
</html>
然后右键检查
^chrome的效果
^safari的效果
选定某个html元素
比如我发现某个html元素的样式和我想象的不一样，我想改这个元素的样式，那么得先选中它
这时先点击红圈里的光标
^chrome
^safari
接下来各个浏览器差别不大，所以只用chrome做例子。
-
将光标移动到网页上某个元素（不一定非得是某个元素，某整个div或者整个<ol>之类的都可以）
^选择div
^选择一个h1，不同颜色标出的部分对应右下角盒模型各个部分的宽度 -
选定了你想要的元素之后（比如这边选中h1）
在打圈了的地方加入你想要的css内容，之前选中的元素就会加上你想要的css效果
再复制到编译器里面就可以了
右下角四个图标可以加阴影，给元素的字或背景换颜色