三大特性
- 层叠性
- 优先级
- 继承性
恰当的使用继承可以简化代码，
color以及text-font-line-开头的属性可以被继承。
书写顺序
- 布局定位属性：
display/position/float/clear/visibility/overflow - 自身属性：
width/height/margin/padding/border/background - 文本属性：
color/font/text-decoration/text-align/vertical-align/white-space/brea-kword - 其它属性：
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
书写时，一定要按照
linkvisitedhoveractive的顺序书写，否则会有显示错误
块级元素
- 块级元素宽度默认是父元素的100%
-
ph1-h6dt是块元素，但其内部不能放其它块元素
行内元素
- 行内元素宽度默认是它本身内容宽度
- 行内元素设置
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，搜素引擎会认为是堆砌关键字，有降权的风险，影响网站排名
通常布局流程如下：
- 根据测量确定页面的版心——主要内容所在区域
- 分析页面中的行模块，以及每个行模块中的列模块。
- 制作HTML结构，先有结构后有样式
- 书写CSS布局页面
flex 布局
采用Flex布局的元素称为Flex容器（flex container），其所有子元素自动称为容器成员（flex item）。当父元素设置flex布局后，子元素的float、clear、vertical-align属性将失效。
flex布局的原理就是通过给父元素添加
flex属性来控制子元素的位置和排列方式。
定义了flex属性的元素，假如内部有::before或::after伪元素，会参与span-空间分配。
父元素常见属性：
-
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来达到水平居中。
绝对定位的元素实现水平居中的方法：
left:50%;transform:translateX(-50%)
z-index只能用于相对定位、绝对定位、固定定位的元素，其它标准流、浮动、静态定位都无效。
绝对定位、固定定位和浮动都会改变元素的默认显示模式，类似于inline-block，所以全屏宽度需要设置width:100%。假如一个设置了浮动/固定定位/绝对定位的行内元素，不需要设置display就可以设置宽度和高度。
绝对定位、固定定位和浮动都不会触发
margin合并和塌陷问题。
高级技巧篇
outline:0|none;可以用来取消input默认对焦后轮廓高亮的效果。input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset; }可以用来去除浏览器自动填充表单后的默认背景色。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文件
<link rel="stylesheet" href="*320.css" media="screen and (min-width:320px)">，由小到大引入。
移动端布局
视口(viewport)是浏览器显示页面内容的屏幕区域。视口可分为：
布局视口（layout viewport），一般移动设备浏览器都默认设置了一个布局视口，分辨率为
980px，所以pc页面在手机上被缩小显示了。视觉视口（visual viewport），用户看到的网站区域，即手机屏幕，通过滑动滚动条来查看完整内容。
理想视口（ideal viewport），需要手动设置
meta视口标签通知浏览器操作，使布局视口宽度与设备宽度一致。
标准的视口设置，<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">：
- 视口宽度与设备一致
- 视口的默认缩放比例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元素大小取值方法：
- 选择一套标准尺寸，如750px
- 屏幕尺寸750 除以要划分的份数，如15，得到
html基础的font-size:50px(750/15=50px) - 假如宽度为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 优化
- 为了提高权重，在 logo 里放置
h1标签 -
h1里放一个a链接，可以返回首页，给a设置大小和logo背景图片 - 为了搜索引擎收录，
a里要写上网站名称。为了美观有两种方法可以隐藏文字：- 给
text-indent设置负值如-999px，然后设置overflow:hidden - 设置
font-size:0
- 给
- 给链接设置
title属性
