css补充

CSS补充

图片模糊处理

---

filter:blur()

blur是一个函数，里面的值越大，图片与模糊，加单位

img{
width:200px;
height:400px;
filter:blur(5px);
}

img:hover{
filter:blur(5px);
}

基线对齐

---

垂直对齐得方式基线:

基线：浏览器文字类型元素排版中存在用于对齐的基线

vertical-align：

参数	作用
baseline	默认值,与所在行的基线对齐
top	与所在行的顶部对齐
bottom	与所在行的底部对齐
middle	与所在行的中间对齐

作用： 解决行内/行内块元素垂直对齐问题

项目中解决得问题:

• 图片和文字得垂直对齐
• 文本框和按钮无法对齐问题
• input和img无法对齐问题
• div中得文本框，文本框无法贴顶得问题
• div不设置高度由img标签撑开，img标签下面会存在额外间隙问题
• 使用line-height让img标签垂直居中

<style>
      img {
        vertical-align: baseline;
      }

      .mian input {
        height: 30px;
      }
      .mian button {
        height: 36px;
        vertical-align: middle;
      }

      .one input {
        vertical-align: middle;
      }

      .two {
        width: 200px;
        height: 200px;
        background-color: yellow;
      }

      .two input {
        vertical-align: top;
      }

      .three {
        background-color: blue;
      }

      .three img {
        vertical-align: bottom;
      }

      .four {
        line-height: 200px;
        width: 200px;
        height: 200px;
        background-color: aqua;
      }
      .four img {
        vertical-align: middle;
      }
    </style>

<div class="box">
      <img src="./img/ewm.png" alt="" border="1" />
      浏览器文字类型元素排版中存在用于对齐的基线
    </div>

    <!-- 1：文本框和按钮无法对齐问题 -->
    <div class="mian"><input type="text" /> <button>按钮</button></div>

    <!-- 2：input和img无法对齐问题 -->
    <div class="one">
      <img src="./img/ewm.png" border="1" alt="" />
      <input type="text" />
    </div>
    <!-- 3：div中得文本框，文本框无法贴顶得问题 -->
    <div class="two">
      <input type="text" />
    </div>

    <!-- 4:div不设置高度由img标签撑开，img标签下面会存在额外间隙问题 -->
    <div class="three">
      <img src="./img/ewm.png" alt="" />
    </div>

    <!-- 5:使用line-height让img标签垂直居中 -->

    <div class="four">
      <img src="./img/ewm.png" alt="" />
    </div>

光标的类型

---

设置鼠标光标在元素上的显示的样式

cursor

default    默认值，通常是箭头
pointer	   小手效果，提示用户可以点击
text       工子形，提示用户可以选择文字
move       十字光标，提示用户可以移动

overflow溢出部分显示效果

---

溢出部分：盒子部分内容 所超出盒子范围的区域

场景：控制内容溢出部分的显示效果：如：显示，隐藏，滚动条…

overflow

visible		默认值
hidden		溢出部分隐藏
scroll		无论是否溢出都有滚动条
auto		根据是否溢出，自动显示或隐藏滚动条

元素本身隐藏

---

让元素本身在屏幕中不可见，鼠标：hover之后元素隐藏

visibility:hidden		隐藏元素本身，在网页在占位置
display:none			隐藏元素本身，在网页中不占位置

开发中经常使用display属性完成属性的显示隐藏

display：none(隐藏) display:block(显示)

属性选择器

---

通过元素上的HTML属性来选择元素，通常用于选择input标签

E[attr] 选择具有attr属性的E元素

E[attr=“val”] 选择具有attr属性并且属性值等于val的E元素

<style>
	input[type]{
        background-color:yellow;
	}
	input[type="password"]{
        background-color:red;
        border 1px solid blue;
	}
</style>


<div>
    <input type="text" name="" id="">
</div>
<div>
    <input type="password">
</div>

让div在页面中始终保持居中

div{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}