初学CSS

初学CSS

• 打开浏览器的审查元素，把一个网站的style都删除了就可以看到它的html是怎么写的

CSS

• ID是不能随便使用的，ID一般是留给JS使用的，一般看到ID都会联想到被JS操作

Google开发者工具

• 如何调整开发者工具的位置？开发者工具的右上角，点击关闭左边的三个小圆点，dock side可以调整
• 怎么查看页面的某个元素对应的HTML？右键-检查，或者开发者工具最左边的小箭头
• 怎么模拟响应式网站（手机）？ 上一选项小箭头的右边
• 怎么查看页面的某个元素对应的CSS？选中HTML后会在右下角的style中显示，其中灰色的部分是系统自动设定的，不用关注，白色那部分才需要关注;甚至可以查看文件是在哪个文件的哪一行中
• 在CSS中往下拉，甚至可以告诉你这些css是从哪里继承来的(inherited from);字体比较亮的是能够继承的（color/font-/text-/line-），字体呈透明的是不能够继承的，比如background-color，特殊的不能被继承的会显示删除线，比如h标签是不能继承父元素的大小的，
• 怎么查看层叠性？在css查看窗口中，其实从下往上就是加载的顺序，可以看到被删除线装饰的声明其实就是被覆盖的

div标签

• 特点(区别于其他同父元素下的标签)
• 作用(他的特点注定了他的作用)
• 使用场景(工程项目)
• 怎么样使用(需要容纳在那个标签下、需要配合哪些标签使用)

解答

• 单纯的HTML是不需要div标签的，只有配合css才能显示出其意义——没有前面提到的那些标签一样的语义化
• 一般div标签是用来和span标签做对比的，div完成大的布局，span完成小的局部的改变，比如<p>i am a <span>boy</span></p>
• span可以退到与font/label做对比，font已经不用了，label是用于表单元素绑定的
• 默认情况下div会单独占一行，而span不会单独占一行
• div是容器级别的标签，span是文本级别的标签，html标签只有这两种区别
• 用以完成网页的布局，如常见的头身脚3段式布局，头部一般包含LOG，导航条；身体一般有侧边栏，显示内容的区域，底部是一些超链接和版权

解答扩展

容器级别标签和文本级别标签的区别

• 容器级别标签可以嵌套其他所有标签
• 文本级别标志只能嵌套文字/超链接/图片
• 怎么验证说法2:<p>我是段落<h1>我是标题</h1></p>，在浏览器中发现会变成<p>我是段落</p><h1>我是标题</h1><p></p>前面也有试验过的

块级元素和行内元素的区别

• 类比HTML中的容器级标签和文本级标签，CSS中对应的就是这两种
• 块级元素会独占一行，行内元素则不会
• 所有的容器级标签都是块级元素，除了P标签外文本级标签都是行内元素
• 关于宽高度:如果没有设置，块级会和父元素一样宽；行内元素内容一样宽，且不能设置宽高
• 行内块级元素:为了解决元素不独占一行，且能够设置宽高而提出的解决方案，类似的img标签就是如此
• 怎么让这三者相互转换？
• 通过在css中设置display属性（inline\block\inline-block）

练习

• 百度搜索首页
• 布局分层:头部：logo\导航;身体:搜索框(核心内容)
• 问题:每一个div的宽度高度，也就是切图问题好，现在响应式已经很流行了，怎么设置？
• 哪些数据单独占一行？哪些数据合起来单独占一行？把这些单独占一行的数据都用div进行布局

如何设置背景图片

• 背景颜色;背景图片;平铺方式;关联方式;定位方式;
• 使用css的background-img:url(地址)属性
• 地址可以是本地的地址，也可以是网络上的地址
• 考虑背景大小，所下载的图片大小，如果背景大于图片，会如何显示？强行拉伸图片填满空间？或者图片在空间内重复填充，如果是后者，图片大小与背景不一定是整数倍，那么该如何显示？如果图片大于背景，又如何显示？
• 怎么样让背景图片不以平铺的方式填充div(背景)，设置backgournd-repeat，里面有4个取值
• 这种平铺显示的方式有什么优点？
• 一般作为网页的背景需要较大的图片，较大的图片传输是比较慢的，使用小的平铺的方式能够加快网页下载速度，有些设计得很好的图片甚至能让你看不出是多张图片平铺显示的
• 还有导航条，导航条的背景颜色可能是蓝色的，出了直接设置背景颜色之外，还可以切成小分平铺的方式

如何控制背景图片的位置？

• 使用css的background-position: 垂直方向 水平方向；取值可以为关键字，也可以为具体的像素值
• 垂直方向:left center right；水平方向:top center bottom

