lxllxl211的博客

在父级元素里添加：overflow: hidden;子盒子过长，会导致显示不全。

就是在最后一个盒子后面新建一个空盒子，给他设置css样式。把代码中的这句取消注释：就可以消除浮动。

主要使用场景：可以在浏览器页面滚动元素时元素的位置不会改变。1、以浏览器的可视窗口作为参考点移动元素。4、不占有固定位置，浮起来了。3、不随滚动条的滚动而变化。2、和父元素没有关系。

2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他。相对定位是元素在移动位置的时候，是相对 他原来的位置 来说的。static 静态定位。relative 相对定位。absolute 绝对定位。fixed 固定定位。值 语义。1、他是相对于自己原来的位置移动的。很明显盒子发生了移动。

如果祖先元素有定位（相对、绝对、固定）定位，则以最近一级的有。定位祖先元素为参考点移动位置。

1、如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位（document文档）绝对定位是元素在移动的时候，是相对。这是没有加绝对定位的情况。

【代码】css单行文字溢出省略号显示。

隐藏元素：->隐藏元素后，不再占有原先的位置。除了转换成块级元素之外，还有显示元素的意思。display属性用来设置一个元素应该如何 显示。把a1和a2里面的display的注释取消掉。放个代码例子：建立二个盒子，观察显示。第二个盒子被隐藏起来了。

【代码】css选择器的权重。

改变盒子大小即可让下面的盒子显示不出来。

【代码】cssmargin负值运用。

default 小白、默认。pointer 小手。move 移动。text 文本。not-allowed 禁止。代码例子：建立5个盒子，给他们指定不同的属性。鼠标放上去会有不同的样式，但截屏不好实现。属性值： 描述。鼠标样式：cursor。

【代码】css用户界面-取消表单轮廓防止拖拽文本域。

【代码】css土豆案例。

【代码】css制作三角形。

【代码】css 京东三角。

行内快元素和行内元素,在浏览器看来会把行内块元素当作行内元素来处理,所以图片的会和文字的基线对齐。

方法二：将图片转化为块级元素。

3、必须+top、bottom、right、left其中的一个才有效。1、以浏览器的可视窗口为参照点移动元素（固定定位特点）就是可以随便移动滚动条，而且方块保持在固定位置。粘性定位可以被认为是相对定位和固定定位的混合。2、粘性定位占有原先的位置（相对定位特点）

绝对定位，盒子会浮起来，不占有自己原来的位置，便于演示。使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制。数值可以是正整数、负整数或0，默认是auti，数值越大，盒子越靠上。把定位的代码取消注释后，熊二在最上面。当把定位的代码注释后。盒子的前后次序（z轴）

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

浮动元素不同，只会压住下面标准流的盒子，但是不会压住下面标准流盒子 里面的文字（图片）但是绝对定位或者固定定位回压住下面标准流的所有元素。绝对定位或者固定定位回压住下面标准流的所有元素。结果是：浮动的元素不会压着下面标准流的文字。绝对定位（固定定位）会完全压住盒子。正常来说：二个块级元素会竖起来排列。所以添加绝对定位试试。

隐藏元素后，继续占有原来的位置。隐藏元素后，继续占有原来的位置。隐藏元素后，不占有不占有原先的位置。visibility属性用于指定一个元素应该可见还是隐藏。把visibility: hidden;

E:first-child 匹配父元素中的第一个子元素E。E：last-child 匹配父元素中的最后一个E元素。E：nth-child（n） 匹配父元素的第n个子元素E。

将 overflow: hidden;改为overflow: scroll;将overflow: scroll;改为 overflow: scroll;有定位的盒子慎用overflow: hidden;/* 超出的时候显示滚动条，不超出不显示 */将默认改为 overflow: hidden;运行结果：溢出的部分显示滚动条 不溢出也显示。默认是：overflow: visible;运行结果：超出的时候显示滚动条，不超出不显示。溢出的部分显示滚动条 不溢出也显示*/运行结果：隐藏了溢出的部分。

【代码】CSS3的盒子模型。

