CSS学习点

一、遇到的问题（注意点）

1、图片

只有img标签的时候，css - text-align: center;  没有效果，最后是加了div盒子，然后才移动。

—— 只对图片，无法移动到页面中间；<div><p>都是可以的；

2、css 中，对图片的处理， height无效果， 正确使用？

—— 对img标签，可以进行处理，wdith , height ； border;等都可以；

——之前无法正常使用的原因：

之前的效果施加到外面的盒子上了， 需要对img标签本身起作用；

---

2、选择器：

并集选择器： 同时选择多个标签，进行css效果；（多个标签，也可以是多个类、id）

直接在外围加上不可以吗？ —— 不可以，只是最外围标签套上了效果，里面没有；

子选择器： 只能选择儿子，而不是孙子 （后代选择器 —— 可以只选择孙子，不选儿子；但是做不到子选择器效果）

---

3 、元素：

p 是块元素；

---

4、小米侧边栏案例：

如图效果 ； 先html框架，再css效果；

遇到问题：

1 - 想给div加边框，失败 —— 边框宽度、样式、颜色都需要设置；

2 - 想在链接里面加文字，考虑到需要缩进，还有行间距等，在a块级元素中，又加了p块级元素；

—— 误区：认为CSS文本样式：text_align;text-indent；line-height 只能在P中；  不是的， 只要是块级元素中的文字，就可以；

3 - 在a中的p没有删除时，对a的CSS样式，到不了P上；

4 - CSS文本属性这里：     color - 就是文本颜色； bgc-color - 才是文本背景颜色；

5 - 截图工具提取的颜色 ， 不可以直接用， 需要是rgb(227,10,0)形式；

6 - 文本行间距 line-height 设置为块元素同高，效果是垂直居中的；

7 - 行内元素 -可以是横着的； 转换成块级元素 -- 只会是竖着的， 因为块级元素，就是一个占据一行（调整了大小，也是一行）

---

5、王者荣耀图片案例：

没有自己先敲 —— （对标签的使用，理解，还不是特别到位，容易冗余）

比如这个效果；

1 - 一开始想的是用div盒子去装， 但是F12查看，发现，这是一个h3标签,

还是想着div里面套h3， 没有及时反应过来， H3本身就已经是盒子了。

2 - H3 - 误区理解，认为标题大小不可改变；

             不是的，这里是指代表，盒子大小是H3标签的，但是内部文字大小是可以改变的：

             font-size;

3 - 学会网页F12调试。读取参数，获取网上图片素材等。

---

6、导航栏综合案例：

<!-- 先搭设框架 -->

    <!-- 4个导航是4个链接，需要设置宽高 - 块元素；链接一行 - 行内块元素；

     链接块内，需要设置背景图片；

     文字颜色；垂直居中（line-height），水平居中（text-align）；

     链接伪选择器； -->

遇到问题：

1 - 自己把所有的a标签全部转换成为了 行内块元素；   答案外面嵌套了一层div 块元素盒子；

只是实现左边导航栏，效果没问题；如果想集体居中，对外面的div实现居中，更加容易；

2 -4个链接，不同的背景颜色，链接后变色 —— 需要四个类选择器；

（好像没有用上复合选择器）

3 - 量出来的图片行高，与图片看着不符合；

—— 图片素材，可以再vs code右下角看到；

---

7、水平居中

块元素居中： margin:0 auto (上下外边距0 ； 左右外边距auto ; —— 块元素固定)

行内元素、行内块元素 居中：找父级标签， CSS文本居中 - text-align:center ;

---

8、块元素套娃时塌陷问题

其实就是合并了，因此，视觉效果上，小的外边距被吞了，好像塌陷一样：

上边框颜色可以设置为： transparent (透明的)

为父元素加上 border \ padding；overflow:hidden

---

9、产品案例

花费1h,磕磕绊绊做出来 —— 时间太久，不熟练，主要是浪费时间在测量像素上；

（可能还是得熟能生巧）；

1 - 初始：这个不能少；

* {

margin: 0;

padding: 0;

}

