前端--CSS.2-CSDN博客

实例：border-radius: length;

length 越大，圆角边框弧度越大
参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
如果是个矩形，设置为高度的一半就可以

该属性是一个简写的属性，可以跟四个值，分别代表左上角、右上角、右下角、左上角

两个值则对角线角度相同

分开写：border-top-left-radius 、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

盒子阴影：box-shadow 属性为盒子添加阴影

语法：box-shadow: h-shadow v-shadow blur spread color inset;

实例：box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);

注意：

默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
盒子阴影不占用空间，不会影响其他盒子排列

文字阴影：text-shadow 属性将阴影应用于文本

语法：text-shadow: h-shadow v-shadow blur color;

二、浮动

传统网页布局的三种方式：

普通流/标准流：就是标签按照规定好的默认方式排列，如块级元素会独占一行，从上向下顺序排列，行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
浮动
定位

实际开发中，一个页面基本都包含了这三种布局方式

为什么需要浮动？什么是浮动？为什么需要清除浮动？

为什么需要浮动？

有很多的布局效果，标准流没有办法完成，此时就可以通过浮动来改变元素标签默认的排列方式
浮动最典型的应用：可以让多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

什么是浮动？

float 属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或另一个浮动框的边缘

语法：选择器 {float：属性值; }
属性值 none/left/rigth: 元素不/左/右浮动

为什么需要清除浮动？

由于父级盒子很多情况下不方便给高度，但子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准盒子
由于浮动元素不再占用源文档流的位置，所以它会对后面的元素排版产生影响

浮动特性：

浮动元素会脱离标准流（脱标）：

脱离标准普通流的控制（浮）移动到指定位置（动）
浮动的盒子不再保留原先的位置
若有两个div盒子（独占一行），给第一个div盒子加了浮动第二个盒子不加浮动，则第二个盒子会把第一个盒子的位置占据掉，即第二个盒子在第一个盒子正下方

浮动的元素会一行内显示并且元素顶部对齐：

如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素互相贴靠在一起的（没有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

浮动的元素会具有行内块元素的特性：

任何元素都可以浮动，不管以前是什么模式的元素，添加浮动之后具有行内块元素相似的特性
如果块级盒子没有设置宽度，默认宽度和父级一样宽，添加浮动之后，其大小根据内容来决定
浮动的盒子中间没有缝隙，是紧挨着一起的
行内元素同理

浮动元素经常和标准流父级搭配使用：

先用标准流的父元素排列上下位置（纵向），之后内部子元素采取排列左右（横向）位置，符合网页布局第一准则
就是在浮动元素的外面再加一个盒子（不浮动）

注意：

一个盒子里面有多个盒子，一个元素浮动了，理论上其余的兄弟元素也要浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动：

清除浮动本质：

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

清除浮动方法--额外标签法：

实例：<div style="clear.both"></div>

额外标签法会在浮动元素末尾添加一个空的标签，或者其他标签如<br/>等

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构性较差

注意：要求这个新的空标签必须是块级元素

清除浮动方法--父级添加 overflow 属性：

实例：overflow: hidden;

可以给父级添加 overflow 属性，将其属性值设置为 hidden,auto,scroll

优点：代码简洁；缺点：无法显示溢出的部分

清除浮动方法--父级添加 after 伪元素：

after 方式是额外标签法的升级版，也是给父元素添加（在后面添加）

优点：没有增加标签，结构简单

缺点：照顾低版本浏览器；代表网站：百度、淘宝网、网易等

<style>
    .clearfix:after {
        content: "";  /* 伪元素必须写的属性 */
        display: block; /* 插入的元素必须是块级元素 */
        height: 0; /* 不要看见这个元素 */
        clear: both; /* 核心代码清除浮动 */
        visibility: hidden; /* 不要看见这个元素 */
    }
    .clearfix { /*IE6、7专有*/
        *zoom: 1;
    }
</style>

清除浮动方法--父级添加双伪元素：

给父级元素添加（在前后各添加一个）

优点：代码更简洁

缺点：照顾低版本浏览器；代表网站：小米、腾讯等

<style>
    .clearfix:before, .clearfix: after {
        content: "";  /* 伪元素必须写的属性 */
        display: table; /* 转换为块级元素并且一行显示 */
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    } 
</style>

PS切图：

图层切图
切片工具
cutterman插件--综合了图层切图和切片工具

CSS属性书写顺序：

三、CSS定位

为什么需要定位？

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

定位组成：

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

定位模式：

static 静态定位：

语法：选择器{ position: static; }

静态定位是元素默认的定位方式，无定位的意思（相当于标准流）

静态定位按照标准流特性摆放位置，他没有边偏移

