CSS Item内容解析

最新推荐文章于 2022-09-30 14:48:22 发布

weixin_34268843

最新推荐文章于 2022-09-30 14:48:22 发布

阅读量1.1k

点赞数

原文链接：https://juejin.im/post/5c7399b0e51d4564d47eb236

版权

CSS Item内容解析

就是用HTML和CSS写了个小东西，讲解一下部分重要的之前没有讲到的。

a标签有默认样式，默认有个下划线。所以这样去除默认样式：

a {
  text-decoration: none;
}
复制代码

a标签默认颜色一般是黑色，你可以这样写，让它继承父元素的颜色。

body {
  color: red; //父元素是红色
} 
a {
  color: inherit;
}
复制代码

span标签

1.

<span>xxx</span>
<span>yyy</span> //xxx yyy
<span>xxx</span><span>xxx</span> //xxxyyy
看到区别了吗？span的空格会在文本上展示出来，不想有空格span之间也不能有空格。
复制代码

2.

span标签里最好不要加div

3.

span不支持设宽高，可padding: ?px ?px;设置需要的宽高不需要写很复杂。

div的高度是由其内部文档流元素的高度总和决定
什么是文档流-文档内元素的流动方向(通俗解释) 举例

<body>
  <span>x</span> //内联元素
  <span>x</span>
  <span>x</span>
  <span>x</span>
  <span>x</span>
  <div>y</div>  //块级元素
  <div>y</div>
  <div>y</div>
  <div>y</div>
  <div>y</div>
</body>
复制代码

看到没，span是左右流动，div是上下流动。所以说div的高度是由内容撑起来的，不需要设置宽高，否则会引起很多bug。

除了迫不得已情况下，不要设置width和height，否则会引起很多bug,(说两遍了)不信you可以try。
脱离文档流 后面会放项目的预览地址，拿这个例子中来说。添加过图片背景之后不能显示，why？因为块级元素高由文档流高度决定，所以我设置height：515px;使其撑开，但是导致图片没有在我需要的位置，所以需要我们脱离文档流，position: fiexd;脱离之后父亲body就管不了我了,但是又出现新问题了，之前设置的a标签浮动和Rscard并排了，这个时候设置width: 100%;但是你会发现上面九个a链接会超出父元素，肿么办，这么多问题，所以解决套路是在NAVBar里加个div.NavBar-inner，这样就OK了。我知道我的叙述肯定只有我自己能看懂，所以我想说一般情况千万不要设置宽高啊。哭
max-width 自适应大小 逗是说比如max-width: 300px;最多不超过300，当你把屏幕缩小它还是挺正常的。如果用width，自己试一下就知道了。(唉，语文老师怕是要被我气屎了)
hello下面的三角形怎么写

<head>
  <meta charset="utf-8">
  <title>Triangle</title>
  <style>
    div {
      border: 10px solid red;
      border-top-color: transparent; //透明
      border-bottom-color: transparent; //透明
      border-right-color: transparent; //透明
      border-top-width: 0px;
    }  
  </style>
</head>
<body>
  <div></div>
</body>
复制代码

vertical-align: top; 垂直对齐一幅图像

Item预览

转载于:https://juejin.im/post/5c7399b0e51d4564d47eb236

weixin_34268843

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Item内容解析

CSS Item内容解析就是用HTML和CSS写了个小东西，讲解一下部分重要的之前没有讲到的。a标签有默认样式，默认有个下划线。所以这样去除默认样式：a { text-decoration: none;}复制代码a标签默认颜色一般是黑色，你可以这样写，让它继承父元素的颜色。body { color: red; //父元素是红色} a { color: inherit...
复制链接

扫一扫