2 - 量取的最外box高宽容易有问题；

3 - 读取背景颜色，body标签设置背景颜色；（忽略了，自己是加了一个边框做区分）

4 - 整个box已经设置了高宽，想要水平居中； 块级元素- margin: 100px, auto【这是宽度已经定了的情况下，指上下边距100px, 左右居中对齐】  ——  外边距这里没有center等，那是背景；文本也只有左中右；

4 - 图片没有在一个box1中做背景图片， 而是直接在box中，插入图片，（从网页拿的原始图片），原始图片太大，—— 并不是量的像素高宽，而是，直接width :100% [完美嵌合box]

5 -  评论部分—— 必须给高度 （没有考虑到，自己只是单纯量了大小）

                             不同评论数，但是与底部的产品评价，一定要留有固定的距离；

【从5反映出来，做页面，就要一开始就有页面布局思路，不能只会量量量】

6、想要有页边距：（是否有width可选）

—— 没有固定的width; 可以考虑用padding(内边距)；

——有固定的width,可以考虑margin(外边距)； 

——否则效果出不来，或者会撑大；

7、ps量像素的时候，可以Ctrl+扩大；

8、灰色竖线那里，可以直接I， 不是特殊符号；

另类做法： <em>  I <em>  —— 会变成倾斜的，怎么去掉倾斜效果

—— 自己第一想到 text-decoration;  （CSS文本）

——但是CSS字体中 font-style:none；

【html、CSS中的标签、属性 有的记不太清，还是需要多复习多看】

9、视频在做页面的时候，非常细节 ——  价格栏那里，三个小模块（行内模块）之间的距离，也用margin自己测量了；

10、自己做的时候，整体框架是链接；但是这里是分别链接的；

---

11、案例练习总结：

 

以后做案例: 

时间充裕; 先自己动手（发现更多问题，更加意识到，自己那里有问题）

时间不充裕：先思考一下，大致思路，跟着视频走，模仿风格，再自己实现一遍，看看有什么问题；

---

12 - 快报案例（待做）：

待做

---

13、浮动

【浮动布局练习2】

在网页布局中； 用浮动+margin来准确控制盒子之间的距离；

（盒子内套盒子，用margin也可以，但是很麻烦）—— 尽量熟练找简单的做法；

边缘盒子的margin需要注意；可能会超出最外侧的盒子大小；（修改的时候注意选择器权重问题）

【小米手机模块练习】

在处理边框距离的时候，margin-left 有时比 margin-ringht 处理要容易很多，不用考虑超出盒子范围；

【在框架构的时候，也可以学习这样，先造好不同颜色块的结构，再填充图片】

（浮动这里的小练习案例都还没有做 —— 都只是搭框架）

---

14：overflow:hidden

① 在解决外边距塌陷问题时；除了加外边框，就是用这个；

② 清除浮动，也可以用这个；（在浮动的父元素上）

③ 超出盒子的内容，隐藏起来； 但是有定位的盒子，要慎用，例如学成在线的那个‘hot’

---

15、图片格式：

jpg: 色彩好，产品类图片；

Gif：图片小动画

png:背景透明图片；

PSD：ps专用，可以直接复制文字，测量大小，距离；

---

  16、测量工具 —— 像素大厨；

---

17、《学成在线》案例 —— 综合

1） -  一个大盒子，第二个小盒子要浮动，那么这个盒子里面，所有的小盒子都要加浮动； 

---

header

导航栏：

2） -   ul-li： 想要将li 变成一行，可以给li加浮动；（第一想法是转换成行级块元素）

3）-  【转换成 行级块元素： 另外一优点： 给行级元素加高宽】

4） - 不能一味用margin来处理盒子边距，例如 导航栏； 每个小盒子的文字不一样多，所以不能给特定的width,    而应该用padding撑开；

【因为是ul - li -a ;  给a标签高度，不给固定宽度，而是给padding; 去撑开a链接与li之间的距离】

5） - 导航栏nav里面链接 - 大部分套路都是 ( div ) - ul - li - a;   

