宽高自适应页面
如果有个页面,有顶部导航栏、侧边栏、还有内容,那么如何使得页面缩小时背景覆盖,放大时,内容不会被隐藏。
假设顶部导航栏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)
}
}