静态定位在布局时很少用到

relative 相对定位：

语法：选择器{ position: relative; }

相对定位是元素在移动位置的时候，是相对于他原来的位置来说的

特点：

移动位置的时候参照点是自己原来的位置
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他（不脱标，继续保留原来位置）
相对定位没有脱标，它最典型的应用是给绝对定位当爹的

absolute 绝对定位：

语法：选择器{ position: absolute; }

绝对定位是元素在移动位置的时候，是相对于他的祖先元素来说的

特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原先的位置，位置将被其他盒子占有（脱标）

子绝父相：子元素绝对定位，父元素相对定位，在开发中用的最多，当然也可能出现子元素父元素都是绝对定位的情况

fixed 固定定位：

语法：选择器{ position: fixed; }

固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

特点：

以浏览器的可视窗口为参照点移动元素--跟父元素没有任何关系、不随滚动条滚动
固定定位不再占有原先的位置--固定定位也是脱标的，也可以看做是一种特殊的绝对定位

固定在版心右侧位置：版心宽度为 800px

实例：left: 50%; margin-left: 400px;

让固定定位的盒子 left: 50% （走到浏览器可视区的一半位置）
让固定定位的盒子 margin-left: 版心宽度一半的距离（多走版心宽度的一半位置）

sticky 粘性定位:

语法：选择器{ position: sticky; top: 10px; }

粘性定位可以被认为是相对定位和固定定位的混合</li>

特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加 top / left / right /bottom 其中一个才有效

边偏移：

实例：top/bottom/left/right: 77px;

top 属性：顶端偏移量，定位元素相对于其父元素上边线的距离
bottom 属性：底部偏移量，定位元素相对于其父元素下边线的距离
left 属性：左侧偏移量，定位元素相对于其父元素左边线的距离
right 属性：右侧偏移量，定位元素相对于其父元素右边线的距离

定位叠放次序：z-index ，在使用定位布局时，可能会出现盒子重叠的情况，可以使用 z-index 来控制盒子的前后次序

语法：{ z-index: 1;}

数值可以是正整数，负整数或0，默认是 auto，数值越大，盒子越靠上

如果属性值相同，则按照书写顺序，后来居上

数字后面不能加单位

只有定位的盒子才有 z-index 属性

定位的拓展：

绝对定位的盒子居中：

加了绝对定位的盒子不能通过 margin:0,auto; 水平居中，但是可以通过以下计算方法实现水平和垂直居中
left: 50%; 让盒子的左侧移动到父级元素的水平中心位置。
margin-left: -100px; 让盒子向左移动自身宽度（200px）的一半。（为啥要-100呢？）

定位的特殊特性：

绝对定位和固定定位也和浮动类似
行内元素添加绝对或者固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给宽度或高度，默认大小是内容的大小
脱标盒子不会触发外边距塌陷--浮动元素，绝对定位（固定定位）元素的都不会触发外边距合并的问题

绝对定位（固定定位）会完全压住盒子：

浮动元素不同，只会压住他下面标准流的盒子，但是不会压住下面标准流盒子里面的文字、图片
但是绝对定位（固定定位）会压住下面标准流所有的内容
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素

如果一个盒子既有 left 属性也有 right 属性，则会默认执行 left 属性，同理 top bottom 则会默认执行 top

四、元素的显示与隐藏

display 显示隐藏元素---重点：

display: none; 隐藏元素
display: block; 除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置，即位置会被其他元素占有

visibility 显示隐藏元素：

visibility: visible; 元素可见
visibility: hidden; 元素隐藏
visibility 隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来的位置，就用 visibility: hidden;
如果隐藏元素不想要原来的位置，就用 display: none; (用处更多)

overflow 溢出显示隐藏：overflow 属性指定了如果内容溢出一个元素的边框时（超过了指定的宽度和高度）

overflow: visible; 不剪切内容也不添加滚动条
overflow: hidden; 不显示超过对象尺寸的内容，超出的部分隐藏掉
overflow: scroll; 不管超出内容与否，总是显示滚动条
overflow: auto; 超出自动显示滚动条，不超出不显示滚动条
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
但如果有定位的盒子，请慎用 overflow: hidden; 因为他会隐藏多余的部分

五、精灵图

为什么需要精灵图？

为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

精灵图的使用：

实例：

background: url(背景图片路径) no-repeat(不平铺) -182px -120px;

background: url(背景图片路径) no-repeat(不平铺); background-position: -182px -120px;

精灵图主要针对于小的背景图片使用
主要借助于背景位置来实现 -- background-position
一般情况下精灵图都是负值，千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴往下走是正值，往上走是负值
引入精灵图后一半是沿着盒子的左上角对齐，我们需要调整x y轴来移动