6） - ul--li-a; 想要将a的内容设置垂直居中；（将a转换成为块元素 【li已经浮动变成一行了】）

a设置与nav同高（同header），line-height : 同高； —— 【遇到的问题：li的上下padding存在，因此超高了】

---

搜索框：

1 ) -  表单（input + button）

2)   - button会有自带的 边框（不需要时去掉）

3) - 行内块元素 中间是有缝隙的，且不好确定距离多少；

     所以需要紧贴效果，或者严格控制距离的时候（margin，padding）

4) -  input搜索框，如果要加上边框，框高要减去上下边框和；

5） - 遇到一个问题：

F12检查，input高度是45，但是选中input框，高度是49 ——？

6） - input右边框不需要，去掉；

7)  - padding会撑大盒子，在原本width基础上，减去padding值；

8） - button, 一开始掉下来了，因为测量的不够精准，表单父框位置不够；

9）- 注意： line-height 只能是对文本垂直居中， 块与块之间，只能通过margin/padding

10) - 总体的框架整好了，但是，放背景图片出问题了，不是一个圆，而是前面有别的；

—— 很玄学（图片自己好了）

视频中，up主是直接插入图片，并没有做出一个圆形的框；

自己对search ，仍然是左浮动；但是作者用的是右浮动，且没有设置宽度（不是链接），就是一个文字；

---

banner

子导航栏subnav:

其他的都顺利完成；三块 - ①子导航栏； ②中心背景图片 ③课程表；

1） - 中心背景图片：不是插入，就是背景，因为旁边的子导航栏有一部分压在背景图上；

背景图片-position: top center等，也可以调精确地x，y值；

2） - 有一个问题：（解决）

子导航栏那里，小三角箭头效果没整； 因为似乎是点击效果，会跟随前面的a链接，从白色变成蓝色；

但是小箭头是图片，图片不难，不知道，怎么把前后两个链接整在一起；a里面可以放图片，但是一左一右效果有点难办。

———— a 大链接；在a链接里面 加span盒子； span右浮动；

————PS中，>是图片，但是在代码中，不属于特殊符号，可以直接用 >代替，or &gt;

---

recommender

(精品推荐模块)

1) - div中有三个盒子，想要三个垂直居中 —— 不需要3个盒子，内部line-height;  父元素div - line_hight就可以了，因为行高可以继承的；

2） -当文字不一样长，不给定宽度，而是padding;

3) - 不是左右边框，是每个的左边框；

---

reBox

(精品盒子图片部分)

小技巧：

1 - ctrl + g —— 输入行数，精准定位行；

2 - 在浏览器看页面的时候，有时候不能下滑；

 可以在CSS中，对body标签设置一个背景颜色，很高的高度；

3 - 会遇到父盒子装不下子盒子，最后一个子盒子跑到下一行；

（解决方法一：删去最后一个盒子的外边距）

（解决方法二：不给父元素设置宽度，如果为了换行，那就要设置宽度，但是加上外边框的宽度）

4） - 图片并不是与量取的框完美适配的，可能需要高度宽度-自适应大小；

疑问：

1） - 精品推荐，图片那里的效果图与PSD图片感觉不太一致， 但是F12调整，数字显示高宽正常；但是效果感觉不太对； —— 不知道怎么解决；

2） - 在最后的 【高级 . 1125人在学习】—— 那个小点，父类加上行高，并没有垂直居中；

——  在live中，三个子盒子没有垂直居中，三个子盒子内部也没有垂直居中 【但是前面在recom的时候，确实是子盒子继承父盒子的行高，实现的垂直居中】

3） - 那个分隔符 小点. ，为什么F12高度显示是18px; 即使改成16px，也是无效的；（旁边两个16px,它自己18px）

—— 需要详细看一下视频，怎么做的；

——解决宽高100%自适应的情况---是只对文本，还是对子盒子，还是对父盒子；

—— 是对父盒子，但是当父盒子没有明确设置高度（例如，父元素的高度是由内容决定的），那么 height: 100% 可能不会按预期生效。

---

