css知识点(持续更新中。。。。。)

haileyLing
311 阅读5分钟

本文收集了个人遇到过的CSS知识点。

1 实现居中的一种简单方式
   <div class="wrapper">
	<div class="ite">
	</div>
  </div>

     .wrapper{
        display:flex;
    	}
	.ite{
	  width:100px;
	  height:100px;
	  background:blue;
	  margin:auto;
	}

2.一侧固定一侧自适应
 <div class="container">
    <div class="one item">我是固定</div>
    <div class="two item">我是自适应</div>
    <div class="three item">我是固定</div
 </div>

    .container{
	    width:500px;
		height:500px;
		border:1px solid black;
		display:flex;
	  }

     .item{
	    height:30px;
	 }
	 
      .one{/* 固定*/
         background:gray;
    	 flex:0 1 auto;
      }
      
   .two{/*自适应*/
        background:#ddd;
    	flex:1 1 auto;
       /*放大，缩小，主轴上的宽度 */	   
   }

   .three{
           background:gray;
           flex:0 1 auto;
   }

3. font-size: 0;解决inline元素间的空白间隙
<ul>
    <li>我是第一项</li>
    <li>我是第二项</li>
    <li>我是第三项</li>
    <li>我是第四项</li>
</ul>
<style>
    ul {
        list-style: none;
    }
    li {
        width: 25%;
        display: inline-block;
        background: green;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
</style

效果其实是下面这样的：

解决：是给li的父级ul设置： font-size: 0; 给li设置：font-size: 16px;

4.利用padding-top/padding-bottom百分比，进行占位和高度自适应

在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度。

比如：父元素宽度是100px, 子元素padding-top:50%，那么padding-top的实际值就是100*50%=50px

对于图片等资源来说，加载是需要时间的，即便网页加载速度已经很快了，由于高度被图片撑开的过程，不可避免会出现闪烁，这时候我们的padding-top等就发挥大用处啦。

<div id="container" class="placeholder">
  <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/18/16ca2eb4d2c1c0e6~tplv-t2oaga2asx-image.image" />
</div>

.container {
    width:50%;
}

.placeholder {
    padding-top:50%;
}

实际上这时候，每个li的实际高度并没有受到约束，内容多高（图片）li就多高，想要实现宽高等比？我们需要设置图片的定位为绝对定位，并且为.container添加相对定位

  #container {
  width: 50%;
  position: relative;
  background-color: red;
  overflow: hidden;  //需要触发BFC消除margin折叠的问题
}
.placeholder{
 padding-top: 50%;
} 
img {
  position: absolute;
  top: 0;
  width: 100%;
}
5.-webkit-overflow-scrolling属性 消除ios回弹效果

-webkit-overflow-scrolling:touch; 当手指从触摸屏上移开，会保持一段时间的滚动，可解决ios端微信h5页面上下滑动时卡顿、页面缺失问题

-webkit-overflow-scrolling:auto; 当手指从触摸屏上移开，滚动会立即停止

6.text-align-last实现文字两端对齐

<div>姓名</div>
<div>手机号码</div>
<div>验证码</div>
<div>账号</div>
<div>密码</div>

div{
margin:10px 0; 
width:100px;
border:1px solid red;
text-align-last: justify;
}
7.实现购物车高度自增。

每多添加一个商品到购物车，最低部的商品是最先添加的商品，购物车自底向上递增高度。 

    <div class="content">
	     <ul>
		          <li>66666</li>
			  <li>66666</li>
			  <li>66666</li>
			   <li>66666</li>
			  <li>66666</li>
			  <li>66666</li>
		 </ul>
	</div>
	  .content{
		   width:500px;
		   height:20;
		   border:1px solid blue;
		   position:fixed;
		    right: 0;
                    bottom: 0;
		 }
		 ul{
		 
		   position:absoulte;
		   top:0;
		    right: 0;
		 }
8 使用:valid和:invalid校验表单

<div class="bruce flex-ct-x">
	<form class="form-validation">
		<div>
			<label>名字</label>
			<input type="text" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
		</div>
		<div>
			<label>手机</label>
			<input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required>
		</div>
		<div>
			<label>简介</label>
			<textarea required></textarea>
		</div>
	</form>
</div>

.form-validation {
	width: 500px;
	div {
		margin-top: 10px;
		&:first-child {
			margin-top: 0;
		}
	}
	label {
		display: block;
		padding-bottom: 5px;
		font-weight: bold;
		font-size: 16px;
	}
	input,
	textarea {
		display: block;
		padding: 0 20px;
		outline: none;
		border: 1px solid #ccc;
		width: 100%;
		height: 40px;
		caret-color: $blue;
		transition: all 300ms;
		&:valid {
			border-color: $green;
			box-shadow: inset 5px 0 0 $green;
		}
		&:invalid {
			border-color: $red;
			box-shadow: inset 5px 0 0 $red;
		}
	}
	textarea {
		height: 122px;
		resize: none;
		line-height: 30px;
		font-size: 16px;
	}
}
pointer-events禁用事件触发(限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)

