首页  思维导图  详情

表现CSS

2020-04-29 15:52:28   10  举报





AI智能生成

个人前端学习

作者其他创作

大纲/内容

CSS3：级联样式表（层级样式表）

新增选择器。 权重: 行内（1000） > id（100） > 类,伪类（10） >元素 ,伪元素（1） > *（0）

子元素选择器（直接后代选择器）：父元素>子元素，选中直接后代。只会选中下一代不会选中更后代

兄弟元素选择器：兄弟元素 + 兄弟元素，选中前一个兄弟元素遇到的第一个要找的兄弟元素，就是只改第一个兄弟

通用兄弟选择器：兄弟元素 ~ 兄弟元素，选中前一个兄的后面的所有要找的兄弟，就是改所有兄弟

伪类选择器：

动态伪类（锚点伪类、用户行为伪类）：这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来

a.锚点伪类 :link :visited

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

b.用户行为伪类 :hover :active :focus

a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */

a:active {color: #0000FF} /* 被选择的链接 */

a:focus {color: #0000FF} /* 获得焦点后的改变 */

UL元素状态伪类： IE9 以上才兼容

:enabled 可输入状态，选择器匹配每个已启用的元素（大多用在表单元素上）

:disabled 不可输入的，选择器匹配每个被禁用的元素（大多用在表单元素上）。

:checked 选中的，选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）

css3结构类

:first-child 结构上第一个元素的子类元素

:last-child 结构上最后一个元素的子类元素

:nth-child 结构上第n个子类元素

:nth-child(n)参数： 1.n从0开始计算。 2.奇数：odd=2n+1、偶数：even=2n 3.也可以是3n+1表示相隔3被选中，以此类推。 4.当为n+数字，则表示从这个数值开始后面的所有都被选中。

Element：nth-last-child（N） 概念 匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。（从1开始计数）

Element：only-child(当它是独生子才生效） 概念 ：only-child选择器匹配属于其父元素的唯一子元素的每个元素（唯一对应元素）

Element：nth-of-type（N） 概念 ：nth-of-type（N）选择器匹配属于父元素的特定类型的第N个子元素的每个元素

Element：nth-last-of-type（N） 概念 匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数

Element：first-of-type 概念 ：first-of-type选择器匹配属于其父元素的特定类型的首个子元素的每个元素

Element：last-of-type 概念 :last-of-type选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素

Element：only-child（它是独生子才生效） 概念 ：only-child选择器匹配属于其父元素的唯一子元素的每个元素（唯一对应元素）

Element：only-of-type （它是父元素的唯一类型才生效） 概念 ：only-of-type选择器匹配属于其父元素的特定类型的唯一子元素的每个元素

:empty：匹配没有子元素（包括文本节点）、没有内容的每个元素

否定选择器:not(Element/Selecter)选择器匹配非指定元素/选择器的每个元素

伪元素 用于向某些选择器设置特殊效果

::first-line 对元素的第一行文本进行格式化，只对块级元素起作用

::first-letter 向文本的首字母设置特殊样式，只能用于块级元素

::before 在元素的内容前面插入新内容，常用“content”配合使用

特点：1.第一个子元素，2.行级元素 3.内容通过content写入 4.标签中找不到对应的标签

::after 在元素的内容后面插入新的内容，必须搭配 content 使用。

特性： 1.常用于清除浮动，给要清除浮动元素的父级元素设置。 2.插入小图标。

列如：div::after{ display: block; content:""; clear: both;} 清除浮动三个样式缺一不可。

ELement：：selection 概念 用于设置在浏览器中选中文本后的背景与前景色

属性选择器

1.选择所有带有attribute属性元素 element[attribute] 2.选择所有使用attribute="value"的元素 element[attribute="value"] 3.选择attribute属性包含单词“value”的元素 element[attribute~="value"]（一般用于class类选择器常用） 4.选择attribute属性值以“value”开头的所有元素 element[attribute^="value"] 5.选择attribute属性值以“value”结尾的所有元素 element[attribute$="value"] 6.选择attribute属性值包含"value"的所有元素 element[attribute*="value"] （常用，只要包含"value"的都可以，例如，p[class*=s]{}也可以指定"twos"，这里是"value"=s，"value"不再是单词，可以是单词里面的一个字母） 7.选择attribute属性值为“value”或以“value-”开头的元素 element[attribute|="value"] （常用于js中id选择器）

CSS3 圆角： border-radius属性：一个最多可指定四个border-*-radius属性的符合属性，这个属性允许你为元素添加圆角边框！

border-top-left-radius:定义了左上角的弧度

border-top-right-radius:定义了右上角的弧度

border-bottom-left-radius:定义了右下角的弧度

border-bottom-right-radius:定义了左下角的弧度

多值： border-radius（四个值）:左上角右上角右下角左下角 border-radius（三个值）:左上角右上角和左下角右下角 border-radius（两个值）:左上角和右下角右上角和左下角 border-radius（一个值）:四个圆角值相同

border-radius属性一个角分为水平方向和垂直方向。所以当使用boder-radius属性合在一起写的时候，一个角的两个方向都包括了。如果要设置不一样的值，需要用/隔开。

CSS3盒阴影 box-shadow

h-shadow（水平位置偏移量）允许负值。必写；

v-shadow（处置位置偏移量）允许负值。必写；

blur（模糊距离）可选；

spread（阴影尺寸）可选；

color（阴影颜色）可选；

inset（内部阴影）可选；扩展属性，正值缩小，负值增大

box-shadow: 10px（横向，正值往右，负值往左） 10px（纵向，正值往下，负值网上） 10px（模糊，从边框到内容，完成渐变模糊） 10px（扩展，四周边界往外扩展10px） yellow（阴影颜色）

可以写内外两个阴影用逗号隔开

---- CSS3边界图片 ---- border-image

border-image-source属性 border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式 语法 border-image-source：none； border-image-source：url("...")；

border-image-slice属性 border-image-slice属性指定图像的边界向内偏移 语法 border-image-slice：number   |   %    |   fill；

border-image-width属性 brder-image-width属性指定图像边界的宽度 语法 border-image-width：number   |   %   |    auto；

border-image-outset属性 border-image-outset用于指定在边框外部绘制border-image-area的量 语法 border-image-outset：length   |   number；

border-image-repeat属性 该属性用于图像边界是否重复（repeated）、拉伸（stretched）或铺满（rounded） 语法 border-image-repeat：stretch   |   repeat   |   round   |   initial   |   inherit；

CSS3背景图像区域

borderground-clip属性：指背景绘制区域

border-box:背景被裁减到边框盒

padding-box:背景被裁剪到内边距框

content-box:背景被裁剪到内容框

transparent,透明

*backgroung-origin设置元素背景图片的原始起始位置 *这个属性要配合background-position属性使用，才会在水平和垂直方向进行偏移

background-origin：content-box；背景图像相对于内容框来定位。

background-origin：padding-box；背景图片相对于内边距啦定位。

background-origin：border-box；背景图片相对于边框来定位。

背景图像大小 background-size：length  |  percentage  |  cover  |  contain;

cover：即将背景图片等比缩放以填满整个容器，做到不留白

contain：即将背景图片等比缩放至某一边紧贴容器边缘为止，要么宽度100%，要么高度100%,取决于图片大小

---css3多重背景图像--- css允许设置使用多个背景图像 background-image：url（2），url（1）； 元素引用多个背景图片，前面图片依次覆盖后面图

CSS3 背景属性整合 背景缩写属性可以在一个声明中设置所有背景属性

语法： background： 1、color 颜色 2、position 位置 3、size 大小 4、repeat 重复与否 5、origin 定位 6、clip 区域 7、attachment 状态是否滚屏 8、image url

CSS3渐变

CSS3线性渐变(开头记得-webkit）

线性渐变-从上到下（默认） background: linear-gradient(color-stop1,color-stop2,...);

.线性渐变-从左到右（direction方向：left/right）： background: -webkit-linear-gradient(begin-direction,color-stop1,color-stop2,...); background: -moz-linear-gradient(end-direction,color-stop1,color-stop2,...); background: -o-linear-gradient(end-direction,color-stop1,color-stop2,...); 标准写法background: linear-gradient(to end-direction,color-stop1,color-stop2,...);

.线性渐变-对角（level 水平方向：left/right，vertical竖直方向：top/bottom）： background: -webkit-linear-gradient(begin-level begin-vertical,color-stop1,color-stop2,...); background: -moz-linear-gradient(end-level end-vertical,color-stop1,color-stop2,...); background: -o-linear-gradient(end-level end-vertical,color-stop1,color-stop2,...); 标准写法background: linear-gradient(to end-level end-vertical,color-stop1,color-stop2,...);

线性渐变-使用角度（angle角度：left/right）： background: linear-gradient(angle,color-stop1,color-stop2,...); 角度说明：0deg将创建一个从上到下的渐变，90deg将创建一个从左到右的渐变。

linear-gradient:角度 -webkit内核浏览器使用角度规则与标准不同。 -webkit内核浏览器开始角度（0度）在水平线方向，以逆时针方向。（上图） 标准的开始角度（0度）则是垂直线方向，以顺时针方向。（下图）主要区别在0度和90度上

-颜色结点 语法 background：linear-gradient（color1 length percentage，color2 length percentage，...）; 用百分比控制颜色的结点 1.最后一个不写，默认100%； 2.第一个不写，默认0%；

重复线性渐变 repeating-linear-gradient(color length/percent,color)。就是不要写满100%

css3径向渐变 

径向渐变-设置形状 background:radial-gradient(shape,color-stop1,color-stop2,...); 形状：circle,ellipse(,默认椭圆)

径向渐变-尺寸大小关键字 background:radial-gradient(size,color-stop1,color-stop2,...); 形状和尺寸不用逗号“，”隔开 关键字说明： closest-side:最近边 farthest-side:最远边 closest-corner:最近角 farthest-corner:最远角

CSS 径向渐变--重复渐变（不要写满100%） 语法： background：repeating-radial-gradient(color1 length | percentage, color2 length | percentage,

其他渐变

---- IE浏览器渐变（IE6-IE8） ---- 语法： filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='startColor'，endColorstr='endColor'，GradientType=0)； *startColor和endColor必须为十六进制 *GradientType为渐变类型，可以是0、1、2三种渐变

CSS3文本属性

CSS3文本阴影

语法： text-sgadow：h-shadow v-shadow blur color； h-shadow：第一个属性值，表示水平阴影的位置，可以是负值 v-shadow：第二个属性值，表示垂直阴影的位置，可以是负值 blur：第三个属性值，表示模糊的距离，设置为负值时，没有模糊的效果 color：第四个属性值，表示阴影的颜色，也可以用rgba设置为透明颜色

CSS3换行

word-break属性 规定自动换行的处理方法 word-break：normal  |  break-all  |  keep-all

normal：正常左边对齐

break-all：表示只要到该换行的地方都换行（强制换行）

keep-all表示在半角空格或连字符地方换行。（与normall效果差不多）

word-wrap属性

word-wrap属性 允许长单词，URL地址换行到下一行。 word-wrap：normal | break-word

normall 默认值，文本自动换行。

break-word 断开

CSS3新的文本属性

前提！！！text-overflow属性起作用需设置overflow：hidden text-overflow属性 规定当文本溢出包含元素时发生时的事情 text-overflow：clip（溢出裁剪）|ellipsis（溢出显示省略号）|string（可自行设置显示效果，只有火狐兼容）；

CSS3字体

@font-face的语法规则 网页嵌入特殊字体，网页加载的同时，也加载字体样式。 @font-face｛ font-family:<字体名称> src：<字体路径>（可添加多个） font-weight<字体粗细>(可选填) font-style<字体样式>（可选填） ｝

CSS3 @font-face的取值说明 YourWebFontName：自定义的字体名称，他将被引用到web元素中的font-family source：自定义的字体的存放路径，可以是相对路径也可以是绝对路径（建议相对路径） format：自定义字体的格式，主要用来帮助浏览器识别 weight和style：weight定义字体是否为粗体，style主要定义字体样式，如斜体

format类型

1、TrueType（.ttf）格式： .ttf字体是Windows和Mac的最常见的字体，是一种RAW（写入式）格式，因此它不为网站优化。

2、OpenType（.otf）格式： .otf字体被认为是一种原始的字体格式，其内置在TrueType的基础上，所以也提供了更多的功能。（IE浏览器不兼容）

3、（最好的）Web Open Font Format（.woff）格式： .woff字体是Web字体中最佳格式，它是一个开放的TrueType/OpenType的压缩版，同时也支持元数据包的分离

4、Embedded Open Type（.eot）格式： .eot字体是IE专用字体，可以从TrueType创建此格式字体 兼容性：IE4+

5、SVG（.svg）格式： .svg字体是基于SVG字体渲染的一种格式

css3 @font-face字体通用模板： @font-face { font-family: 'YourWebFontName';/* 给字体起的名字 */ src: url("YourWebFontName.eot");/* 兼容IE9以上的浏览器 */ src: url("YourWebFontName.eot?#iefix")format("embedded-opentype"),/* 兼容IE6-IE8浏览器 */ url("YourWebFontName.ttf")format("truetype"),/* 兼容手机端,Safari,Android,iOS*/ url("YourWebFontName.woff")format("woff"),/* 兼容所有浏览器 */ url("YourWebFontName.svg#YourWebFontName")format("svg");;/* 针对IOS开发 */ }

CSS3 转换

CSS3 2D转换

CSS3 Transform

rotate()----->旋转 通过指定的角度参数对原元素指定一个2D rotation（2D旋转）。 语法：transform:rotate(<angle>); 参数说明：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转。

移动 translate value值可为具体值px、em、百分比等。百分比指的是自身 translate（）方法，根据向右（X轴）和顶部向下（Y轴）位置给定的参数，从当前元素位置移动。

translateX(x)仅水平方向移动（X轴移动）；

translateY(Y)仅垂直方向移动（Y轴移动）；

translate(x,y)同时移动

transform:translate(x,y)中，y值为可选参数。 若不写y值则默认为0，表示在X轴平移。 x值为必写值，若只想在y轴垂直方向移动，则需写x=0.

scale缩放 transform:scale(number)---整体缩放倍数（缩小、扩大），1为基准100%，不需要单位

transform:scaleX（x）--坐标原点在水平方向中心点上

transform:scaleY（y）--坐标原点在垂直方向中心点上

transform:scale（x，y）--坐标原点在图片的正中心 y为可选值，若y不写则默认为与x值相同，保证图片等比例缩小或放大，不会变形。不需要单位

扭曲skew 中心点为几何中心。 transform : skew / skewX / skewY（角度）

skewX（deg）水平方向：角度正值--逆时针斜切，角度负值--顺时针斜切。 角度为：底边与高的夹角。

skewY(deg)：角度正值--顺时针斜切，角度负值--逆时针斜切 角度为：底边与宽的夹角。

skew(x,y):y为选填，当y值不填，默认为0。x必填。 有效值为：-90度到正的90度。

CSS3 3D转换

CSS3 Transform

3D转换角度--transform：rotate

rotateX(deg)--围绕着几何中心X轴旋转

rotateY(deg)--围绕着几何中心Y轴旋转

rotateZ(deg)--围绕着几何中心Z轴旋转(效果类似于rotate() )

transform：rotate（x,y,z,角度）--x,y,z表示旋转的方向，第四个参数表示旋转的角度，参数不允许省略。rotate（1,1,1,45deg）三个叠加效果。x,y,z值在0~1，0表示此方向不旋转，1表示旋转45deg。

4个数值其中某个为负值，表示逆时针旋转

CSS3的translate3d()----->3d移动

(1)transform:translateZ(<translation-value>);----->指定对象Z轴的平移（常用于遮罩里面）；

2)transform:translate3d(x,y,z);----->指定对象的3D位移； 参数说明：第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略。

3D缩放scale

(1)transform:scaleZ(<number>);----->指定对象Z轴的缩放； 参数说明：参数对应Z轴，不允许省略。

2)transform:scale3d(x,y,z);----->指定对象的3D缩放； 参数说明：第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略。

CSS3 Transform与坐标系统

其实就是更改transform的中心点

transform-origin:x y z; 更改转换元素的参考中心点;可以省略z，表示2D坐标。 xy可以用关键词来标注，如left和right等。

CSS3矩阵

矩阵书写：matrix() 是元素2D平面的移动变换，2D变换矩阵为3*3 matrix3d()是元素3D的移动变换，3D变换则是4*4的矩阵 transform：matrix（a,b,c,d,tx,ty); 注意书写方向是竖直方向

假设x=0,y=0，transform：matrix（1，0，0，1，x，y)等同于translate(x,y)

