三大特性
- 层叠性
- 优先级
- 继承性
恰当的使用继承可以简化代码,
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
书写时,一定要按照
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
,搜素引擎会认为是堆砌关键字,有降权的风险,影响网站排名
通常布局流程如下:
- 根据测量确定页面的版心——主要内容所在区域
- 分析页面中的行模块,以及每个行模块中的列模块。
- 制作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
属性