宽高自适应页面||css居中||背景居中固定||文本溢出显示省略号||改变input的placeholder

最新推荐文章于 2023-07-01 19:59:15 发布

却是

最新推荐文章于 2023-07-01 19:59:15 发布

阅读量315

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43609266/article/details/129973957

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了如何使用CSS实现宽高自适应的页面布局，包括顶部导航栏、侧边栏和内容区域在不同屏幕尺寸下的展示。此外，还探讨了行内块元素的居中显示、背景图片的固定和居中处理、文本溢出时的省略号显示以及如何改变input的placeholder颜色，并考虑了浏览器兼容性问题。

摘要由CSDN通过智能技术生成

宽高自适应页面

如果有个页面，有顶部导航栏、侧边栏、还有内容，那么如何使得页面缩小时背景覆盖，放大时，内容不会被隐藏。
假设顶部导航栏50px,侧边栏120px。
思路：顶部和侧边栏都绝对定位，内容设置padding，全部要加上boeder-size:border-content
实现效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: aqua;
        overflow-x: auto;
        white-space: nowrap;
      }
      .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 120px;
        height: 100%;
        padding-top: 50px;
      }
      .menu {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        background-color: #2181ff;
      }
      .content {
        width: 100%;
        height: 100%;
        padding: 50px 0 0 120px;
        background-color: #fcfcfc;
      }
      .main {
        width: 100%;
        height: 100%;
        background-color: #ffd676;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="main">
        内容自适应Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi
        eos illo distinctio molestias deleniti voluptatum ducimus voluptates
        eaque error culpa. Perspiciatis eum voluptatem accusamus quod eveniet
        iste nulla possimus vel? Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Nesciunt deleniti tempore expedita dolore temporibus,
        assumenda, ea nostrum illo, quam inventore velit recusandae. Vel vitae
        quo corrupti quia perferendis deserunt delectus. Lorem ipsum, dolor sit
        amet consectetur adipisicing elit. Iusto esse, obcaecati rerum odio odit
        culpa sapiente nobis dolores quam ipsam aliquam id error aspernatur
        minima provident delectus repudiandae accusantium beatae?
      </div>
    </div>
    <div class="left">
      <div class="menu">
        侧边栏自适应Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Perferendis quae quidem neque hic natus assumenda dicta quia itaque
        alias sunt cum, ullam incidunt tempora? Suscipit placeat amet impedit
        perspiciatis Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Sit quam qui at nulla ipsum dolorum mollitia accusamus totam id? Nihil
        explicabo repellat voluptate reprehenderit natus facere nostrum
        voluptates animi fugit.
      </div>
    </div>
    <div class="header">
      顶部自适应Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Delectus reprehenderit laborum aperiam officiis doloribus. Ducimus eveniet
      dicta minima, nesciunt repudiandae aliquam, ea aperiam inventore
      consectetur, vel quisquam. Molestias, eum eveniet!laborum Lorem ipsum
      dolor sit amet consectetur adipisicing elit. Labore vitae veritatis
      impedit, autem ratione ducimus corporis eligendi pariatur repellendus,
      quisquam cumque! Eum reprehenderit numquam earum nemo. Deleniti officiis
      eius Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi
      exercitationem voluptate rerum officiis rem laudantium non, dolorum nobis
      aut quibusdam officia, et nisi corporis similique unde ut dolorem commodi
      ullam?
    </div>
  </body>
</html>

css居中

参考链接
https://www.cnblogs.com/xiaoxueer/p/11849997.html

行内块元素

1.和其他元素都在一行
2.宽度没有设置时，宽高就是内容的高度
3.可设宽高(默认是内容宽高)，也可以设置内外边距

<span>...span>  
<a>...a>  
<img/> 
<textarea>...textarea>  
<button>..button>  
<input> 
<br>  
<label>...label>  
<select>...select>  
<canvas>...canvas> 
<progress>...progress>  
<cite>...cite> 
<code>...code>  
<strong>...strong> 
<em>...em>  
<audio>...audio>   
<video>...video>

让行内块元素居中显示

在父元素加入居中样式，button为行内块元素，div为button的父元素

<style>
div {
            text-align: center;
        }
</style>


<body>
  <div>
        <button>鼓励自己一下</button>
  </div>
</body>

背景居中固定

知乎案例，背景固定，中间窗口会动，保证背景图片展示完全
在这里插入图片描述

<style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 500px;
        height: 500px;
        background: rgba(235, 225, 237, 0.3);
        margin: 200px auto;
      }
      body {
        background-image: url(img.jpg);
        /* 以短边为基准 */
        background-size: contain;
        /* 固定背景图片 */
        background-attachment: fixed;
        /* 背景图片居中 */
        background-position: center;
        background-repeat: no-repeat;
      }
    </style>

  <body>
    <div class=""></div>
    <div class="box"></div>
  </body>

文本溢出显示省略号

单行

.text {
        width: 200px;
        height: 200px;
        background-color: beige;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
<div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos repudiandae
      repellendus fuga placeat consequatur
    </div>

注意：当flex时省略号显示不出来，需要加min-width: 0
因为flex不固定宽度，设置min-width: 0让元素不超出父元素，相当于限制了它的宽度。

多行
利用旧版弹性盒子

<style>
      .text {
        width: 200px;
        height: 190px;
        background-color: beige;
        /* 2.设置旧版弹性盒 */
        display: -webkit-box;
        /* 3. 控制行数*/
        -webkit-line-clamp: 9;
        /* 4. 设置子元素的排列方式  垂直排列*/
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos repudiandae
      repellendus fuga placeat consequatur aspernatur, harum explicabo
      temporibus ab expedita dolorem necessitatibus magni illum quidem nihil
      voluptas quisquam voluptate dolore!
    </div>
  </body>

还可以用伪元素，但需要自己判断是否溢出，这里不使用

改变input的placeholder

改变input的placeholder，要考虑兼容性，同时不要使用群组选择器，因为一个选择器无效，均无效
正确示例：

.ipt {
    &:hover {
  		border-color: rgba(255,255,255,0.7);
		}
		&:focus {
			border-color: #fff;
		}
		&::placeholder {
			color: rgba(255,255,255,0.7)
		}
		&::-webkit-input-placeholder {
			color: rgba(255,255,255,0.7)
		}

		&:-moz-placeholder { 
			color: rgba(255,255,255,0.7)  
		}

		&::-moz-placeholder { 
			color: rgba(255,255,255,0.7)  
		}

		&:-ms-input-placeholder {  
			color: rgba(255,255,255,0.7)  
		}
		&::-ms-input-placeholder {  
			color: rgba(255,255,255,0.7)  
		}
}

却是

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
宽高自适应页面||css居中||背景居中固定||文本溢出显示省略号||改变input的placeholder

思路：顶部和侧边栏都绝对定位，内容设置padding，全部要加上boeder-size:border-content。改变input的placeholder，要考虑兼容性，同时不要使用群组选择器，因为一个选择器无效，均无效。如果有个页面，有顶部导航栏、侧边栏、还有内容，那么如何使得页面缩小时背景覆盖，放大时，内容不会被隐藏。因为flex不固定宽度，设置min-width: 0让元素不超出父元素，相当于限制了它的宽度。在父元素加入居中样式，button为行内块元素，div为button的父元素。
复制链接

扫一扫