CSS
- css引用
<!-- 推荐写法 -->
<link rel="stylesheet" href="css/style.css" />
<!-- 不推荐写法 -->
<style type="text/css">
@import url(style.css);
</style>- css padding属性与margin属性
大盒子用padding，小盒子用margin（优先使用padding）。
延伸：
margin属性会合并边距冲突问题
html
<div class="box-top">aa</div>
<div class="box-bottom">bb</div>css
.box-top {
margin-bottom:10px;
}
.box-bottom {
margin-top:10px;
}阻止合并方法
html
<div class="box-top">aa</div>
<div class="clearfix"></div>
<div class="box-bottom">bb</div>css
.box-top {
float: left;
margin-bottom:10px;
}
.box-bottom {
float: left;
margin-top:10px;
}
.clearfix{
clear:both;
}- css font设置
一般网页字体设置
大小：12px 、 14px
建议使用em单位。
行高：18px
优先使用无单位，无单位的会继承后再计算，值是动态的，有单位的会算出来然后继承，值是固定的。
颜色：#333333、#666666
字体颜色不要使用纯黑色（#000000）。
配色秘要：永远不要使用纯黑 - 学UI网www.xueui.cn
html {
/* 推荐写法 */
font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
} Tahoma字体针对Windows平台。
Helvetica针对MacOS平台。
Arial通用性字体。
sans-serif针对Liunx平台，其实是指无衬线字体。
中文网页不设置字体，默认是宋体。
延伸：
微软雅黑字体是有版权的，是微软的，所以不建议使用该字体。
调用微软雅黑字体是不会涉及版权的。
html {
/* 推荐写法，使用英文 */
font-family: microsoft yahei;
/* 不推荐写法 */
font-family: "微软雅黑";
}使用微软雅黑字体是涉及版权的。
@font-face {
font-family: yahei;
src: url(yahei.woff);
}- css font-style: oblique与 font-style: italic区别
font-style: oblique，将没有斜体字进行倾斜。
font-style: italic，使用斜体的文字。
- css border：0与border：none区别
boder：0; 等价于 border-width: 0; 兼容所有浏览器。
border：none; 等价于 border-style: none; boder: none;的渲染效果要比boder: 0;渲染效果要快些。
- css display与visibility隐藏效果区别
display:none; 浏览器不会分配该元素的空间，不占文档流。
visibility:hidden; 浏览器会分配该元素的空间，占文档流。
- css display: inline-block;有空格
原因：
inline-block属性值在html中产生空白符（ ）。
解决方法：
html
<div class="wrap">
<div class="item-box">aa</div>
<div class="item-box">bb</div>
<div class="item-box">cc</div>
</div>1.css添加margin属性。
.item-box{
display: inline-block;
width: 40px;
height: 40px;
margin-right: -5px;
background: #ff0000;
}2.父元素添加font-size:0;
.wrap{
font-size:0;
/* 禁用webkit浏览器字体限制 */
-webkit-text-size-adjust:none;
}
.item-box{
display: inline-block;
width: 40px;
height: 40px;
background: #ff0000;
}不建议使用元素标签去掉闭合方式移除空格，原因浏览器会自动添加闭合标签。
- css选择器类型
通配选择器
* （选择所有标签元素）
标签选择器
html （选择<html>标签元素）
id选择器
#user （选择id为user 元素）
id选择器具有唯一性。
class选择器
.user （选择class为user的所有元素）
.user.text-blue （选择class为user与text-blue的所有元素）
.user .text-blue （选择class为user元素里面选择class为text-blue的所有元素）
关系选择器
div,p （选择所有 <div> 元素和所有 <p> 元素）
div p （选择 <div> 元素内部的所有 <p> 元素）
div>p （选择父元素为 <div> 元素的所有 <p> 元素）
div+p （选择紧接在 <div> 元素之后的所有 <p> 元素）
属性选择器
element[name="user"] （选择其 name 属性值为user的element元素）
element[src^="https"] （选择其 src 属性值以 "https" 开头的每个element元素）
伪类选择器
element:hover （设置在此元素的划过）
element:first-child（设置在此元素出现第一个子元素）
伪类对象选择器
element:before （设置在此对象前面的内容）
element:after （设置在此对象后面的内容）
延伸：
选择器优先级（从高到低）id>class>html>* 。
css属性值 !important是最高优先级。
- css权重
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
如果有样式之间冲突问题，一般行数在后面样式的会覆盖前面的行数样式。
- css颜色代码
优先使用十六进制颜色与RGB颜色（兼容旧版本），其次使用RGBA 颜色值，HSL 颜色，HSLA 颜色（现代浏览器支持，支持透明）。
- css代码简写
颜色代码简写，paddin、margin、 font、border、background属性简写成一行。
- 不要使用css表达式
影响浏览器性能，除非需要兼容IE旧版本。
- css单位em与rem使用
一般应用在移动端，移动端父元素要设置一个定值。
html
<div class="wrap">
<div class="item-box">aa</div>
<div class="item-box">bb</div>
<div class="item-box">cc</div>
</div>css
.wrap {
font-size: 16px;
}
.item-box {
font-size: 1em;
}em是相对单位，拥有相对大小属性，用于文字。
rem是css3的相对单位，拥有绝对大小与相对大小属性，用于设置长宽度，间距等。
- css滤镜
图片利用css filter变色，达到图片颜色切换效果。
- css剪切
利用css clip-path生成不同规则的图案。
- css文本两端对齐
html
<p>
My name is Yu-Root. My name is Yu-Root.My name is Yu-Root.My name is Yu-Root.My name is Yu-Root.My name is Yu-Root.My name is Yu-Root.My name is Yu-Root.My name is Yu-Root.
</p>css
/* 文本段落 */
p {
width: 100px;
text-align: justify;
/* 兼容IE，非IE浏览器可以不写 */
text-justify: inter-ideograph;
word-wrap : break-word;
}- css min-width/min-height属性与max-width/max-height属性用法
PC web页面使用max-width/max-height属性，适配小屏幕设备。
moblie web页面使用min-width/min-height属性，适配大屏幕设备。
浏览器窗口缩放，页面位置错位设置min-width与min-height属性。
1552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