矩阵matrix缩放： transform:matrix(sx,0,0,sy,0,0)——等同于scale(sx,sy);

矩阵matrix旋转： transform:matrix(cos0,sin0,-sin0,cos0,0,0)——rotate(0deg);

矩阵matrix拉伸： transform:matrix(1,tan0y,tan0x,1,0,0)——skew(0xdeg,0ydeg);

transform：matrix3d(sx,sy,sz,)等同于scale3d中的sx,sy,sz,其他没任何区别~~~~~

CSS3 扩展属性

transform-style属性： 指定嵌套元素是怎样在三维空间中呈现。

语法： transform-style: flat|preserve-3d; *flat为默认值；preserve-3d为3D环绕效果；该属性给父级添加。

给父元素加上transform-style：preserve-3d就能实现3d环绕

perspective：number 观察视角与z平面的距离,透视效果

perspective：origin属性 默认值：perspective-origin :50% 50%; 观察的位置，类似主视图俯视图左视图切换视角 若值为bottom，表示从下往上看 center表示平视 若值为top，表示从上往下看

backface-visibility ： visible / hidden 指定元素背面面向客户时内容是否可见，默认为可见

CSS3过渡（用来写动画）

过渡（transition） 允许css的属性值在一定的时间内平滑地过渡； 在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变css的属性值。

