- css中命名用中杠线"-";JS中命名用下划线"_"
- 针对textarea文本域中：
- resize: none; 去除拉伸功能；
- outline-style: none; 去掉选中时的聚焦蓝框；
- 单元格中的边框间距设置问题：
- table内联属性设置:在table标签中设置属性，其中边框颜色不能显示，只能在style中设置边框颜色;
<style>
table{
width: 500px;
text-align: center;
border: 6px dashed blue;
}
</style>
- 在body中的table标签添加属性值：其中border为属性值，不能添加边框样式和颜色；（无论设置边框尺寸为多少，都是1px）
<table border="1px" cellspacing="0" cellpadding="0">
...
</table>
- table嵌入样式的设置：在style样式标签中设置分别对thead下的th与tbody下的td设置边框，给table设置
border-collapse:collapse;实现边框重合；
<style>
table{
width: 500px;
text-align: center;
border: 5px solid blue;
border-collapse: collapse;
}
table thead tr th,table tbody tr td{
border: 4px solid red;
}
</style>
- 图片的重置样式设置：
img{
border: 0; /*去除img的默认1px的边框*/
vertical-align: middle; /*去掉图片底侧默认的3像素空白缝隙，display:block也可以实现*/
}
- 删除线标签有s,del两个，重置样式去掉删除线用
text-decoration: none;;
- 斜体标签有i,em两个，重置样式去掉斜体样式，设置
font-style: none;;
- h标签，重置样式去掉粗体样式，设置
font-weight: normal;;
- 设置光标箭头变成小手标：
cursor: pointer;;
- 设置容器的width与height值，指的是除了padding与border以外，内容区域的宽高。若后添加padding与border值，则容器整体宽高会增大，若要保持容器的总宽高不变，必须相应减少设置的宽高值；
- 给input标签添加placeholder后，设置placeholder样式：
.section-nav .w .nav-right input::-webkit-input-placeholder{
font-size: 12px;
text-align: right;
padding: 0 4px;
background-color: #eeeeee;
}
.section-nav .w .nav-right input:hover::-webkit-input-placeholder{
color: #ffffff;
background-color: #ff6700;
}
- 两个内联元素在html中，如果换行书写，这样两个元素之间会有一个空格的间隙；不能紧密相连，解决方法是添加浮动；
- 在容器内添加图片，可以用背景图添加，如果图片有点击效果，可以添加一个空的a链接在背景图上，或者是给a链接添加背景图；
- 背景图添加中，如果图片的尺寸大于添加背景图的容器尺寸，可以用background-size设置背景图添加尺寸。
+ cover属性：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中。
+ contain属性：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
- img在使用过程中添加浮动后，不能继承父级容器的行高，设置行高也不能像单行文本一样垂直居中，解决方法，在外面套一层标签(p div span均可以)；
<ul>
<li><a href="#" target="_blank">手机 电话卡<span><img src="images/jiao.png"/></span></a></li>
</ul>
<style>
ul li a span{
float: right;
}
ul li a span img{
vertical-align: baseline;
}
</style>
- 给ol下的li添加边框，利用伪类元素添加
/*添加边框，使用before与after伪类元素*/
/*给li设置相对定位*/
ol li{
position: relative;
}
/*before与after的公共样式*/
ol li:before,ol li:after{
position: absolute;
content:"";
background-color: #665e57;
}
/*before与after的单独样式*/
/*给li设置一个left的类选择器，设置左部边框*/
ol li.left:before{
width: 1px;
height: 70px;
top: 6px;
left: 0;
}
/*给li设置一个top的类选择器，设置顶部边框*/
ol li.top:after{
width: 64px;
height: 1px;
top: -1px;
left: 6px;
}
- 给不同a便签下的p元素设置不同的背景色，以及a的悬浮特性
<body>
<li><a class="tu1" href="#" target="_blank">
<p></p>
选购手机
</a>
</li>
</body>
<style>
ol li a.tu1 p{
background: url("../images/sp-b-l-01.png") no-repeat center top;
}
ol li a.tu1:hover p{
background: url("../images/sp-b-l-0101.png") no-repeat center top;
}
ol li a.tu1:hover{
color: #fff;
}
</style>
- 开发过程中如果出现文字在默认情况下，顶部超出容器一些，可以通过行高值将其向下调节，只需将行高值大于字体值两像素以上即可；
- 通过设置字体的font-weight值来调节其加粗程度，bold值一般为700左右，无单位，若去除h标签的默认加粗设置，可设置
font-weight: normal;;
- 省略号的设置
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- 在一个容器中，添加一段文字和一个内联元素（span,img）,出现文字与内联元素的位置不居中对齐，可使用
vertical-align: middle;进行设置，但是此设置有一个局限，就是当文字或内联元素宽高过大，middle会存在位置偏移问题，上面空隙会大于下面空隙，偏移会很严重，所以遇到此种情况，可以给vertical-align设置具体的数值，进行调节位置。
<body>
<div class="top">
<h4>小米手机</h4>
<a href="#">
查看全部
<span>></span>
</a>
</div>
</body>
<style>
.top a span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #2196f3;
font-size: 20px;
line-height: 20px;
text-align: center;
vertical-align: 1px;
}
</style>
- 脱离文档流后，内联元素会block化；
- 阴影: box-shadow: x y blur(阴影半径) spread(扩展半径) color inset/outset(默认);
- 过渡复合属性: transition
- transition-property: 指定过渡元素的属性名；如width,height，all即变化的属性；
- transition-duration: 过渡时间，即变化过程的持续时间;
- transition-timing-function: 缓冲的函数；如：ease(默认),ease-in,ease-in-out,linear(恒速);
- transition-delay: 推迟时间，即开始变化的延迟时间；
- 简写: transition: width 1s linear 0.5s;注：简写中每个属性用空格相隔，两个变量之间用逗号相隔；
- 小米项目实战中购物车实现div的动画效果，代码如下：
<style>
.header .w .shopping .loader{
position: absolute;
top: 40px;
right: 0;
width: 316px;
height: 0;
line-height: 98px;
font-size: 12px;
color: #424242;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0,0,0,0.15);/*阴影的使用*/
overflow: hidden;/*在div高度为0时，添加此项使内容隐藏*/
transition: height 0.5s ease;/*添加在需要动画的元素上，即div上*/
}
.header .w .shopping:hover .loader{
height: 98px;
}
</style>
<body>
<div class="shopping">
<a href="#" target="_blank">
<ins></ins>
购物车( 0 )</a>
<div class="loader">购物车中还没有商品，赶紧选购吧！</div>
</div>
</body>
- 小米项目中，导航栏用ul li a做的浮动中，a为内联元素，则它的宽高与内容宽高相等，若想扩大其宽高尺寸或背景颜色范围，可以给a标签添加padding,实际显示上下左右均可设置padding;
