css小tips

三大特性

• 层叠性
• 优先级
• 继承性

恰当的使用继承可以简化代码，color以及text- font- line-开头的属性可以被继承。

书写顺序

1. 布局定位属性：display/position/float/clear/visibility/overflow
2. 自身属性：width/height/margin/padding/border/background
3. 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/brea-kword
4. 其它属性：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...

权重

• !important：无穷大

• 行内样式：1,0,0,0

• id：0,1,0,0

• class|伪类|属性：0,0,1,0

• 标签|伪元素：0,0,0,1

• 继承|*：0,0,0,0

不存在进制提升，即10个标签不等于1个clalss

字体

• font简写形式：font-style|font-variant|font-weight|font-size|font-height|font-family必须按照此顺序，并且font-size和font-family不可省略

由于各浏览器默认字体大小不同，所以一般全局设置统一字体样式。

a 链接伪类

• a:link
• a:visited
• a:hover
• a:active

书写时，一定要按照link visited hover active的顺序书写，否则会有显示错误

块级元素

• 块级元素宽度默认是父元素的100%
• p h1-h6 dt是块元素，但其内部不能放其它块元素

行内元素

• 行内元素宽度默认是它本身内容宽度
• 行内元素设置margin只有左右生效，上下无效

背景

• background-color默认值是transparent
• background-repeat默认值是repeat
• background-position若只设置一个方向，则在另一个方向上默认居中
• background简写形式：颜色、图片地址、平铺、滚动、位置

盒模型

• 盒模型box-sizing默认值是content-box，需要注意的是：当设置为border-box时，要想文字垂直居中line-height的值应该减去边框和padding
• 外边距合并：上下相邻的两个块元素，假如上面元素的margin-bottom和下面元素的margin-top都有值，则它们的间距为这两个值中的最大值，所以尽量只给一个盒子添加margin值
• 外边距塌陷：嵌套的两个块元素div1>div2，如果子元素div2前面没有内容，给div2设置margin-top时，效果会表现在父元素div1上，子元素div2没有效果，解决这种情况，可以：
  • 设置父元素的padding-top
  • 设置父元素的border-top
  • 父元素设置overflow:hidden
  • 其它方法：设置position:fixed|absolute或float

布局

css 布局三种机制：

• 标准流
• 浮动
• 定位

在做重要的导航栏时，不直接使用a链接，而是li包裹a链接，这样：

• 语义化更清晰
• 直接使用a，搜素引擎会认为是堆砌关键字，有降权的风险，影响网站排名

通常布局流程如下：

1. 根据测量确定页面的版心——主要内容所在区域
2. 分析页面中的行模块，以及每个行模块中的列模块。
3. 制作HTML结构，先有结构后有样式
4. 书写CSS布局页面

flex 布局

采用Flex布局的元素称为Flex容器（flex container），其所有子元素自动称为容器成员（flex item）。当父元素设置flex布局后，子元素的float、clear、vertical-align属性将失效。

flex布局的原理就是通过给父元素添加flex属性来控制子元素的位置和排列方式。

父元素常见属性：

• flex-direction：设置主轴(main axis)方向
• flex-wrap：设置子元素是否换行，默认nowrap
• justify-content：设置主轴上的子元素的排列方式
• align-content：设置副轴(cross axis)上子元素的排列方式，必须是多行才有效，和justify-content一样都是设置内容的空间分配
• align-items：设置副轴上子元素的对齐方式
• flex-flow：复合属性，相当于同时设置flex-direction和flex-wrap，用空格隔开

子项常见属性：

• flex：分配剩余空间，子项占的份数，可以设置百分比%
• align-self：控制子项自己在副轴的排列方式
• order：定义子项的排列顺序，默认是0

浮动

• 子元素的浮动以父元素为基准
• 子元素浮动不会与父元素的border重叠，也不会超过父元素的padding
• 浮动只影响自身及其后的元素
• 浮动元素后面的文字、图片、输入框等元素不会被覆盖，而是环绕

由于开发中父元素不方便给出固定高度，而子元素浮动后脱离文档流，导致父元素内部高度为0，后面正常文档流的块元素就会占据原来的位置。所有要清除浮动造成的影响，使父元素根据浮动的子元素自动检测高度，父元素有了高度，就不会影响下面的标准文档流了。

清除浮动的方法有：

• 在最后一个浮动元素后添加一个空标签div，设置clear属性
• 设置父元素的overflow属性
• 设置父元素::after伪元素
• 设置父元素::before和::after伪元素

定位

绝对定位/固定定位/浮动的盒子不能通过设置margin:auto来达到水平居中。

绝对定位的元素实现水平居中的方法：

1. left:50%;
2. transform:translateX(-50%)

z-index只能用于相对定位、绝对定位、固定定位的元素，其它标准流、浮动、静态定位都无效。

绝对定位、固定定位和浮动都会改变元素的默认显示模式，类似于inline-block，所以全屏宽度需要设置width:100%。假如一个设置了浮动/固定定位/绝对定位的行内元素，不需要设置display就可以设置宽度和高度。

绝对定位、固定定位和浮动都不会触发margin合并和塌陷问题。

高级技巧篇

• outline:0|none;可以用来取消input默认对焦后轮廓高亮的效果。

• resize:none防止文本域textarea拉伸。

• ul默认的margin、padding记得要清除，否则就会出现莫名其妙的间距。

• transition对于display:none的元素无效，因为 transition是对于元素现有的样式计算的，而元素设为display:none后不在文档流中，所以过渡不起效果，看情况可以使用opacity或visibility代替。

• vertical-align只对行内元素和行内块元素有效，通常用来控制图片、表单、文字的对齐。比如A设置为middle，那么前面或者后面的元素要和A的middle对齐。

