CSS琐碎知识点

最新推荐文章于 2024-10-16 11:23:07 发布

weixin_34232617

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量70

点赞数

文章标签：前端 ViewUI

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

版权

1.块级元素

块级元素才可以设置上下padding
块级元素本身就要撑满容器
行内元素居中，父容器设置text-aligin: center
行内元素设置宽度高度无效，行内元素添加padding 和margin，左右生效，上下视觉生效（会遮挡），但不占位置，实际不生效
块级元素居中，设置margin: 0 auto;
控制台=> style中，color: aliceblue 点击即取色器
inline-block 行内块级存在的意义是上下padding margn
既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)又呈现 block 特性(可设置宽高，内外边距) 缝隙问题span之间不要空格
li是块级元素
inline-block 加了padding 默认是以字的基线对齐
vertical-align: top/bottom/middle 对齐三种方式
height = line-heihgt 来垂直居中单行文本
伪元素用来代替标签

2.浮动

浮动元素看到普通元素时，浮动元素看不到普通元素，p中文字会生成一个匿名的行盒，可以看到浮动元素，文字围绕浮动元素 box float遇到p中有文字
一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了
因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间
块级元素设置了浮动，宽度会收缩（不占一整行了），用width:100%
行内元素设置浮动，设置宽高就可以生效
普通流中的块级元素看不到浮动元素（注意先来后到，让着先来的浮动元素，后来的不行）
- js.jirengu.com/jawu/1/edit… （注意三个div更换顺序）
clear:left => 该元素前面有左浮元素，则去左浮元素下方
clear:right => 该元素前面有右浮元素，则去前面元素下方
子元素全是浮动，父容器看不到

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<ul class="navbar">                    <!--class = "navbar clearfix"-->
  <li><a href="#">1首页</a></li>
  <li><a href="#">2产品</a></li>
  <li><a href="#">3服务</a></li>
  <li><a href="#">4关于</a></li>
</ul>
<style>
    .navbar{
      list-style: none;
      border: 1px solid #ccc;
    }
    .navbar>li{
      float: left;
      margin-left: 15px;
    }
    .navbar::after{        /* .clearfix::after */
      content: '';         /* 相当于在后边加了一个非浮动元素 */
      display:block;       /* 块级元素占位 */
      clear:both;
    }
    
</style>
</body>
</html>
复制代码