202507 记录平时的一些事情

li 里面嵌套 a 元素

li 的尺寸靠里面的 a 元素撑起来，

a 元素是 inline 不能设置宽高，但是可以设置 line-height 行高和 margin 和 padding，

此时，如果 a 元素不设置 display: block 对尺寸和位置没有影响，但是对背景色有些影响

<style>
  *{margin: 0;padding: 0;}
  ul{
    list-style: none;
    position: absolute;
    left: 200px;
    height: 40px;
    border: 1px solid orangered;
  }
  li{
    float: left;
  }
  ul::after{
    content: "";
    display: block;
    clear: both;
  }
  a{
    display: block; /* 此时该属性影响背景 */
    height: 40px;
    line-height: 40px;
    background-color: yellow;
    padding: 0 20px;
  }
</style>

<ul>
  <li><a href="javascript:void(0);">秒杀</a></li>
  <li><a href="javascript:void(0);">优惠券</a></li>
  <li><a href="javascript:void(0);">PLUS会员</a></li>
</ul>

a 元素的排列

因为 a 元素默认沿基线对齐，而基线的排列影响位置，此时需要设置 float: left 浮动

input 框

不写 HTML 文档结构，设置 input 的宽高，好像没有生效

<style>
  #form{
    border: 2px solid #e2231a;
    font-size: 12px;
    width: 600px;
    height: 32px;
  }
  input{
    display: block;
    padding: 2px 20px 2px 20px;
    width: calc(100% - 44px);
    height: 26px;
    line-height: 26px;
    border:1px solid transparent;
    outline: none;
    background-color: lightgoldenrodyellow;
  }
</style>

<div id="form">
  <input type="text" />
</div>

把 html 文档结构写上，input 设置的宽高生效了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input</title>
</head>
<body>

<style>
  #form{
    border: 2px solid #e2231a;
    font-size: 12px;
    width: 600px;
    height: 32px;
  }
  input{
    display: block;
    padding: 2px 20px 2px 20px;
    width: calc(100% - 42px);
    height: 26px;
    line-height: 26px;
    border:1px solid transparent;
    outline: none;
    background-color: lightgoldenrodyellow;
  }
</style>

<div id="form">
  <input type="text" />
</div>

</body>
</html>

202507 记录平时的一些事情

Leave a Reply