css中的问题汇总

css规则属性的书写顺序

image.png

如何使得盒子居中？

  1. //推荐方法：定位 + translate。可以给内容不定的元素，实现盒子居中
  2. .box {
  3.     display: absolute;
  4.   top: 50%;
  5.   left: 50%;
  6.   transform: translate(-50%, -50%);
  7. }

为什么要清除浮动以及如何清除浮动？

image.png

方法一

上面这个简单的例子可以明显看出。浮动元素脱离正常文档流的层级。如果浮动元素很高，使得父元素没法包裹它，导致下面的元素的内容都会浮动在右侧。而我的目的只想将浮动作用在下一个元素上。所以要清除浮动，直接给不需要浮动的元素增加clear属性。

  1.     clear: left;

方法二

直接增加一个div元素，并给一个clear属性。这种方法不优雅，多增加了一个无用的元素。

方法三

直接给父元素增加伪类。原理同方法二。

  1. .clearfix::after{
  2.     content: "";
  3.   display: block;
  4.   clear: both;
  5. }

方法四

直接在父元素上增加一个overflow：auto。创建一个BFC。

两栏布局设计怎么写

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         html,        
  11.         body {
  12.             height: 100%;         
  13.             padding: 0px;
  14.             margin: 0px;
  15.         }
  17.         div {
  18.             box-sizing: border-box;
  19.         }
  21.         .box-left {
  22.             position: absolute;
  23.             top: 0px;
  24.             left: 0px;
  25.             width: 300px;
  26.             height: 100%;
  27.             border: 3px solid #000;
  29.         }
  31.         .box-right {
  32.             margin-left: 300px;
  33.             height: 100%;
  34.             border: 3px solid #000;
  35.         }
  36.     </style>
  37. </head>
  39. <body>
  40.     <div class="box-left"> 
  41.     </div>
  42.     <div class="box-right">
  43.     </div>
  44. </body>
  46. </html>

电商网站标题前后的符号怎么写？符号的位置怎么定位比较好？

image.png
答：

  • 标题设置固定的宽高150*45px。这样设置的好处是伪元素定位时，容易设置位置参数。不然左上角为参照点不好设置参数。
  • 标题前后的符号使用伪元素。

    网站logo怎么写？

    关键点1网站的logo在用户网速很慢时，无法渲染css样式，用户依旧能够访问链接。
    关键点2网站的logo使用背景图片，而不是直接插入图片。因为浏览器对于背景图片有缓存机制，其次图片无法加载时会有小红×。
    关键点3通过设置height=0，padding-top=58px，使得背景图片显示在padding盒中。 ```html

```