语法 transition-property：none | all | property（具体名称） 参数说明： none （没有属性改变） all（所有属性改变），默认值 property（元素属性名）

--- CSS3过渡（transition）属性 ----（必须有的！过渡动画不可缺少的属性） transition-duration（过渡时间） 属性：检索或设置对象过渡的持续时间。 语法：transition-duration: time; 参数说明： time----->规定完成过渡效果需要花费的时间（以秒或毫秒计），默认值是0s。

- linear：线性过渡。等同于贝塞尔曲线（0.0,0.0,1.0,1.0）【匀速运动】 - ease：平滑过渡。等同于贝塞尔曲线（0.25,0.1,0.25,0.1）【结束比较生硬】 - ease-in：由慢到快。等同于贝塞尔曲线（0.42,0.0,1.0,1.0）【结束比较生硬】 - ease-out：由快到慢。等同于贝塞尔曲线（0.0,0.0,0.58,1.0） -ease-in-out由慢到快再到慢。等同于贝塞尔曲线（0.42,0.0,0.58,1.0）【比较人性化】 - step-start：等同于steps（1，start） - step-end：等同于steps（1，end）

transition-delay（延迟）属性 属性：检索或设置对象延迟过渡的时间。 语法：transition-delay: time; 参数说明： 指定秒或毫秒数之前要等待切换开始，单位为秒（s）,默认值为0