• 由于文字、图片、表单默认是基线对齐，所以img元素会和盒子底部有空白缝隙。设置vertical-align不是默认的baseline来解决，也可以设置图片的display:block，但这种产生的副作用过大。

• 文字溢出隐藏：white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

• 滑动门技术：给父子两个元素分别设置同一背景图片，背景位置相反，两边固定，宽度由内容撑开，背景自动适应。

• 设置了两个相邻的浮动盒子border宽度，中间就会有两条边框，设置盒子margin左或右为负的border宽度来隐藏一条边框。但这样设置:hover时显示边框，则会少一条边，通过设置position:relative来解决，假如盒子原本已经设置了相对定位，则直接设置z-index即可。垂直方向同理。

• 对于简单的内容（如分页）布局，可以使用div>span>a的结构来布局，这样只需要给div设置text-align:center就可以实现居中效果，不需要额外设置宽度。

• 在文字布局时，假如内容不固定，而且和下面盒子有间距，可以只设置一个较大的height值，这样文字多了可以换行，不需要设置margin就可以保持和下面盒子的间距。

• video视频自动播放zutoplay由于浏览器为了体验，默认禁止，添加添加静音muted属性即可。

• e:first-child指的是第一个子元素是e的元素，而不是e的第一个子元素，而且只要父元素的第一个子元素不是e就选不到。假如子元素的类型都相同e:first-child等同于e:first-of-type，假如子元素的类型不同，使用e:first-of-type更准确。e:nth-child(1)同理

• e:nth-child(3n+1)指的是每3个一组中的第一个，而不是第3*n+1个。可以使用-n+2表示前两个。

• 对伪元素添加:hover属性，应该写为div:hover::after。

• 使用translate移动元素位置不会影响周围其它元素的位置，它的百分比单位是相当于自身的，translate对行内元素没有效果。

• 要实现>这种图标可以给一个盒子设置border然后通过rotate旋转。

• 使用scale缩放既可以设置中心点，又不会影响其它元素，而直接修改宽高则会影响其它元素。

• 同时设置transform多个值，要注意顺序，由于旋转rotate会改变坐标轴方向，当有位移translate和其它属性时，要将translate放在最前面。

• 透视perspective，即观察点离屏幕的距离，要写在被观察元素的父元素上，单位是px，值越大，被观察元素越小。

• transform-style， 指定嵌子元素怎样在三维空间中呈现。 默认值是flat，要想元素呈现3d效果，需要给父元素设置transform-style:preserve-3d。

• 针对不同屏幕引入不同css文件，由小到大引入。

移动端布局

视口(viewport)是浏览器显示页面内容的屏幕区域。视口可分为：

• 布局视口（layout viewport），一般移动设备浏览器都默认设置了一个布局视口，分辨率为980px，所以pc页面在手机上被缩小显示了。

• 视觉视口（visual viewport），用户看到的网站区域，即手机屏幕，通过滑动滚动条来查看完整内容。

• 理想视口（ideal viewport），需要手动设置meta视口标签通知浏览器操作，使布局视口宽度与设备宽度一致。

标准的视口设置，：

• 视口宽度与设备一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许缩放的比例1.0
• 最小允许缩放的比例1.0

二倍图或多倍图，由于视网膜屏（Retina）中物理像素是css像素的两倍或多倍，所以为了在解决高清屏放大后模糊的问题，使用多倍的高分辨率的图片，然后通过css来设置显示的大小。这样即使在高清屏中放大，由于图片本身就是高分辨率的图片，可以正常显示。

移动端特殊样式设置：

/*盒子模型*/
box-sizing: border-box;
/*清除点击高亮效果*/
-webkit-tap-highlight-color: transparent;
/*去除按钮和输入框默认样式*/
/*禁用长按页面时弹出菜单*/
-webkit-touch-callout: none;
-webkit-appearance: none;

移动端布局常见技术选型：

• 单独制作移动页面（主流）：
  • 流式布局（百分比布局），通过设置百分比值根据屏幕宽度伸缩，一般还会设置最大/最小值。
  • flex弹性布局（推荐）
  • less+rem+媒体查询（推荐flexible.js+rem），rem元素大小取值方法：
    1. 选择一套标准尺寸，如750px
    2. 屏幕尺寸750 除以要划分的份数，如15，得到html基础的font-size:50px(750/15=50px)
    3. 假如宽度为100的页面元素的rem值就等于：页面元素width:100px / html的font-size:50px即2rem
  • 混合布局
• 响应式页面
  • 媒体查询
  • bootstrap

SEO 站内优化

网页标题 title

title具有不可替代性，是搜索引擎了解网页的入口和对网页主题归属判断的最佳依据。

• 标题的长度：Google（70kb），35个中文；百度（56kb），28个中文
• 关键字分布：最先出现的词语权重越高
• 关键字词频：主关键字出现3次，辅关键字出现一次

首页标题：网站名（产品名）-网站介绍

网站描述 description

主要描述网站的总体业务，多采用“我们是...“、”我们提供...”、“xxx网作为...”、”电话：...“之类语句。

• 描述中出现的关键字与正文内容相关，主要给人看，要详细，吸引人
• 遵循简短原则，字数含空格在内不超过120个汉字
• 补充在title和keywords中未能充分说明的内容
• 用英文逗号,

关键字 keywords

keywords是页面关键字，应该限制在6~8个关键字左右，电商网站可多点。

logo 优化

1. 为了提高权重，在 logo 里放置h1标签
2. h1里放一个a链接，可以返回首页，给a设置大小和logo背景图片
3. 为了搜索引擎收录，a里要写上网站名称。为了美观有两种方法可以隐藏文字：
   1. 给text-indent设置负值如-999px，然后设置overflow:hidden
   2. 设置font-size:0
4. 给链接设置title属性