HTML + CSS 一些常见的问题与结论

问题总结

1、Z-index 对背景图片没有作用

2、图片无法显示

  • 如果某个图片除了图片外其他区域是透明的，用浏览器打开后，浏览器中只能看到图片部分

  • 若碰巧图形区域为黑色，浏览器恰好又为图形添加了一个黑色背景图片，则什么都看不到

3、z-index无效

  • 因为没有设置 position 为非 static 定位

4、opacity

为父元素设置 opacity 为50%，其子元素也是 50% 的 opacity

opacity: 1 ;为完全透明

5、inline-block 对齐问题

对同一行所有的 inline-block 元素 指定 vertical-align : top;

6、嵌套问题

  • a 并不能嵌套 a 标签

  • p 不能嵌套 div

7、层次问题

  • 通常使用绝对定位时，多个元素放在同一位置的不同层次。

  • 因为使用了 z-index 后导致 a 元素向后移动一层，鼠标无法悬浮。

8、外边距可以为负数

9、fixed 和 absolute 相对于视口进行对位 的区别

如果 absolute 相对于视口（ 暂且理解为浏览器 ） 进行定位

  • fixed 动态的变动 不管鼠标怎么滚动 都在浏览器的某一处 动态的变动

  • absolute 下拉滚动条到后面会看不到，在浏览器的固定位置不动

10、sticky 定位

菜鸟教程解释：sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

11、表单可以通过子元素设置父元素的属性

后期使用 JavaScript 操作

12、img 上放置文字

  • 建议使用 background-image 属性

  • 但也可以使用绝对定位结合 img 来实现效果

13、box-sizing （CSS3 新增属性）

box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:

  • box-sizing :border-box;

  • box-sizing :content-box;

不使用 CSS3 box-sizing 属性

默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

14、:after 和 :before

用于内容生成

可以在元素的前面和后面生成内容

15、vertical-align

垂直对齐方式

  • top

  • middle

  • bottom

16、Text-overflow属性

text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

  • clip（默认值） 修剪文本。

  • ellipsis 显示省略符号来代表被修剪的文本。

  • string 使用给定的字符串来代表被修剪的文本。

17、文字高度

很多高度使用相对高度，相对于文字框的高度

18、white-space

规定段落中的文本不进行换行：

  • normal ( 默认值 ) 默认。空白会被浏览器忽略。

  • nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。

其他的暂时不关注

19、属性书写规范

书写顺序不是唯一的，但是建议顺序参考 《谷歌的前端开发手册》

20、替换元素

例如： input 随着 type 的变化而发生改变

21、容器类型元素 优先使用浮动

如：div span

22、fieldset

<fieldset> 标签可以将表单内的相关元素分组。

<fieldset> 标签会在相关表单元素周围绘制边框。

  <fieldset>
     <legend>Personalia:</legend>
     Name: <input type="text"><br>
     Email: <input type="text"><br>
     Date of birth: <input type="text">
   </fieldset>

23、浮动带来的父元素塌陷问题

解决方案：

  • 设置父元素的高度

    • 简单

    • 但假设元素有了更高的高度的话，会被限制

  • 增加一个空白的 div 标签 清除浮动

    • clear ： both ；

    • padding ： 0；

    • margin ： 0；

      • 优点

        • 简单

      • 弊端

        • 代码中尽量避免空 div

  • 为父元素 设置 overflow: hidden;

    • 优点： 简单

    • 弊端：下拉场景中避免使用（无法显示）

  • 为父元素添加一个伪类 （目前最流行的解决方案）优先使用

 .container:after {
     content : '';
     display : block;
     clear : both ;
 }

24、transition 对 display 无效

25、通过一个父元素的子元素选择另一个父元素的子元素

使用 JavaScript 通过 css 难以实现

26、border-radius

注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

27、box-shadow

来源：菜鸟教程

值说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

28、定位（ position ）

仍然在标准文档流中

  • static （ 默认值 ）

  • relative 相对于正常的位置进行定位 如果没有使用 left 和 top 等 位置不动

  • absolute

    • 当当前元素没有任何父元素采用非 static 时，相对于浏览器窗口来定位

    • 相对于当前元素的第一个 非static 定位的父元素进行定位 （就近原则）

  • position: sticky; 基于用户的滚动位置来定位。

    粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

    它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

    元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

    这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

     

29、网页变灰 （ 滤镜 ）

filter : grayscale(1); // 100% 灰

属性，可以继承

30、下拉菜单

在不使用 JavaScript 的情况下 建议使用父子关系

31、内联块需考虑对齐方式

vertical-align ： top ；

32、BFC

内联元素可以通过 display float position 等方式 转换为 BFC （ Block formatting context： 块级格式化上下文 ）但不能把曾经的内联元素当作一个纯粹的 block

触发 BFC 有 6-7 种方式

33、marquee（ 滚动 ）

HTML 5 不再赞成使用，但没有提出替代方案

属性：

  • direction ： left | right | up | down ；

  • behavior ： scroll | slide | alternate ；

34、元素居中问题

display : block ; // 采用 margin ： 0 auto ；设置相对应的宽度 会让元素居中 但 display : inline | inline-block ; 不会居中。没有独占一行

35、分隔符的实现

1、可以使用 | 来实现

2、对 inline-block 类型元素 设置边框 但 宽度要为 0 。

36、通过 XML 来描述的图片

扩展名通常为 SVG

这样传输的图片效率更高

37、输入框光标贴着边框

为输入框加上 padding

38、backgound-attachment

backgound-attachment : 用于确定元素本身的定位方式。

值描述
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
initial 设置该属性的默认值。 阅读关于 initial 内容
inherit 指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容

39、select / option 是一种用户体验极其差的 UI 设计 尽量不使用

40、button / input 有边框 和 轮廓 并且与内联元素相同 有间隙

41、背景裁剪方式 background-clip

值说明
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。

42、背景定位方式 background-origin

background-Origin属性指定background-position属性应该是相对位置。

padding-box背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框

43、flex-direction

flex-direction 决定主轴的排列方向

flex-direction ： row | row-reverse | column | column-reverse ;

44、flex-wrap

是否换行

flex-wrap ： nowrap | wrap | wrap-reverse ；

45、：focus-within 获得焦点

46、label

 <label for="XXX"></label> // 为谁准备的文字 不会造成误解

 

 

posted @ 2020-05-14 10:53  ZachYoung  阅读(336)  评论(0)    收藏  举报