httpkaidi的博客

CSS之定位 定位与浮动的区别： 浮动：可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 定位：可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子 定位的组成 定位=定位模式+边偏移 定位模式 position 选择器 {position : 属性值；} position有四个属性值： 1.**static：静态定位，**没有特殊的定位规则，遵循正常的文档流对象（极少使用） 2 relative：相对定位，相对于元素自身进行定位（参照物为元素原来的位

常见的图片格式 jpg图像格式:JPEG (JPG）对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用jpg格式的 .gif图像格式:GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果 png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景.如果想要切成背景透明的图片,请选择png格式. .PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮

CSS浮动 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 网页布局准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘 ！！！浮动特性（重要）： 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称“脱标”） 浮动的盒子不再保留原先的位置 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并

盒子模型 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。 关于border（边框）: bo.

CSS三大特性 层叠性，继承性，优先级 层叠性 层叠性主要用来解决样式冲突问题 层叠性原则： 1.样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式（覆盖） 2.样式不冲突，不会层叠 继承性 子标签会继承父标签的某些样式，如文本颜色和色号（主要是继承文字方面的样式） 行高的继承： body{ font:12px/1.5 Microsoft YaHei; } 此处 12px/1.5 即 body内所有子元素的行高为当前文字大小12px的1.5倍 此种方法优势：里面的子元素可以根据自己文字.

CSS的元素显示方法 元素显示模式：即元素（标签）以什么方式进行展示 1.块元素 常用有<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等，<div>最典型 特点： 比较霸道，自己独占一行 高度，宽度，外边距，内边距都可以控制 宽度默认为容器（父级宽度）的100% 是一个容器及盒子，里面可以放行内或块级元素 1.文字类的元素不能使用块元素 2.<p>标签主要用于存放文字，因此&l

后代选择器（重要） 后代选择器（descendant selector）又称为包含选择器。 后代选择器可以选择作为某元素后代的元素。 语法结构： 元素1 元素2 { 样式声明 } /*选择元素1里面的所有元素2*/ 例： ol li{ color: pink } 元素1与元素2之间用空格分开。 元素1与元素2可以是任意基础选择器 元素1是父级，元素2是子集，被选择的是元素2 元素2可以是儿子，也可是孙子，只要是元素1的后代均可选择，可以一层一层继续选择下去 也可选择已有元素类下的

Emmet语法 用于提高html/css编写速度（适用于VS Code） 快速生成HTML结构 1．生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成<div></div> 2．如果想要生成多个相同标签加上就可以了比如div3就可以快速生成3个div 3．如果有父子级关系的标签，可以用>比如ul> li就可以了 4．如果有兄弟关系的标签，用＋就可以了比如div+p 5．如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了 6

Chrom调试工具 打开调式工具方法 按F12键 右击，选择检查 使用调式工具方法 选择 Elements 1.ctrl加滚轮 放大缩小代码 2.左边为HTML元素，右边为CSS元素 3.右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色 4.ctrl+0 复原浏览器大小 5.若点击元素，发现右侧没有样式引入，可能是类名或者样式引入错误 6如果由样式，但样式前面有黄色感叹号出现，说明样式属性书写错误 ...

CSS简介 CSS:层叠样式表，也是一种标记语言，用于美化网页 。 最大价值：让结构(html)和样式（CSS）相分离CSS语法规范：由选择器以及一条或多条声明组成 <style> /*选择器 {样式}*/ /*给谁改样式{改什么样式}*/ p{ color: red; font-size: 12px; } </style> 属性与属性值间以键值对形式出现