图片的伪装响应式布局

• 用一张比较大的，重要信息在中间的图片当做背景图片
• 用background-position:center居中，实现中间的文字始终位于视点中央
• 有些图片不能下载（比如说腾讯视频首页的一些焦点背景图片），右键是不能够下载的，可以通过查看审查元素获得地址来进行下载
• 一般下面有滚动条的网站都是比较垃圾的网站所以我们不能直接在div中用img作为填充

什么是背景关联方式？

• 默认情况下背景图片会随着滚动条的滚动而滚动，如果不想让背景图片随着滚动条滚动，修改图片背景和滚动条的关联方式background-attachment:,取值有scroll(默认)，fixed

CSS精灵图

• 概念：精灵图是图片的一种合成技术
• 应用场景：在电商网站中，有大量的图片，如果每次请求一张图片都会导致大量的并发
• 使用：配合背景图片，背景定位显示
• 切图可能是用在精灵图中的了
• 如果你注意的话，B站的小图标滑动显示视频不同位置也是通过精灵图实现的

字符实体与外边距

• 注意有时候看起来像是有外边距实际上是没有的，空开的是字符实体
• 可以试验一下<span>test</span> <span>test</span>，通过inline-block转化成可设置宽高的块级元素看看
• 注意一下空格实体元素如果不包裹在某个标签中，在浏览器中也是会显示的，但是却是测量不出宽高的(应该是默认的值)
• 可以看到设置margin后会变得更宽
• 在默认情况下所有body的子元素都会和body有一个margin/padding，所以在开始之前一般都会将其初始化，即设置*{margin,padding:0;}
• 外边距合并，左右外边距是会叠加的，上下外边距是不会叠加的，例如span.class1设置了margin为50px，span.class2设置了margin为100px,则在浏览器中会显示两个div左右间距为150px,但是如果是div.class1设置了margin为50px，div.class2设置了margin为100px,则在浏览器中会显示两个div上下间距为100px

宽度与高度

• 注意区分3个概念：内容的宽高；元素的宽高；元素空间的宽高；我们知道任何标签都可以通过inline-block来设置宽度与高度，所以就有了讨论的意义
• 常规意义上布局的必定是看到的——元素空间的宽高，而对任意一项作出改变都会导致布局发生大的改变
• 通过box-sizing属性的设置可以避免元素宽高的问题，取值有content-box(默认取值)，border-box(改变border/padding都不会有影响)，注意，对margin不会有影响，调整margin后即便设置了boder-box也会发生改变
• text-align的用法，嵌套的div为什么无法居中？
• 只能从magrin,padding的角度考虑？
• 容易被忽略：调整padding会导致父元素的元素宽度变大，手工对应减去父元素的width和higth就可以了，或者直接对父元素使用box-sizing:border-box;
• 对内部盒子使用margin的时候为什么外部盒子也会跟随着往下走？（百度一下margin塌陷）
• 解决方法只能是给外盒子加上border(注意，边框至少要写大小和类型2个属性，只写任意其中一项是无效的)
• 对嵌套盒子位置的定位应该考虑padding,因为margin是给兄弟元素使用的
• 对于嵌套盒子，使用margin:0,auto;可以实现水平居中（为什么？）,但反过来是无法实现垂直居中的

text-align:center和margin:0 auto;的对比

• 首先确认属性是给谁声明的：text-align:center都是给父元素声明的，margin:0 auto;是给想要水平居中的元素声明的
• text-align:是给文字，图片使用的,子div不会受到影响
• 事实上margin:0 auto;应该也可以给文字，图片使用，只要他们被转换成line-block类型

清空浏览器默认的padding和margin

• 使用通配符*的性能不会太好，因为会进行遍历所有元素，只选择必要的就可以了

行高

• 在CSS中，所有行都有自己的行高(应该是属于盒子模型中的内容高度)
• 当div的内容高度未设置时，默认值为内容的高度，内容高度可能等于多行行高高度的结果,也就是内容高度是必然是行高的整数倍（未设置时）
• 怎么设置行高？line-higth
• 设置在哪里？设置在父元素中
• 注意行高不等于字体的高度，字体会在行高中默认垂直居中，可以利用这个特性使得一行文字在某个盒子元素内垂直居中：把行高设置为盒子高度，但是多行文字就只能使用padding了
• 为什么需要行高？字体要以哪里为中线展示？
• 用firework甚至能把字体还原出来，因为可以调节字体、字号、行高
• 右边内边距测量有误差的原因：字号大于剩余内容边距，换行了，一般以左边距为基准