pbaiking的博客

问题描述：当父元素没有padding，margin，border时子元素与父元素直接相邻、子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果是正值取两者中的较大值，负值取绝对值较大的值。- 问题描述：当两个块级兄弟元素垂直方向上的margin值直接相遇，会发生合并，最终结果是正值取两者中的较大值，负值取绝对值较大的值。- 常见块级元素 div，h1-h6，p，ul，li，dl，dt，ol。- 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度。

优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。>(２)对于选择器中给定的各个类属性值、属性选择或伪类，加０，０，１，０。>(４)结合符和通配选择器对特殊性没有贡献．其特殊性为０，０，０，０。>(３)对于选择器中给定的各个元素和伪元素，加０，０，０，１。>(１)对于选择器中给定的各个ID属性值，加１，０，０，０。>概述：选择器的权重表述为4个部分，比如０，０，０，０。>(５)每个内联声明的特殊性都是１，０，０，０。##### 3.2.3、继承样式的优先级。

作用2：定义行内元素的基线相对于该元素所在行的基线的垂直对齐。- bottom 把标签的顶端与行中最低的标签的顶端对齐。- baseline 默认。标签放置在父标签的基线上。- top 把标签的顶端与行中最高标签的顶端对齐。- middle 把此标签放置在父标签的中部。- 图片与图片垂直方向的对齐（行内块与行内块）- 作用1：回顾表格处的应用。- 图片与文字垂直方向的对齐。#### 2、常用的值。#### 3、典型应用。

这个元素不会被应用样式span2是子元素的子元素span2是子元素的子元素这个元素会被应用样式span1是子元素span1是子元素

4、为img标签设置垂直对齐方式 img{vertical-align：不为默认值 baseline}**2、给img的父元素设置font-size：0；或者 line-height：0；*图片下间隙出现的原因： 父元素没有设置高度，由图片撑开，就是有间隙**3、给img标签转换为块级标签 display：block;*1、给img的父元素设置高度，高度和图片的高一致；

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。padding可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。CSSpadding（内边距）属性，定义元素边框与元素内容之间的空间。设置标签所有边框的样式，或者单独地为各边设置边框样式。设置所有边框颜色，或者单独地为各边边框设置颜色。/* 单个边拆分的写法 */- padding-bottom 设置标签的下内边距。- 4个值：分别表示【上，右，下、左】的内边距值。- 3个值：分别表示【上，左右，下】的内边距值。

CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色。设置所有边框宽度，或者单独地为各边边框设置宽度。#### 3.1、border-width边框宽度。- 4个值 设置上、右、下、左。- 1个值 设置所有边框宽度。- 3个值 设置上、左右、下。- 2个值 设置上下、左右。

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档，插入样式表的方法有三种：行间样式表、内部样式表、外部样式。为HTML标记语言提供了一种样式描述，即【设置HTML页面中的元素的位置、排版、样式外观等】- CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始。CSS中的注释以"注释以`/*`开头，以`*/`结尾,开始和结束中间为注释内容。- 在head标签的内部，由style标签包含的样式称为内部样式。- 行间样式适用于某个元素拥有特殊样式时使用，结构表现【不分离】

多个单词可以以驼峰式（newsCont）、中划线连接（news_cont）、下划线连接（news-cont）等。>最终排序：id（身份证号是XX的学生）> 类（名叫王小帅的学生） >元素名称（所有男生） > *(所有学生)>- 如果有样式，但是样式被中划线贯穿，说明可能存在书写顺序 或优先级问题。>- 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。>- 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。>- 左边是 HTML 元素结构，右边是 CSS 样式。

电话 - 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型。- 作用：使用表格的边框属性可以显示一个带有边框的表格。 电话 电话

与此类似，HTML 也提供了相应的标签，用于标记某些文本，使其具有加粗、倾斜、删除划线等效果。为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。概述：在日常用语中，我们常常会加重某个字的读音，或者用加粗等方式突出某句话的重点。- 不应该只为了实现加粗、斜体效果使用strong，em，可以使用css替代。常常我们在需要手动换行地方，加入换行标签 ，即可实现内容强制换行。定义粗体文本,用于吸引读者的注意到该元素的内容上。作为行内容器包含短语内容，通常用来区分文本样式。

页面中的图片会非常的多，通常我们会新建一个文件夹来存放这些图像文件images，这时候再查找图像，就需要通过路径的来描述图像文件的位置。概述:相对路径是指由这个文件所在位置为参考基础，而建立出的目录关系，常用的相对路径包括当前目录，上一级目录，下一级目录。-- ./ 可以省略 -->- 作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验。图像是网页的主要内容之一，在HTML标签中，img标签用于定义HTML页面中的图像。- 作用：用于指定图像文件的路径和文件名。

首页下载文本文件定义跳转：商品文字或图片

李美丽- 包含术语定义以及描述的列表。姓名生日加入我们社会招聘校园招聘国际招聘- 默认dl，dd带有间距。描述 定义

步骤一步骤二type属性不常用，通常使用css属性替代。- 营养信息标签上 按含量排序的成分列表。(5)type属性（了解）- `i`: 小写罗马数字。- `I`: 大写罗马数字。(4)典型应用 （图示）- 烹饪食谱中的各个步骤。- 指路时的各处转弯方向。出门右转

步骤一type属性不常用，通常使用css属性替代。- 营养信息标签上 按含量排序的成分列表。苹果香蕉- circle 列表样式空心圆。- square列表样式为小方块。苹果香蕉

具体的实践方式由多方面组成，包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。这样就可以不必为不断到来的新设备做专门的版本设计和开发了。响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。背景：移动互联网的发展，为了满足移动互联网多终端显示的需求 催生了响应式式布局的诞生，1.虚拟窗口：创建虚拟窗口，自定义窗口的大小和缩放功能，能适应移动设备的屏幕大小。1.可以根据设备显示器的特性，来设置不同的css的样式。

contain:包含，等比例缩放背景图片到完整显示在盒子中，有一边到达边界就停止放大, 可能导致另一边留白 但是背景图可能在区域范围内铺不满（宽高给大点）* cover:覆盖，等比例缩放背景图片到铺满整个盒子，但是背景图可能会无法完整显示在盒子中（宽高给大点）- 不同的背景图像【逗号】隔开，也可以给不同的图片设置多个不同的属性（如背景位置，背景重复等）- background-origin: border-box;

动画名字 动画持续时间 动画时间函数 动画延迟时间 动画执行次数 动画的方向 动画的播放状态 填充模式。- alternate-reverse：反向正向交替——》 动画先反运行再正方向运行，并持续交替运行。- alternate：正向反向交替—》动画先正常运行再反方向运行，并持续交替运行。- forwards 动画结束之后停留在结束帧状态。- 进场之前和动画结束之后都停留在元素的初始状态。- 默认值为0，需要设置该属性，否则不会播放动画。@-webkit-keyframes 动画名{

相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。它原本所占的空间不会改变。没有定位父级时相对于HTML进行定位，有定位父级时相对于最近的定位父级进行定位。元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。- 不定义偏移量时对元素基本没有影响。