注意：（清除浮动）

自己在做商品部分的时候，是固定了高度；

但是在实际开发中，不可以固定高度，因为商品量可能还会增加。

——做法：外面的大盒子不给固定的高度，由里面的内容去扩开；

存在问题，如果里面的盒子是浮动的，

那么，这个大盒子的高度实际就是1， 后面的标准流会跑到浮动的商品下面；

—— 此时，需要清除浮动，即对浮动盒子的父元素清楚；

---

footer:

1 - margin - top要注意，不是40px, 因为reBox中，li的margin-bottom是15px;

2 - 最外边框是width不设置固定值的；（自动随着页面走）

    但是里面的小盒子 - 需要继承w的配置；

dl-dt-dd—— html自定义表格；

---

18、遗留点：

有时间通过一遍视频；

看看up主思路；

解决17遗留点；

---

19、定位：

1 ）- 在给图片处理定位的时候，最好外面都套个壳子；

2） - 固定定位的小技巧 —— 小算法；（一种思路） —— 绝对定位盒子的水平居中；不能right,left可以负值；

3） - 绝对定位：（绝对定位之后，不能用margin：0 auto来实现居中）

水平居中：left - 50%; 此时，墙变到竖直中线；此时 - margin-left ：盒子宽度一半； 

不可以margin-right; 因为是固定定位（中线那里是墙，right没有效果，盒子不动）

垂直居中：top - 50%,其他同上；

3） - 粘性定位 ——不常用（其效果常使用JS来实现）；

4） - 浮动只会压住下面的标准流盒子，但是不会压住文字 （一开始，浮动的作用就是为了做文字环绕）

【定位看的太快，不专注，有点分不清绝对定位，固定定位，的用途—— 得做案例练习】

---

20、淘宝焦点图：(待做)

1 -  以前调整行内元素的宽高，都是转换成为 块元素、行内块元素， —— 转换成绝对、固定定位也可以；

2 - 相对定位，占位，可以用margin调整位置 —— 看做标准流；

绝对-固定不可以；—— 有自己的算法（19）

3 - 并集选择器 —— .prev , .next { } —— 两个标签公共部分；

4 - 如果一个盒子既有left属性，也有right属性，先左后右；上下同理；（而不是覆盖，因为不是相同的属性，left，right）

5 - 不必局限在margin- left;  有时两个盒子之间的距离是 1.left+ 2.right 

---

 21 、 网页布局总结：

1） - 标准流；垂直分布

2） - 浮动；行分布

3)   - 定位：层叠

---

22 、土豆案例

目的：

① —— 练习元素显示与隐藏 （鼠标经过，黑色遮盖，选择器：hover{} ，将隐藏的盒子显示出来）

② —— 练习元素的定位；

1） -遮盖盒子不占有位置，所以需要绝对定位和display配合使用；   

注意点：（定位，元素显示，重叠，视觉交互）

（1） —— 当父盒子对margin有设置： 子盒子是绝对定位，父盒子是标准流，此时父盒子的margin依旧会被子盒子继承，但是还是优先定位的left,top等；

（2） —— 想要显示，当鼠标经过时，遮盖显示出来的效果；

受前面的影响：在图片img上增加效果 —— 错误，因为隐藏效果不在img标签；

                         在父盒子box上增加效果 —— 错误，同上；

                         在遮盖子盒子（绝对定位）上增加效果 —— 失败；

正确： 在box上增加效果，当鼠标经过box,那么。zhegai { 显示效果 }

【怀疑的原因： display：none之后，不再占有原来的位置】

对（2）的解释：

之前没有很清晰的认识到：关于定位的重叠情况；

①——display:none 是不占有原来位置的， 即遮盖层不在box层上面，空间视觉都不存在，但确实仍在box内部；

因此，此时点击图片，只能接触到box层；而不是一开始以为的遮盖层；

②—— 对img:hover  .zhegai{}也不行，因为img与zhegai是兄弟层级， CSS选择器只能是从上往下；

③——能用display:none ；

——也能用visibility:hidden [占据空间]