--- CSS3过渡（transition）属性简写 ---- transition属性：复合属性，检索或设置对象变换时的过渡。 语法：transition: property duration timing-function delay; *语法顺序不能错

css3的animation和transition有什么区别 1、animation多两个参数循环和动画方式 2、transition 不能自行触发，通过hover等动作，或者结合js进行触发。animation可以自行运行 3、transition可控性相对较弱，只能够指定起始和结束的状态，而animation可以定义多个关键帧 4、动画在运行结束之后，需要回到初始状态 5、transition的作用，可以用一句话来概括“平滑改变CSS值”

CSS3 动画

引入动画名：@keyframes  动画名

动画属性

animation-name属性：检索或设置对象所应用的动画名称 语法： animation-name：keyframename | none（默认）；

animationname 必需。定义动画的名称。 keyframes-selector 必需。动画时长的百分比。 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同） css-styles 必需。一个或多个合法的 CSS 样式属性。

animation-duration 属性：检索或设置对象动画的持续时间。 语法：animation-duration: time; 参数说明： time----->指定动画播放完成花费的时间。默认值为0，意味着没有动画效果。

animation-timing-function 动画过渡属性参数 1. linear 线性过渡 2. ease 平滑过渡 3. ease-in 由慢到快 4. ease-out 由快到慢 5. ease-in-out 由慢到快，再慢。