nth-child(n)选择某个父元素的一个或多个特定的子元素。n可以是关键字：even、2n是偶数，old、（2n+1）奇数。n如果是数字，就是选择第n个元素，里面的数字从1开始。n可以是数字，关键字和公式。

2.下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与mtop之和。1.当上下相邻的二个块元素相遇时，如果上面的元素有下外边距margin-buttom。3.取二者值中的较大者的这种现象称之为相邻块元素垂直外边距的合并。1、对于二个嵌套关系的块元素，如果父元素没有上内边距或边框。3、可以给父元素添加overflow：hidden；2、父元素的上外边距会与子元素的上外边距发生合并。[1]相邻块元素垂直外边距的合并。【2】嵌套块元素垂直外边距的合并。

背景图片默认是在水平和垂直方向平铺的背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的。当只有一个数时，如果是left、center、right，则另一个方向默认居中。如果是top、center、bottom，则另一个方向默认居中。background-image: url( 图片的路径)属性名: background-image (bgi)/* 背景平铺:当多个命令时，使用最后一个命令。当有二个数时，先左右，再上下。水平方向右对齐，竖直方向居中。水平方向居中，垂直方向置顶。

子元素有默认继承父元素样式的特点(子承父业)可以继承的常见属性(文字控制属性都可以继承)

blur里面的数值越大越模糊。

直接上代码：运行结果：语法：[属性名]{}添加样式李旭亮3因为是h2标签，不是p标签，所有没有被选中换颜色5、标签[属性名$=“属性值”]：选中这个标签下，属性值以某些元素结尾的元素5、标签[属性名*=“属性值”]：选中这个标签下，属性名以某些元素结尾的元素

绝对定位的盒子具有行内块元素的特点:加宽度高度生效,如果只有宽度,则整个盒子将因为没有高度而隐形。粉色盒子相对于自己原先的位置向右向下移动了100px。如果父亲没有定位,则以父亲的父亲为基础,如果所有的父亲都没有定位,则以浏览器为基准。介绍:死心眼型定位，相对于浏览器进行定位移动代码:position:fixed;运行效果:粉色盒子在固定位置不变,无论怎么移动鼠标,他都在浏览器固定区域。绝对定位是元素在移动的时候，是相对 他祖先的元素 来说的（拼爹型）介绍：自恋型定位相对于自己之前的位置进行移动。

div、p、h系列、ul、li、dl、dt、dd、form、header、anv、footer。块级元素一般作为大容器，可以嵌套:文本级元素、行内元素、行内块元素等等.img有行内块元素特点，但是chrome调试工具中显示的inline。但是: p标签中不要嵌套div、p、h等块级元素。2、高度和宽度默认由内容撑开。a标签内部可以嵌套任意元素。但是:a标签不能嵌套a标签。（一行只能显示一个）1、一行可以显示多个。

作用:给盒子添加阴影效果，吸引用户注意，体现页面的制作细节属性名: box-shadow取值:

如何盒子模型我们改为box-sizing：border-box，那padding和border就不会。box-sizing：content-box 盒子大小是with+padding+border。撑大盒子了（前提是padding和border不会超过width宽度）box-sizing：border-box；盒子大小是width。有二个值：content-box和border-box。

浮动的盒子会脱离标准流，不占有自己原先的位置，导致下面的其他标签往上移动此时，可以给浮动的盒子添加一个父盒子（块级），并设置高度，就可以避免下面的其他标签上浮但是有时候父盒子不能设置高度，就需要其他方法了黑色盒子浮动起来了。

特点:1.文字笔画粗细均匀，并且首尾无装饰2.场景:网页中大多采用无衬线字体3.常见该系列字体:黑体、Arial3特点:1.文字笔画粗细不均，并且首尾有笔锋装饰2.场景:报刊书籍中应用广泛3.常见该系列字体:宋体、Times New Roman特点:1.每个字母或文字的宽度相等2.场景:一般用于程序代码编写，有利于代码的阅读和编写3.常见该系列字体: Consolas、fira code摘抄自京东sans-serif—等无衬线字体。

【代码】css3新增属性过度。

2.设置边框圆角为盒子宽高的一半border-radius50%1.盒子必须是正方形。