~、
、
、
- 、
- `等，其中``标签是最典型的块元素 **块级元素的特点** （1）独占一行 （2）高度，宽度、外边距以及内边距都可以控制 （3）宽度默认是**容器（父级宽度）的100%** （4）是一个容器及盒子，里面可以放**行内**或者**块级**元素 **注意：** 只有 文字才 能组成段落 因此 **p 里面不能放块级元素**，特别是 **p里面不能放div** 同理还有这些标签`h1,h2,h3,h4,h5,h6,dt`，他们都是文字类块级标签，里面不能放其他块级元素 ### 行内元素inline-level 常见的行内元素有`、、、、、
、、、、`等，其中``标签最典型的行内元素。有的地方也成内联元素 **行内元素的特点** （1）相邻行内元素在一行上，一行可以显示多个 （2）**高、宽直接设置是无效的** （3）默认宽度就是它**本身内容的宽度**。 （4）行内元素**只能容纳文本**或则**其他行内元素** **注意：** 链接里面不能再放链接 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全 ### 行内块元素inline-block 在行内元素中有几个特殊的标签`、、
`，可以对它们设置**宽高**和对齐属性，有些资料可能会称它们为行内块元素 **行内块元素的特点** （1）和相邻行内元素（行内块）在一行上,但是之间会有**空白缝隙**。一行可以显示多个 （2）默认宽度就是它**本身内容的宽度** （3）**高度，行高、外边距以及内边距**都可以控制 ### 标签显示模式转换 **块** --> **行内** ```css display: inline; ``` **行内** --> **块** ```css display: block; ``` **块、行内**元素 --> **行内块** ```css display: inline-block; ``` ```html 块级元素块级元素行内元素 行内元素 百度 新浪 span { /* 行内-->块 */ display: block; width: 100px; height: 100px; background-color: blueviolet; } div { /* 块-->行内 */ display: inline; width: 200px; height: 200px; background-color: orange; } a { /* 行内，块-->行内块 */ display: inline-block; width: 50px; height: 50px; background-color: red; } ``` ## 单行文本垂直居中  **文字的行高等于盒子的高度** 行高 = 上距离 + 内容高度 + 下距离 **行高和高度的三种关系** 行高 = 高度 文字会 垂直居中 如果行高 > 高度 文字会 偏下 如果行高 < 高度 文字会 偏上  ```html 体育 娱乐 汽车 a { /* 行内，块-->行内块 */ display: inline-block; width: 100px; height: 30px; text-align: center; background-color: pink; text-decoration: none; color: #fff; font-weight: 700; /* 行高==高度让单行文字垂直居中 */ line-height: 30px; } a:hover { background-color: red; color: yellow; } ``` ## css背景 **背景颜色** ```css background-color: 颜色值; 默认transparent 透明的 ``` **背景图片** ```css background-image: none | url(地址); ``` 地址不要加**引号** **背景平铺** ```css background-repeat: no-repeat | repeat | repeat-x | repeat-y; ``` **背景位置** ```css background-position : length || length background-position : position || position ``` **注意：** （1）必须先指定background-image属性 （2）position 后面是x，y坐标；可以使用方位名词 或 精确单位 （3）若指定两个值都是方位名词，则前后顺序无关，效果一致 （4）若只指定一个方位名词，另一个值**默认居中对齐** （5）若position后面是精确坐标，第一个为x，第二个为y （6）若指定一个精确坐标，则数值为x坐标，另一个默认垂直居中 （7）若指定两个值为精确单位和方位名词混合使用，则第一个值为x坐标，第二个值为y坐标 **背景附着** 背景是滚动/固定 ```css background-attachment: fixed | scroll; ``` **背景简写** 无强制标准 ```css background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; background: #fff url(image.jpg) repeat-y scroll center top; ``` **背景透明** ```css background: rgba(0, 0, 0, 0.3); ``` （1）最后一个参数alpha 透明度 取值范围 0~1 （2）可以省略0.3的0 （3）盒子里面的内容不受影响 ## css三大特性 **层叠性** **概念** 多种CSS样式的叠加 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 **原则** 样式冲突，遵循的原则是**就近原则** 样式不冲突，不会层叠 **继承性** **概念** 子标签会继承父标签的某些样式，如文本颜色和字号 想要设置一个可继承的属性，只需将它应用于父元素 子元素可以继承父元素的样式（`text-，font-，line-`这些元素开头的可以继承，以及`color`属性） **优先级** **概念** 定义CSS样式时，经常出现两个或更多规则应用在同一元素上 （1）选择器**相同**，则执行层叠性 （2）选择器**不同**，就会出现优先级的问题 ### 权重计算公式  值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越 ### 权重叠加  **注意** 数位之间**没有进制** 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况 **继承的权重为0** 这个不难，但是忽略很容易绕晕。其实，我们修改样式，**一定要看该标签有没有被选中** （1）如果**选中了**，那么以上面的公式来计权重。谁大听谁的 （2）如果**没有选中**，那么权重是0，因为继承的权重为0  ```htmldiv { color: red; } p { color: green; } .demo { color: blue; } ```  ```html /* 21 */ .c1 .c2 div{ color: blue; } /* 101 */ /* 101 */ #box1 div { color:yellow; } /* 就近原则 */ div #box3 { color:green; }胡梓卓
``` ## 盒子模型 * 盒子模型有元素的**内容**、**边框**（border）、**内边距**（padding）、和**外边距**（margin）组成 * 盒子里面的文字和图片等元素是 内容区域 * 盒子的厚度 我们成为 盒子的边框 * 盒子内容与边框的距离是内边距（类似单元格的 cellpadding) * 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）  **盒子模型box-sizing**  **content-box** 默认值，标准盒子模型。 [width](https://developer.mozilla.org/zh-CN/Web/CSS/width) 与 [height](https://developer.mozilla.org/zh-CN/Web/CSS/height) 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。 比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。 尺寸计算公式： ``` width = 内容的宽度 height = 内容的高度 ``` 宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。 **border-box** [width](https://developer.mozilla.org/zh-CN/Web/CSS/width) 和 [height](https://developer.mozilla.org/zh-CN/Web/CSS/height) 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的[盒模型](https://developer.mozilla.org/en-US/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。 尺寸计算公式： ``` width= border + padding +内容的宽度 height= border + padding +内容的高度 ``` ## 盒子边框 ```css border : border-width || border-style || border-color ``` 边框的样式： （1）none：没有边框（忽略所有边框的宽度\[默认值]） （2）solid：边框为**实线** （3）dashed：边框为**虚线** （4）dotted：边框为**点线** ```css 简写形式 border: 1px solid red; 没有顺序 ``` ```html 用户名:文字
密码: input { /* border-top: 2px solid green; border-left: 1px dashed #000; border-right: 1px dashed #000; border-bottom: 3px dotted blue; */ border: none; border-bottom: 2px solid red; } ``` ## 表格的细线边框 通过表格的`cellspacing="0"`,将单元格与单元格之间的距离设置为0， 但是两个单元格之间的边框会**出现重叠**，从而使边框变粗 通过表格属性： ```css table{ border-collapse:collapse; } ``` collapse 单词是合并的意思 border-collapse:collapse; 表示相邻边框合并在一起 ## 内边距padding  padding属性用于设置内边距 **是指** **边框与内容之间的距离** | **属性** | **作用** | | -------------- | -------- | | padding-left | 左内边距 | | padding-right | 右内边距 | | padding-top | 上内边距 | | padding-bottom | 下内边距 | 当我们给盒子指定padding值之后， 发生了2件事情： 1. 内容和边框 有了距离，添加了内边距。 2. **盒子会变大了** ### 内盒尺寸计算\*\*（元素实际大小）\*\* **宽度** Element Height = content height + padding + border （Height为内容高度） **高度** Element Width = content width + padding + border （Width为内容宽度） **盒子的实际的大小** **=** **内容的宽度和高度** **+** **内边距** **+** **边框** ### padding不会影响盒子大小的情况 如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子  ## 外边距margin  margin属性用于设置外边距。 margin就是控制**盒子和盒子之间的距离** ### 块级盒子水平居中 可以让一个**块级盒子实现水平居中**必须： * 盒子**必须指定**了**宽度**（width） * 然后就给**左右的外边距都设置为auto** 常用三种写法：  ### 文字居中和盒子居中区别 盒子内的文字水平居中是 **text-align: center**, 而且还可以让 行内元素和行内块居中对齐 块级盒子水平居中 左右**margin** 改为 **auto** ### 插入图片和背景图片区别 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 **padding margin** 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 **background-position** ```css img { width: 200px;/* 插入图片更改大小 width 和 height */ height: 210px; margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */ margin-left: 50px; /* 插入当图片也是一个盒子 */ } div { width: 400px; height: 400px; border: 1px solid purple; background: #fff url(images/sun.jpg) no-repeat; background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */ ``` ### 清除元素的默认内外边距  ```css * { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ } ``` **注意：** 行内元素为了照顾兼容性， 尽量只设置**左右内外边距**， 不要设置上下内外边距 ### 外边距合并 (1) **相邻块元素垂直外边距的合并** 当上下相邻的两个块元素相遇时，如果**上面的元素有下外边距**margin-bottom， **下面的元素有上外边距**margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和， **取两个值中的较大者**这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）  **解决方案：尽量给只给一个盒子添加margin值** (2) **嵌套块元素垂直外边距的合并**（塌陷） 对于两个嵌套关系的块元素，如果**父元素没有上内边距及边框** 父元素的上外边距会与子元素的上外边距发生合并 合并后的外边距为两者中的**较大**者  **解决方案：** * 可以为**父**元素定义**上边框** ```css border-top: 1px solid transparent; ``` * 可以为**父**元素定义**上内边距** ```css padding-top: 1px; ``` * 可以为父元素添加`overflow:hidden` ## 盒子模型布局稳定性 按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin） width > padding > margin **原因：** margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用 padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用 width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做 ## ps基本操作以及常用快捷键 * 文件--打开 -- 可以打开 我们要测量的图片 * `ctrl+r` 可以打开标尺 或者 视图 -- 标尺 * 右击标尺， 把里面的单位改为 像素 * ctrl+ 加号 键 可以 放大 视图 ctrl+ 减号 缩小视图 * 按住`空格键`， 鼠标可以 变成小手 ，拖动 ps 视图 * 用选区 拖动 可以 测量 大小 * ctrl+ d 可以取消选区 或者旁边空白处点击一下也可以取消选区  ## 去掉列表默认的样式 无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下 ```css li { list-style: none; } ``` ## 圆角边框(CSS3) **语法** ```css border-radius:length; ``` 其中每一个值可以为 数值或百分比的形式。 技巧： 让一个正方形 变成**圆圈** ```css border-radius: 50%; ``` 矩形就只用 用 高度的一半就好  ```html今日特价
.test { margin: auto; width: 120px; height: 30px; background-color: red; color: white; text-align: center; line-height: 30px; border-radius: 7px; } ``` **圆角矩形设置4个角** 圆角矩形可以为4个角分别设置圆度， 但是是有顺序的 ```css border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px; ``` 里面数值不同，我们也可以按照简写的形式，具体格式如下: ```css border-radius: 左上角 右上角 右下角 左下角; ``` ## 盒子阴影 ```css /*语法*/ box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； ```  前两个属性是必须写的。其余的可以省略 **外阴影** **(outset)** **是默认**的 但是**不能写** 想要内阴影可以写 **inset** ## css布局的三种机制 CSS 提供了 **3** **种机制**来设置盒子的摆放位置，分别是**普通流**（标准流）、**浮动**和**定位** * **普通流（标准流）** **块级元素**会独占一行，**从上向下**顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table **行内元素**会按照顺序，**从左到右**顺序排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em等 * **浮动** 让盒子从普通流中**浮**起来,主要作用让多个块级盒子一行显示 * **定位** 将盒子**定**在浏览器的某一个**位**置——CSS 离不开定位，特别是后面的 js 特效 ## 浮动 **浮动？** 它可以实现多个元素一行显示，但是中间会有空白缝隙 它不能实现盒子左右对齐 **概念** 元素的浮动是指**设置了浮动属性的元素**会 （1）脱离标准普通流的控制 （2）移动到指定位置 **作用** **让多个盒子(div)水平排列成一行**，可以实现盒子的左右对齐等等 浮动最早是用来**控制图片**，实现**文字环绕图片的效果** 在 CSS 中，通过 **float** 中文， 属性定义浮动，语法如下： ```css 选择器 { float: 属性值; } ```  浮动——特性 **float属性会改变元素display属性** 给浮动的元素**添加一个标准流的父亲**，最大化的减小了对其他标准流的影响 ### 浮动(float)的扩展 **（1）浮动元素与父盒子的关系** 子盒子的浮动参照父盒子对齐 不会与父盒子的边框重叠，也不会超过父盒子的内边距  **（2）浮动元素与兄弟盒子的关系** 在一个父级盒子中，如果**前一个兄弟盒子**是： **浮动**的，那么**当前盒子**会与前一个盒子的顶部对齐； **普通流**的，那么**当前盒子**会显示在前一个兄弟盒子的下方  浮动只会影响**当前**的或者是**后面**的标准流盒子，**不会影响前面的标准流** **建议** **如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动防止引起问题** ## 清除浮动  **总结** 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响 准确地说，并不是清除浮动，而是**清除浮动后造成的影响** **清除浮动本质** 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题 清除浮动之后， 父级就会根据浮动的子盒子**自动检测高度** 父级有了高度，就**不会影响**下面的标准流了 **清除浮动的方法** 在CSS中，**clear属性**用于清除浮动 **语法** ```css 选择器{clear:属性值;} clear 清除 ``` Why?清除浮动 1. 父级没高度 2. 子盒子浮动了 3. 影响下面布局了，我们就应该清除浮动了 ### 额外标签法(隔墙法) 是W3C推荐的做法是通过在**浮动元素末尾添加一个空的标签** 例如 ```html ``` 或则其他标签br等亦可 ```html/*清除浮动*/ .clear { clear: both; } ``` * 优点： 通俗易懂，书写方便 * 缺点： 添加许多无意义的标签，结构化较差 ### 父级添加overflow属性方法 ```css 可以给父级添加： overflow为 hidden| auto| scroll 都可以实现 overflow: scroll; ``` 优点： 代码简洁 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素 ### 使用after伪元素清除浮动 **:after** **方式为空元素额外标签法的升级版，好处是不用单独加标签了** **使用方法** ```css .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; }/* IE6、7 专有 */ ``` 优点： 符合闭合浮动思想 结构语义化正确 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout 代表网站： 百度、淘宝网、网易等 ### 使用双伪元素清除浮动 ```css .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } ``` 优点： 代码更简洁 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout 代表网站： 小米、腾讯等 ## 常用图片格式 ``` 1. jpg图像格式： JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的 2. gif图像格式： GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果 3. png图像格式 是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景 4. PSD图像格式 PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿 ``` ## PS切片工具  ## 切图插件 Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手 官网: http://www.cutterman.cn/zh/cutterman 注意： cutterman插件要求你的ps **必须是完整版**，不能是绿色版，所以大家需要从新安装完整版本 ## CSS属性书写顺序 **布局定位属性** ```css display / position / float / clear / visibility / overflow （建议 display 第一个写，毕竟关系到模式） ``` **自身属性** ```css width / height / margin / padding / border / background ``` **文本属性** ```css color / font / text-decoration / text-align / vertical-align / white- space / break-word ``` **其他属性**（CSS3） ```css content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient … ``` ```css .jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0,0,0,.5); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } ``` ## 布局流程 ``` （1）必须确定页面的版心（可视区）， 我们测量可得知 （2）分析页面中的行模块，以及每个行模块中的列模块；其实页面布局，就是一行行罗列而成 （3）制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要 （4）然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块 ``` ## chrome调试工具 **F12** **或者** **ctrl+shift+I** **Chrome提示的常见布局错误**     ## 定位 将盒子**定**在某一个**位**置 自由的漂浮在其他盒子(包括标准流和浮动)的上面 ) **标准流**在最底层 (海底) ------- **浮动** 的盒子 在 中间层 (海面) ------- **定位**的盒子 在 最上层 （天空） **定位** **=** **定位模式** **+** **边偏移** **注意：** 1. **边偏移**需要和**定位模式**联合使用，**单独使用无效** 2. **`top`** 和 **`bottom`** 不要同时使用 3. **`left`** 和 **`right`** 不要同时使用 ## 定位模式 在 CSS 中，通过 position 属性定义元素的**定位模式**，语法如下： ```css 选择器 { position: 属性值; } ``` | **值** | **语义** | | -------- | ------------ | | static | **静态**定位 | | relative | **相对**定位 | | absolute | **绝对**定位 | | fixed | **固定**定位 |  | **定位模式** | **是否脱标占有位置** | **移动位置基准** | **模式转换（行内块）** | **使用情况** | | ---------------- | -------------------- | ---------------------- | ---------------------- | ------------------------ | | 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 | | 相对定位relative | 不脱标，占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 | | 绝对定位absolute | 完全脱标，不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 | | 固定定位fixed | 完全脱标，不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 | ### 静态定位（static） **静态定位**是元素的默认定位方式，无定位的意思 静态定位 按照\*\*标准流特性摆放位置\*\*，它**没有边偏移** 静态定位在布局时我们几乎不用的 ### 相对定位（relative） **相对定位**是元素**相对**于它 原来在标准流中的位置 来说的  **相对定位的特点** 相对于 自己原来在标准流中位置来移动的 原来\*\*在标准流的区域继续占有\*\*，后面的盒子仍然以标准流的方式对待它 ### 绝对定位（absolute） **绝对定位**是元素以带有定位的父级元素来移动位置 1. **完全脱标** —— 完全不占位置； 2. **父元素没有定位**，则以**浏览器**为准定位（Document 文档）  3. **父元素要有定位** 将元素依据最近的\*\*已经定位**（绝对、固定或相对定位）的**父元素\*\*（祖先）进行定位  **绝对定位的特点** * 绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置 * 不保留原来的位置，完全是脱标的 **定位口诀** **——** **子绝父相** **绝对定位盒子的居中** **注意**：**绝对定位/固定定位的盒子**不能通过设置 `margin: auto` 设置**水平居中**  left: 50%;：让**盒子的左侧**移动到**父级元素的水平中心位置** margin-left: -100px;：让盒子**向左**移动\*\*自身宽度的一半\*\*  ### 固定定位（fixed） **固定定位**是**绝对定位**的一种特殊形式 1. **完全脱标** —— 完全不占位置； 4. 只认**浏览器的可视窗口** —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置 * 跟**父元素没有任何关系**；单独使用的 * **不随滚动条滚动**  ### 堆叠顺序（z-index） 在使用**定位**布局时，可能会**出现盒子重叠的情况**。 加了定位的盒子，默认\*\*后来者居上\*\*， 后面的盒子会压住前面的盒子 应用 **z-index** 层叠等级属性可以**调整盒子的堆叠顺序**  **z-index 的特性如下** 1. **属性值**：**正整数**、**负整数**或 **0**，默认值是 0，数值越大，盒子越靠上； 2. 如果**属性值相同**，则按照书写顺序，**后来居上**； 3. **数字后面不能加单位** **注意**：z-index 只能应用于**相对定位**、**绝对定位**和**固定定位**的元素，其他**标准流**、**浮动**和**静态定位**无效 ### 定位改变display属性 * 可以用inline-block 转换为行内块 * 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的） * 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块 一个行内的盒子，如果加了**浮动**、**固定定位**和**绝对定位**，不用转换，就可以给这个盒子直接设置宽度和高度等 **同时注意** \*\*浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并\*\*的问题。 （我们以前是用padding border overflow解决的） 也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了 ## 元素的隐藏与显示 **（1）dispaly显示** 设置或检索对象是否及如何显示 **display: none** 隐藏对象 **display：block** 除了转换为块级元素之外，同时还有显示元素的意思 **特点** 隐藏之后，**不再保留位置**  **（2）visibility可见性** 设置或检索对象是否及如何显示 **visibility：visible ;** 对象可视 **visibility：hidden ;** 对象 **特点** 隐藏之后，**继续保留原有位置**  **（3）overflow溢出** 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容 ## css用户界面样式 * 更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究) * 表单轮廓等。 * 防止表单域拖拽 **鼠标样式cursor** 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状 ```html- 我是小白
- 我是小手
- 我是移动
- 我是文本
- 我是文本
](https://developer.mozilla.org/zh-CN/Web/CSS/gradient)数据类型，是一种特别的[\ ](https://developer.mozilla.org/zh-CN/Web/CSS/image)数据类型。 ```css /* 渐变轴为45度，从蓝色渐变到红色 */ linear-gradient(45deg, blue, red); /* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red); /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red); /*从#DAECF9开始到#DAECF9结束，#DAECF9从40%开始，#DAECF9从80%开始*/ background: -webkit-linear-gradient(top, #DAECF9, #DAECF9, #C6E3F8 40%, #DAECF9 80%); ``` 
- 、