animation-delay 属性：检索或设置对象动画的延迟时间。 语法：animation-delay: time; 参数说明： 可选。定义动画开始前等待的时间，以秒或毫秒计算。默认值为0。

annimation-delay是动画之外的属性，不管设置多少秒，都不会影响动画本身的循环。

CSS3 动画循环次数 animation-iteration-count : infinite（无限）/ number ( 默认为1 )。 例子中动画10s后接着运行，而非每个循环完毕后，停顿两秒。

参数说明： normal：正常方向； reverse：反方向运行； alternate：动画先正常运行再反方向运行，并持续交替运行； alternate-reverse：动画先反方向运行再正方向运行，并持续交替运行。 【后两个值必须配合循环属性才能实现效果】

参数说明： none：默认值。不设置对象动画之外的状态； forwards：设置对象状态为动画结束时的状态； backwards：设置对象状态为动画开始时的状态； both：设置对象状态为动画结束或开始的状态。

animation-play-state 属性：指定动画是否正在运行或已暂停。 语法：animation-play-state: paused丨running;

paused----->指定暂停动画。 running----->默认值，指定正在运行的动画。

animation 整合写法： 1. 动画名称(name), 2. 持续时间(duration), 3.过渡方式(timing-function) 4. 动画延时(delay) 6. 动画反向运动(iteration-count ) 7. 动画不播放时应用到的样式(direction ) 8.动画运行或暂停(fill-mode play-staye ); 备注：name和duration必须有，如果里面有两个时间，第一个时间默认为duration，除name为第一个，其余属性不要求顺序

动画性能优化

--- CSS3动画（will-change）原理 ---- 怎么样让动画显示的更流畅： 1、position-fixed 代替 background-attachment 2、带图片的元素放在伪元素中 3、巧用will-change ------------------------------------------------- 目标：增强页面渲染性能

CPU和GPU CPU即中央处理器，解释计算机指令以及处理计算机软件中的数据。 GPU即图形处理器，专门处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几何计算而设计的，有了它，CPU就从图像处理的任务中解放出来，可以执行其他更多的系统任务。

现状： CSS的动画、变形、渐变并不会自动触发GPU加速，而是使用浏览器稍慢的软件渲染引擎。 在transition，transform和anumation的世界里，应该卸载进程到GPU以加快速度。 只有3D变形会有自己的layer，2D变形不会。

硬件加速： 在计算机中把计算量非常大的工作分配给专门的硬件来处理，减轻CPU的工作量。

translateZ()(or translate3d()) Hack 为元素添加没有变化的3D变形，骗取浏览器触发硬件加速。

代价： 这种情况通过向它自己的层叠加元素，占用PAM和GPU存储空间。

--- CSS3动画（will-change）应用 ---- will-change： 属性：提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置。 语法：will-chang: auto | scroll-position | contents | <custom-ident> | <animateable-feature>；