<div class="bruce flex-ct-x">
	<a class="disabled-trigger" href="https://www.baidu.com">点我</a>
</div>

.disabled-trigger {
	padding: 0 20px;
	border-radius: 10px;
	height: 40px;
	background-color: $purple;
	pointer-events: none;
	line-height: 40px;
	color: #fff;
}
使用:focus-within分发冒泡响应

<div class="bruce flex-ct-x">
	<form class="bubble-distribution">
		<h3>注册</h3>
		<div class="accout">
			<input type="text" placeholder="请输入手机或邮箱" pattern="^1[3456789]\d{9}$|^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" required>
			<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/greeting.1415c1c.png~tplv-t2oaga2asx-image.image">
		</div>
		<div class="password">
			<input type="password" placeholder="请输入密码(6到20位字符)" pattern="^[\dA-Za-z_]{6,20}$" required>
			<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/blindfold.58ce423.png~tplv-t2oaga2asx-image.image">
		</div>
		<div class="code">
			<input type="text" placeholder="请输入邀请码(6位数字)" pattern="^[\d]{6}$" maxLength="6" required>
			<button type="button">查询</button>
			<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/greeting.1415c1c.png~tplv-t2oaga2asx-image.image">
		</div>
		<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/normal.0447fe9.png~tplv-t2oaga2asx-image.image">
		<ul>
			<li>
				<input type="radio" name="sex" id="male">
				<label for="male">Boy</label>
			</li>
			<li>
				<input type="radio" name="sex" id="female">
				<label for="female">Girl</label>
			</li>
		</ul>
		<button type="button">注册</button>
	</form>
</div>

.bruce {
	background-color: #999;
}
.bubble-distribution {
	position: relative;
	margin-top: 50px;
	padding: 25px;
	border-radius: 2px;
	width: 320px;
	background-color: #fff;
	h3 {
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}
	div {
		margin-top: 10px;
	}
	img {
		position: absolute;
		left: 50%;
		bottom: 100%;
		margin: 0 0 -20px -60px;
		width: 120px;
	}
	ul {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
		height: 30px;
		line-height: 30px;
	}
	li {
		position: relative;
		width: 45%;
		transition: all 300ms;
		&:focus-within {
			background: linear-gradient(90deg, $blue 50%, transparent 0) repeat-x,
				linear-gradient(90deg, $blue 50%, transparent 0) repeat-x,
				linear-gradient(0deg, $blue 50%, transparent 0) repeat-y,
				linear-gradient(0deg, $blue 50%, transparent 0) repeat-y;
			background-position: 0 0, 0 100%, 0 0, 100% 0;
			background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
			animation: move 500ms infinite linear;
		}
	}
	input[type=text],
	input[type=password] {
		padding: 10px;
		outline: none;
		border: 1px solid #e9e9e9;
		border-radius: 2px;
		width: 100%;
		height: 40px;
		transition: all 300ms;
		&:focus:valid {
			border-color: $blue;
		}
		&:focus:invalid {
			border-color: $red;
		}
	}
	input[type=radio] {
		position: absolute;
		width: 0;
		height: 0;
		&:checked + label {
			border: 3px solid transparent;
			background-color: $blue;
			color: #fff;
		}
	}
	label {
		display: block;
		border-bottom: 1px solid #ccc;
		width: 100%;
		background-clip: padding-box;
		cursor: pointer;
		text-align: center;
		transition: all 300ms;
	}
	button {
		overflow: hidden;
		margin-top: 10px;
		outline: none;
		border: none;
		border-radius: 2px;
		width: 100%;
		height: 40px;
		background-color: $blue;
		cursor: pointer;
		color: #fff;
		transition: all 300ms;
	}
}
.accout,
.password,
.code {
	img {
		display: none;
		margin-bottom: -27px;
	}
	&:focus-within {
		img {
			display: block;
		}
		& ~ img {
			display: none;
		}
	}
}
.code {
	display: flex;
	justify-content: space-between;
	button {
		margin-top: 0;
	}
	input {
		&:not(:placeholder-shown) {
			width: 70%;
			& + button {
				width: 25%;
			}
		}
		&:placeholder-shown {
			width: 100%;
			& + button {
				width: 0;
				opacity: 0;
			}
		}
	}
}
@keyframes move {
	to {
		background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;
	}
}
avatar
文章
阅读
粉丝