H5C3样式语句汇总

样式语句汇总

----------------------------------样式设置------------------------------------
盒子：
border: 1px solid #000;  设置边框粗细、实线、颜色；
margin: 0 auto;  盒子居中（顺时针）上0、右自适、下0、左自适；
border-top-left-radius: 50%; 设置圆角；
display: flex;弹性盒子；父盒子加该属性；
	align-items:center; 弹性盒子的垂直居中，给父盒子加该属性
	justify-content: center; 弹性盒子的水平居中，给父盒子加该属性
	justify-content: space-around; 均分布局，给父盒子加该属性，子盒子在一行显示，并两边留空 
	justify-content: space-between; 两端贴边，第一个子项在容器的起始位置，最后一个子项在容器的结束位置。
	flex-wrap: wrap; 在一行显示的子盒子换行，常与justify-content: space-around; 均分布局搭配使用

背景图片：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
background: transparent url(imges.jpg) repeat-y fixed top;
background-size: contain; 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小;
background-size:cover;  此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小;
color: #008B8B; 设置背景颜色; 
image: url(./timg.jpg); 设置背景图片;
size: 50px 50px;  设置背景图片的大小；
repeat: no-repeat; 设置背景图片是否重复；
position: center;  设置背景图片的位置；
position: fixed; 元素也会保持在相同的位置，不会随着页面的滚动而移动
position: fixed;left: 0;bottom: 0; 固定在浏览器左下角
background-attachment: fixed; 设置背景图片相对浏览器的定位位置；
fixed： 背景图像相对于视口（viewport）固定；scroll： 背景图像相对于元素固定； local： 背景图像相对于元素内容固定；
float: left; 解决图片间隙；父盒子使用display:flex;弹性盒子时，子盒子添加浮动

文字：
color: red; 设置文字颜色
font-size: 15px; 字体大小
text-align: "center";  文本水平居中；
line-height: 50px;  文本垂直居中方式1；
display: flex; 文本垂直居中方式2；/* 创建 Flexbox 容器 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        height: 200px; /* 设置容器高度 */
        border: 1px solid #ccc; /* 为了便于观察，添加边框 */
text-decoration: none;  去掉下划线；
list-style: none;  去掉列表前的小圆点；
display:inline-block; 让列表内容显示在同一行；
font-weight:bold;  字体加粗；
white-space: nowrap; 超出不换行；/* 超出一行显示省略号 */
	overflow: hidden; 超出范围不显示（溢出隐藏）;
	text-overflow: ellipsis; 超出的文本显示省略号；

表单form：
placeholder="请输入手机号";  提示信息;
	点击账号，输入框也能获取焦点：
	for 属性指定了与该标签关联的表单元素的 id，这样用户点击标签时，对应的表单元素就会获得焦点或者选中。
      <label for="demo">账号：</label>
      <input type="text" name="" id="demo">
	性别单选：
      男<input type="radio" name="gender">
      女<input type="radio" name="gender">
	爱好多选：
      吃饭<input type="checkbox">
      睡觉<input type="checkbox">
      打豆豆<input type="checkbox">
	下拉菜单：
      <select>
        <option value="">所属校区</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="henan">河南</option>
      </select>
	文本域：
      <textarea name="" id="" cols="30" rows="10"></textarea>
	阅读并接受《用户协议》：
      <input type="checkbox"> 阅读并接受<a href="http://www.baidu.com">《用户协议》</a>

表格table：
td{ width="10px"}  设置单元格宽度；
border-collapse:collapse;  去掉单元格之间的间隙；使用在table标签上；
text-align: right;  单元格内文本右对齐；
cellspacing="0"；  外间距；

文本框input:
transition: all 2s;过渡效果

--------------------------------效果设置------------------------------------
元素隐藏的三种方式：
display: none; 不显示，不占据位置；
visibility: hidden; 不显示，占据网页位置；
opacity: 0.5; 透明度，值为0时不显示，占据网页位置；

鼠标悬停：
a :hover{ }  鼠标悬停效果；
body:hover div{ display:none; }  使用body标签控制它的子元素div,只让div产生效果；
box-shadow: x轴偏移量 Y轴偏移量 阴影模糊程度 阴影扩展半径 阴影颜色 inset内阴影；
box-shadow: 3px 3px 9px 100px gray ; 盒子阴影；
text-shadow:  文字阴影；
opacity: 0.2; 透明效果；
background-color:rgba(x,x,x,x)； 透明度在0~1之间；