但是即使这样，直接.zhegai{ 显示出来} ，也不行；也只能 .box:hover .zhegai{}

—— 原因： 用户不可见，就是鼠标无法悬停，并没有占据空间，鼠标可以悬停；

【直接与用户交互事件不可发生，间接可以（例如与JS绑定，再捕捉用户行为）】

---

23、精灵图（小图片构成大图片）

 span —— inline-block ，行内元素，各个span之间有缝隙；【距离不精准】

div —— 块元素，变成一行，加上浮动，margin控制距离；【精准控制距离】

1） - line-height : 并不能使父盒子内部的容器垂直居中，这个只能使文本垂直居中（单行文本）；

---

24、字体图标：（字体实现图标效果）

1、去官网下载，压缩包里的文件Font放在html文件同层；

2、将压缩包文件里的style.cssn(字体声明)放在css文件中，

3、在body中，在目标盒子内，放置字体样式口【压缩包的一个demo.html中】

4、CSS对该盒子内字体，设置css样式；

追加字体图标：

---

定位：

子绝父相；  子盒子并不一定必须在父盒子里面，定位的值，可以是负的；

---

25、三角形边框问题：

当一个三角形是边框是5px;  想要将三角形露头 —— 需要 -10px；  而不是 - 5px;因为其他的三角边框只是设置成了透明色，并不代表没有了；

---

26、textarea文本域：（resize防止拖拽)

<textarea><textaraea> 如果是中间没有换行，无padding;  有换行，自动有padding；

文本域属于行内块元素；

---

27、图片（表单，文本域.....）与文字垂直对齐：

vertical - align;

前提：必须是行内块元素，才可以加这个属性；

          文字不在行内块元素里面，而是外面；

应用：

解决图片底部默认空白缝隙问题；

解决方案：

① vertival-alignn :   top / middle / bottom;  （可以继续和文字同一行）——【推荐】

② 将行内块元素转换成块元素： display：bolck;     （独占一行，可能影响其他布局）

---

单行溢出 —— 3行，①先强制一行（不换行）；②隐藏溢出文字 ；③文字溢出时，用省略号；

---

28、提高层级：（margin负值防止压住边框）

鼠标悬停时：hover

①相对定位；

②z-index;

---

29、浮动元素不会压住文字；

但是图片（浮动元素）与文字<p>在同一父盒子中;

如果图片不是浮动元素；图片+p文字的效果就是—— 上下（img - 行内块元素，p 块元素，占据一行）

p - 可能会有自带的内外边距；

所以全局清除margin,padding非常有必要；

---

30：text-align (水平居中)

如果一个盒子，添加了text-align：center;

那么这个盒子，内部所有元素和行内块元素，都会水平居中的；

---

31：重点（line-height控制垂直居中）：

line - height : 只对行内元素 、 行内块元素起作用； 对块元素不起作用（即-不影响块元素的宽高）

但是 - 有个特殊情况： （以学成在线案例，recom模块举例）

——当父盒子有属性 line-height; 子盒子继承这个属性；子盒子是块元素。但是子盒子块元素内部是行内元素，这些元素会继承这些行高，如果行高= 父盒子高度，就会表现出 垂直居中的效果；

——明确一点； ul 是块元素（line-height）， li 是块元素 ，li 内部是a链接（行内元素）；

所以 line-height 影响的不是li的高度， 而是因为li里面有行内元素a, 所以li行高变了，但是a链接的高度不变（内容高度），在外表现，视觉上就是li高度变了， 其实就是行高变- 垂直居中；

---

32、三角形：

---

33、新增选择器：（css3新特性）

①属性选择器；

②结构伪类选择器；

③伪元素选择器；

伪元素是行内元素，不能给宽高，除非转化块or行内块；

---

34、伪元素选择器在字体图标的那个应用：

有个小点：

定位 —— 有个效果，对hover or 伪元素都可以实现；（哪怕原本好像不是子绝父相（实际是））

---

34、课后作业：（待做）

① 布局右侧模块；

② 利用过渡制作小米logo效果；

---