CSS高级

CSS高级

精灵图

• 将一些小图片整理到一张大图片中一次返回
• 移动背景图片定位使用background-position

字体图标

展示的是图标，实质上是字
结构样式比较简单用字体图标，复杂的用精灵图
字体图标下载、引入、追加
下载网站：iconmoon字库，阿里iconfont字库

CSS做三角

div{width:0;height:0;border:10px solid transparent;border-top-color:pink;}

三角强化

不规则三角形border-bottom：0 solid blue;border-left:0 solid blue;border-top: 10 px solid transpant 像素不对称 则三角形不对称
左边和下边宽度设置为零，上面宽度调大
简写代码：
border-color：transparent red transparent transparent;
border-style: solid;
border-width: 100px 50 px 0 0;

用户界面样式

鼠标样式

语法：li{cursor:属性值;}
属性值：pointer小手 move移动 text 文本 default小白 not-allowed禁止

表单轮廓线

给表单outline:0;或outline:none;
textarea去掉右下角房拖拽 textarea{resize:none;}文本域标签写在一行

vertical-align属性

垂直对齐，只针对行内元素和行内块元素
bottom,top,middle,默认为基线base行内快元素和文字基线对齐

溢出的文字用省略号显示

单行文本

1. 强制文字一行内显示：white-space:nowrap;默认为normal自动换行
2. 超出的部分隐藏：overflow：hidden；
3. 文字用省略号代替超出的部分：text-overflow:ellipsis;

多行文本

overflow：hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;

常见布局技巧

margin负值

双边框解决：margin-left:-1px;(borderwidth )
鼠标悬停是可以不显示一个边框，把定位改为relative即可（相对定位可以压住标准流，浮动盒子）若都有定位，设置z-index优先级

文字围绕浮动元素

浮动元素不会压住文字

行内块元素的运用

中间有间隙，且可对齐

CSS初始化

搜索body从margin：0；开始到zoom：1；

实例

导航栏
下拉菜单
提示文本框

CSS媒体类型

@media 规则允许在相同样式表为不同媒体设置不同的样式。
例：
浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体：

@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}

响应式布局

/* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

CSS计数器

CSS 计数器根据规则来递增变量。
CSS 计数器使用到以下几个属性：
counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素
要使用 CSS 计数器，得先用 counter-reset 创建

body {
  counter-reset: section;
}
 
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

嵌套计数器：

body {
  counter-reset: section;
}
 
h1 {
  counter-reset: subsection;
}
 
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}
 
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

计数器用在列表中

ol {
  counter-reset: section;
  list-style-type: none;
}
 
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

!important 规则

此声明权重最大，将覆盖任何其他声明。
例：

p {
  background-color: red !important;
}

背景

background
CSS3中可以通过background-image属性添加多张背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

简写：

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

CSS3 的 background-origin 属性
background-origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
背景渐变：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
语法：background-image: linear-gradient(direction, color-stop1, color-stop2, …);
direction默认从上到下 to bottom、to top、to right、to left、to bottom right 也可为角度如90deg
color可以设置透明度rgba（0，0，0，0.3）

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

重复的线性渐变百分比表示颜色比例
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
径向渐变：background-image: radial-gradient(shape size at position, start-color, …, last-color);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

多列属性

column-count 属性指定了需要分割的列数。
以下实例将

元素中的文本分为 3 列：

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

column-gap 属性指定了列与列间的间隙。
以下实例指定了列与列间的间隙为 40 像素：

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

column-rule-style 属性指定了列与列间的边框样式：
column-rule-style: solid;
column-rule-width 属性指定了两列的边框厚度: column-rule-width: 1px;
column-rule-color 属性指定了两列的边框颜色：column-rule-color: lightblue;
简写：

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

指定元素跨越多少列
以下实例指定

元素跨越所有列：

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

指定列的宽度
column-width 属性指定了列的宽度。

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

图片

圆角图片:
img {
border-radius: 8px;
}
椭圆形图片:
img {
border-radius: 50%;
}
我们使用 border 属性来创建缩略图。（类似加边框）
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
响应式图片会自动适配各种尺寸的屏幕。
通过重置浏览器大小查看效果:
img {
max-width: 100%;
height: auto;
}
图片文本：利用子绝父相
图片滤镜
CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。
.blur {-webkit-filter: blur(4px);filter: blur(4px);}

文本换行

word-break:单词保留换行 keep-all 单词拆分换行 break-all
word-wrap:break-word ；允许换行
省略号和直接断开不换行：

p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}
 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

弹性盒子

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
例：

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

若在body中修改排列方向，下为从右到左排列
body {
direction: rtl;
}
flex-direction
flex-direction 属性指定了弹性子元素在父容器中的位置。
语法
flex-direction: row | row-reverse | column | column-reverse
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:
nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。
align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
弹性子元素属性
排序语法
order:
integer：用整数值来定义排列顺序，数值小的排在前面。可以为负值。
对齐
使用弹性盒子，居中变的很简单，只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

align-self
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
语法
align-self: auto | flex-start | flex-end | center | baseline | stretch
flex
flex 属性用于指定弹性子元素如何分配空间。
语法
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
以下实例中，第一个弹性子元素占用了 2/4 的空间，其他两个各占 1/4 的空间:
例

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}
 
.item1 {
    -webkit-flex: 2;
    flex: 2;
}
 
.item2 {
    -webkit-flex: 1;
    flex: 1;
}
 
.item3 {
    -webkit-flex: 1;
    flex: 1;
}

多媒体查询

以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标：

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

网格元素

display 属性
当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

.grid-container {
  display: grid;
}

通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。
也可用fr单位，一个 fr 单位代表网格容器中可用空间的一等份。

.grid-container {
  display: grid;
  grid-template-columns: 100px auto 300px auto;设置列宽 定义四列
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

可以使用以下属性来调整间隙大小：
grid-column-gap
grid-row-gap:50px;
grid-gap: 50px 100px;
justify-content 属性
justify-content 属性用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。
align-content 属性
align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式。
grid-column 属性
注意： grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性。
grid-column 属性定义了网格元素列的开始和结束位置。
以下实例设置 “item1” 在第 1 列开始，在第 5 列前结束：

.item1 {
  grid-column: 1 / 5;
}

以下实例设置 “item2” 跨越 3 列：

.item2 {
  grid-column: 2 / span 3;
}

grid-area 属性
grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。
以下实例设置 “item8” 从第 1 行开始和第 2 列开始， 第 5 行和第 6 列结束。
例

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

以下实例设置 “item8” 从第 2 行开始和第 1 列开始， 横跨 2 行 3 列。
例

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

网格元素命名
grid-area 属性可以对网格元素进行命名。
命名的网格元素可以通过容器的 grid-template-areas 属性来引用。
每行由单引号内 ’ ’ 定义，以空格分隔。. 号表示没有名称的网格项。
例：

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

定义跨多行多列：

.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

viewport

设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

媒体查询

设置断点
横屏竖屏orientation：portrait | landscape（横屏）

如果是横屏背景将是浅蓝色：

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

响应式背景图片

width 属性设置为 100%，图片会根据上下范围实现响应式功能：
img {
width: 100%;
height: auto;
}
background-size 属性
值为contain背景图片将按比例自适应内容区域。图片保持其比例不变 缩小会自适应，放大不变
为 “100% 100%” ，背景图片将延展覆盖整个区域； （图片会变形）
为 “cover”，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。放大自适应，缩小不变
不同宽度显示不同图片

body {
   background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
   body {
       background-image: url('img_flowers.jpg');
   }
}

可以使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小不会改变。

视频

width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例：
max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例，但不会超过其原始大小：
video {
max-width: 100%;
height: auto;
}