精灵图的缺点：

图片文件比较大
图片本身放大和缩小会失真
一旦图片制作完毕想要更换非常复杂
此时用字体图标就很很好解决以上问题

六、字体图标

字体图标优点：

轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等
兼容性：集合支持所有的浏览器，放心使用

遇到一些结构和样式比较简单的小图标，就用字体图标，遇到一些结构和样式复杂的小图片，就用精灵图

字体图标的下载：

icomoon 字库： http://icomoon.io
阿里 iconfont 字库： http://www.iconfont.cn/

字体图标的使用：

把下载包里面的 fonts 文件夹放入页面根目录下
在 CSS 样式中全局声明字体：把这些字体通过 css 引入到我们的页面中（也可以打开我们下载好的文件夹下的 style.css 从开头一直复制到的第一个 } 结束）
在下载的文件夹中打开 demo.html 文件（下载的所有图标都在），需要哪一个就复制后面的小框框（或者复制前面的英文加上/，如/e91e）到 html 中即可
给复制了小框框的盒子声明字体，字体必须是字体图标，与第二步中字体声明一致（如：font-family: 'icomoon'; ）

字体图标的追加和加载原理：

把压缩包里面的 selection.json 重新上传，然后选中自己想要的新的图标，重新下载压缩包，并替换原来的文件
在 http://icomoon.io 网页中找到 import Icons 导入我们的 .json 文件

七、CSS三角

先把盒子高度宽度设为0，line 和 font 两行是为了兼容性，再将全部边框变为透明，最后指定我们想要三角的边框颜色

<style>
    div {
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
        border: 10px solid transparent;
        border-left-color: pink;
    }
</style>

八、常见的CSS用户界面样式

更改用户的鼠标样式：

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

表单轮廓 outline && 防止拖拽文本域 resize

表单轮廓语法： input { outline: none; } ---将鼠标点进按钮后的框框去掉

防止拖拽文本域语法：textarea { resize: none;} ---将文本域设置为不可拖拽

vertical-align 属性应用：使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐，用于设置一个元素的垂直对齐方式，但只针对行内元素或行内块元素

语法：vertical-align: baseline / top / middle / bottom;

baseline ：默认，元素放置在父元素基线上
top ：把元素的顶端与行中最高元素的顶端对齐
middle ：把此元素放置在父元素的中部
bottom ：把元素的顶端与行中最低的元素的顶端对齐

解决图片底部默认空白缝隙问题

bug: 图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

解决方法1：给图片添加 vertical-align: middle / top / bottom 等（提倡使用）
解决方法2：把图片转换为块级元素 display: block;

溢出文字省略号显示：

单行文本溢出显示省略号：

必须满足以下三个条件

第一步：white-space: nowrap; (如果文字显示不开也必须强制一行内显示)
第二步：overflow: hidden; (溢出的部分隐藏起来)
第三步：text-overflow: ellipsis; (文字溢出的时候用省略号来显示)

white-space: normal; (如果文字显示不开自动换行)

多行文本溢出显示省略号：

多行文本溢出显示省略号，有较大的兼容性问题，适合于 wedKit 浏览器或移动端（移动端大部分是 wedKit 内核）

第一步：overflow: hidden; (溢出的部分隐藏起来)
第二步：text-overflow: ellipsis; (文字溢出的时候用省略号来显示)
第三步：display: -wedkit-box; (弹性伸缩盒子模型显示)
第四步：-wedkit-line-clamp: 2; (限制在一个块元素显示的文本的行数，这里行数为2)
第五步：-wedkit-box-orient: vertical; (设置或检索伸缩盒对象的子元素的排列方式)

九、常见的布局技巧

margin 负值的运用：

原理：让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框

float: 属性值; (先让盒子浮动)
border: 1px solid red; (设置盒子边框)
margin-left: -1px; (让每个盒子向左侧移动)

文字围绕浮动元素：

假设现有一个 div 大盒子，盒子里面包含 img，p 两个块元素，那么只需要将 img 块元素添加浮动，即可以实现文字围绕效果

行内块的巧妙运用：

小于号是 &lt ，大于号是 &gt
清除内外边距：*{ padding: 0; margin: 0; }
行内块元素要居中，直接给父级元素添加
- text-align: center; (水平居中)
- line-height: 盒子高度; (垂直居中)

CSS 三角强化：

第一步：border-color: transparent red transparent transparent; (只保留右边的边框有颜色)
第二步：border-style: solid; (样式都是 solid)
第三步：border-width: 100px 50px 0 0; (上边框宽度要大，右边框宽度稍小，其余边框改为0)

在三角盒子加绝对定位定位，给其父盒子加相对定位