关键词说明： auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。 scroll-position：表示将要改变元素的滚动位置。 contents：表示将要改变元素的内容。 <custom-ident>：明确指定将要改变的属性与给定的名称。 <animateable-feature>：可动画的一些特征值，比如left、top、margin等。 ！！！使用注意（勿滥用、提前声明、remove）

CSS变量与继承

http://file.mukewang.com/class/assist/276/3661251/CSS3%E6%A1%88%E4%BE%8B%E6%95%99%E8%BE%85.pdf

CSS：层叠样式表。网页的样式，对页面美化

基本写法和语法。优先级：行内样式>内部样式>外部样式外部样式和链入外部样式依照先后顺序来看。总之就是权值相同，就近原则；权值不同，哪个权值高，就用哪个

行内样式： style="color:red",优先级最高

内部样式：在head内 <style type="text/css">h1{font-size:20px; color:red}</style>

链入外部样式：在head内使用<link ref="stylesheet" href="css.css" type="text/css"/>。页面加载同时会加载样式

导入外部样式: 在style标签内@import "css.css"或者url(css.css)。页面加载后才加载样式

权值和选择器

（权重值为0），通配选择器，* ｛｝，所有的标签元素

（权重值1），标签选择器   ，标签名｛｝  ，所有对应标签

（权重值10），class选择器，   .class名｛｝     ，找到所有拥有该class值的标签

（权重值100），id选择器，#id值，找到所有id对应的标签。同一个html里id是唯一的不能相同

（权重值1000），内联样式，写在标签的style属性里

（权重值无穷大）！important，描述在某个CSS样式属性值后面

后代选择器，  选择器1  选择器2｛样式描述｝，中间用空格隔开

-群组选择器：集体统一设置样式。选择器之间用逗号隔开。标签选择器，类选择器，ID选择器都适用

文本相关CSS

color颜色。颜色单词，#色号，rgb

text-align。设置文本水平对齐方式，只对块级元素生效。属性center/left/right/justify。justify 两端对齐

line-height设置行高。Xpx，Xem，一般默认16px

white-space设置是换行。nowarp不换行，normal正常

overflow文本溢出隐藏。属性hidden隐藏

text-overflow隐藏样式。属性ellipsis省略号

text-spacing设置字间距。Xpx

vertical-align，运用到行内标签和单元格元素起作用，默认值是baseline。

baseline （基线对齐）默认值

middle（中线对齐）

sub（上标）

super（下标）

top（行元素顶端对齐）

bottom（行元素底端对齐）

text-top（文字顶端对齐）

text-bottom（文字底端对齐）

长度 | 百分比（+上移 -下移）

文本样式其他属性

word-spacing：设置元素内单词之间间距，单词的判断以空格为准

letter-spacing：设置元素内字母之间间距

text-transform设置英文大小写。属性capitalize首字母大写，lowercase小写，uppercase大写，none无效果

text-decoration设置删除线。属性underline上划线 | overline下划线 | line-though贯穿线 | blink闪烁效果 none没有任何效果|

段落首行缩进：text-indent:，单位1em为1字符

字体相关CSS

font-size字体大小，一般最小为12px，默认为16px。1.5em就是父元素的1.5倍，larger就是比父元素大

font-family，字体类型，多个字体则用逗号隔开

font-weight，控制加粗的，norml和bold 和bolder和lighter更细，数值可以100-1000，400是normal。700是bold

font-style,italic倾斜，oblique倾斜，normal不倾斜

font-variant(字体变形): normal;(默认) small-caps;(将小写英文字母转换为小型的大写字母)

列表相关CSS

list-style：none去除列表前面的点

list-style-type规定点的类型，有circle空心圆，desc实心圆点

list-style-image点的类型变成图片，用url指定

list-style-position点放在外面还是里面

轮廓，边框，阴影CSS

border-collapse表格风格效果。属性collapse合并，separate分离

vertical-align单元格垂直方向，top/middle/bottom

outline轮廓。outline-width，outline-color，outline-style

box-shadow边框阴影。六个参数：横向偏移   纵向偏移     阴影模糊距离   阴影大小   颜色   inset或者outset阴影，可以写内外两个阴影用逗号隔开

display属性控制内容展示，隐藏起来则不占位置

none不展示

display：block块元素，宽高有效

display：inline行内元素，宽高无效

display：inline-block行内块元素，宽高有效

visible是否隐藏：visible/hidden，只是看不见，但是还占位置

opacity透明度：0-1

伪类

伪类

：link未访问的链接

：hover鼠标悬停的时候

：active鼠标点击的时候

：visited访问过的链接

:link > :visited > :hover > :active 说明： 1.a:hover 必须置于 a:link和a:visited之后，才有效 2.a:active必须置于a:hover之后，才有效 3.伪类名称对大小写不敏感

盒子模型

border边框

多边定义

值

宽度： x px

类型：solid实线，dotted点，dashed虚线

颜色。单词，#，rgb（r，g，b）

单边定义

border-left：特指左边的边，border-top：特指上面的边

设置元素边框颜色 border-color：颜色 | transparent

border-style：none｜solid实线｜dashed虚线｜dotted点状｜double双边｜等等

宽度

宽度 width：长度值｜百分比｜auto 最大宽度 max-width：长度值｜百分比｜auto 最小宽度 min-width：长度值｜百分比｜auto

高度

height：长度值｜百分比｜auto max-height：长度值｜百分比｜auto min-height：长度值｜百分比｜auto

可以设置宽高的元素

1、块级元素

2.替换元素 浏览器根据其标签的元素与属性来判断显示的具体内容 <img>、<input>、<textarea>等

内边距padding

padding填充属性（内边距） 设置元素的内容与边框之间的距离（内边距或填充），分四个方向（上，右，下，左） 1.padding-top：长度值 | 百分比 2.padding-right：长度值 | 百分比 3.padding-bottom：长度值 | 百分比 4.padding-left：长度值 | 百分比

内边距属性缩写 1.padding：值1； 2.padding：值1 值2；（上下=值1，左右=值2） 3.padding：值1 值2 值3 （上=值1 左右=值2 下=值3） 4.padding：值1 值2 值3 值4（上=值1 右=值2 下=值3 左=值4

外边距margin

设置元素与元素之间的距离（外边距），四个方向（上，右，下，左） 1.margin-top:长度值 | 百分比 | auto 2.margin-right:长度值 | 百分比 | auto 3.margin-botton:长度值 | 百分比 | auto 4.margin-left:长度值 | 百分比 | auto

外边距缩写 1.margin：值1；（四个方向都为值1） 2.margin：值1 值2；（上下=值1，左右=值2） 3.margin：值1 值2 值3 （上=值1 左右=值2 下=值3） 4.margin：值1 值2 值3 值4（上=值1 右=值2 下=值3 左=值4）

！！！！！！垂直方向，两个相邻元素都设置外边距，外边距会发生合并。合并后外边距高度=两个发生合并外边距的高度中最大值

盒子模型计算 1）标准盒子模型 1.盒子在页面中所占的宽度是由左边距+左边框+左填充+内容宽度+右填充+右边框+右边距组成 2.盒子在页面中占据的高度是由上边距+上边框+上填充+内容高度+下填充+下边框+下边距组成

display属性

inline 元素将显示为内联元素，元素前后没有换行符

block 元素将显示为块级元素，元素前后会带有换行符

inline-block 行内块元素，元素呈现为inline，具有块级相应特性

none 此元素不会被显示

行内元素之间的缝隙如何解决?????? 1）标签之间不添加任何换行或空格 2）给它一个父元素，设置父元素的style：font-size:0px，并给子元素单独设置字体大小

背景样式

背景颜色background-color：颜色|transparent（默认） 1.transparent是全透明黑色（black）的速记法，类似rgba（0，0，0，0）这样的值 2.颜色值（颜色名 | RGB | 十六进制） 3.背景区包括内容、内边距（padding）和边框、不包含外边距（margin） 4.如果不给边框设置颜色，那边框颜色默认=文本的颜色

用图片填充背景background-image:URL | none 1.URL地址可以是相对地址也可以是绝对地址 2.元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边框 3.默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复

背景图片重复：background-repeat 是设置背景图片的重复方式 repeat是默认的重复，全部重复； no-repeat是不重复； repeat-x是水平重复，repeat-y是垂直重复

background-position：百分比|值 top|right|bottom|left|center -值：1.长度值（x y）第一个值水平位置，第二个值垂直位置，左上角0 0 注：只写一个参数的话，第二个默认为居中； 2.百分比（x%y%）第一个值水平位置的百分比，第二个值垂直位置百分比 左上角0%0%，右下角100%100%。如果仅规定了一个值，另一个值将是50%。 注：只写一个参数，第二个默认居中； 3.top：顶部显示，相当于垂直方向0；只有一个参数的话，第二个默认居中； 4.right：右边显示，相当于水平方向100%；只有一个参数的话，第二个默认居中； 5.left：左边显示，相当于水平方向0；只有一个参数的话，第二个默认居中； 6.bottom：底部显示，相当于垂直方向100%；只有一个参数的话，第二个默认居中； 7.center：居中显示，相当于水平方向50%或者垂直方向50%；水平、垂直方向都居中

设置元素的背景图片的显示方式 background-attachment:scroll | fixed

scroll：默认值，背景图片随滚动条滚动【即一开始图片在整个页面什么地方，滚动条滚动时它还是在那个地方】 fixed:当页面的其余部分滚动时，背景图片不会移动【即一开始图片在窗口什么地方，滚动条滚动时，图片还在窗口的什么地方，也就是其余部分滚动时图片不会移动】

列表样式

无序列表  list-style-type none无标记 | disc 实心的圆点 | circle空心的圆点 | square 实心的方块

【list-style-image】使用图片来设置列表项的标记 list-style-image:url(.......)或者none

list-style-position:inside | outside inside：列表项目标记位置在文本以内，且环绕文本根据标记对齐 outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

列表样式缩写：list-style-type list-style-position list-style-image 说明 1.值之间用空格分隔 2.顺序不固定 3.list-style-image会覆盖list-style-type的设置

浮动

CSS定位机制 普通流（标准流）浮动绝对定位 普通流（标准流）： 默认状态，元素自动从左往右，从上往下的排列

css float(浮动)的基础知识 基本语法： float:left 靠左浮动 float:right 靠右浮动 float:none 不使用浮动

第一个浮动的盒子会根据父元素进行排列，之后的盒子当找到前一个浮动元素时就会停下。 给元素添加上浮动之后，会脱离文档流。之后的元素会占用浮动div 的位置 -----使用浮动后产生的问题----- -浮动溢出：元素使用浮动后会脱离普通流，出现“高度塌陷”；

clear:left左侧抗浮动，只影响自身，不影响其他相邻元素 clear:right右侧抗浮动，只影响自身，不影响其他相邻元素 clear:both 左右两侧抗浮动，只影响自身，不影响其他相邻元素

清除浮动的方法： 第一种：浮动元素后边使用一个空元素 <div class="clear"></div> clear：both； 第二种给浮动元素的容器（父元素）添加overflow:hidden;可以再写zoom：1来兼容低版本的IE 第三种：使用css3的:after伪类、 .class名:after{ content:"."; display:block; height:0; visibility:hidden; clear:both; }

position属性

static(静态定位常规定位自然定位)

relative 相对定位 1）相对自己常规流的位置进行定位，top/right/bottom/left。 2）自己原来的常规流位置保留，不会脱离文档流 3）任何元素都可以设置为relative，它的绝对定位的后代相对它进行绝对定位

absolute 绝对定位 1）脱离常规流 2）父元素设置为相对定位relative 子元素设置为绝对定位absolute,子元素的位置可以根据父元素定位。如果没有最近position为relative的祖先元素，默认为body。 3）当margin为auto auto时，lrtb如果设置为0，元素居中显示。lrtb如果设置为auto，元素将被打回原形。

fixed 固定定位 1）跟absolute有啥区别？相对于谁做绝对定位 2）不会随着窗口滚动而滚动。 3）继承absolute特点

-position:sticky 磁贴定位|粘性定位|吸附定位 作用：relactive与fixed的完美结合，制造出吸附效果 特点：（1）如果产生偏移，原位置还会在常规流中 （2）如果他的最近祖先元素有滚动，那么他的偏移标尺就是最近祖先元素 （3）它有一个定位矩形，如果最近祖先元素没有滚动（overflow：scroll），那么他的偏移标尺是窗口 （4）上下左右的偏移规则

个人理解：用top、bottom、left、right控制它存在于窗口的哪里，父元素有overflow：scroll就会跟着窗口移动，总之就是有一个定位矩形控制它

居中技巧

定位：过元素的位置移动来改变出现在网页的相对位置 元素居中：left:50%; right:50%; margin-left:元素宽的一半(负值);margin-top:元素高的一半(负值);

布局

经典的行布局 -基础行布局 -行布局自适应 -行布局自适应限制最大宽 -行布局垂直水平居中

给header设置了fixed定位以后，header会脱离文档流，banner会自动往上走，这样会导致header会浮在banner上面，覆盖banner的一部分。 这时可以给banner设置padding-top：Xpx（等于header的高度），来撑开父元素，让banner显示的时候看起来在header的下方。

【经典的列布局】 1.两列布局固定 2.两列布局自适应

【经典的列布局】1.三列布局固定2.三列布局自适应

混合布局 浮动定位会脱离常规流，后面的元素会被遮挡，要设置父元素高度可以避免。

【圣杯布局试是一种经典的三列布局】 1.中间宽度自适应，两边定宽。中间用百分比，两边用固定数值 2.中间栏目要在浏览器中优先展示渲染（在写div框架的时候先写中间栏目） 3.允许任意列的高度最高 4.用最简单的CSS,最少的HACK语句

双飞翼布局与圣杯布局区别： 1.双飞翼的左侧和右侧不放在主体div中，而是放在后面。（同级） 2.双飞翼布局不需要使用position:relative布局.当双飞翼使用margin-left的负值时，参照对象则变成了浏览器。 3.双飞翼方法是主体设置margin外边距。<1.左翼同样使用margin-left：-100%，到最左侧。 2.右翼则是margin：-右侧自身的宽度（或大于），到最右侧。> 4.左右两侧自身的宽度不能小于margin外边距值，否则将出现空隙或无法移动到两侧。