- 博客(22)
- 收藏
- 关注
原创 每日知识总结
网页中有很多布局效果,标准流没有办法完成,使用可以利用浮动改变元素默认的排列方式,举例说明(如网页中横向排列的模块或者一左一右排列的模块)。浮动可以使元素【脱离文档流】,【按照指定方向排列】,直到遇到父元素的边界或另一个浮动元素【停止】。- 描述:在浮动元素的最后加一个空块元素,此元素本身不浮动,且添加样式`clear:both`说明:左侧列固定,左侧浮动,右侧列使用margin-left预留位置,- 优点:内容适应性强,不会在结构上产生冗余代码,可多次重复使用。- 描述:给浮动元素的父元素固定高度。
2022-11-28 17:13:09
76
原创 每日知识总结
问题描述:当父元素没有padding,margin,border时子元素与父元素直接相邻、子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果是正值取两者中的较大值,负值取绝对值较大的值。- 问题描述:当两个块级兄弟元素垂直方向上的margin值直接相遇,会发生合并,最终结果是正值取两者中的较大值,负值取绝对值较大的值。- 常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol。- 在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度。
2022-11-10 16:46:08
74
原创 每日知识总结
概念:当样式声明发生冲突时,用户代理需要确定样式声明的最终值,既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ,这个过程就叫做层叠。优先级就是分配给指定的 CSS 声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。- 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上,内部和外部样式遵循就近原则。概述:每一个直接作用于元素的 CSS 规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。
2022-11-10 09:41:54
74
原创 每日知识总结
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。如果添加新的图标,可以把这些图标添加到已有的项目文件,这样原来的图标和这次新添加的图标就可以在新的一个文件里了。font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。如果添加新的图标,需要再新下载一个文件,且这个文件的图标与上个文件的图标不能在一个文件中,是两个独立的文件。3.解压文件,把文件放到代码中(此时下载的这个文件包括上次选的图标,也包括这次选的新的图标)
2022-11-08 17:05:09
63
原创 每日知识总结
](D:/web/2021/2021一阶段资料/day03/笔记/media/day03_08.png)/*font-family:"宋体","微软雅黑";*//*与上一个相比产生的效果不同,谁在前使用哪一个*/红色: rgb(255,0,0) 、绿色: rgb(0,255,0) 、蓝色: rgb(0,0,255)- 白色: rgb(255,255,255) 、黑色 : rgb(0,0,0)/*font-family:"微软雅黑","宋体";font-family:"微软雅黑abc","宋体";
2022-11-07 21:01:29
44
原创 每日知识总结
thead,tbody,tfoot通常配合适用,用于划分表格语义,实现长表格分步加载,或通过改变结构顺序,优先加载tbody。每个表格均有若干行(由`tr`标签定义),每行被分割为若干单元格(由`td `标签定义)。当读到一个样式表时,浏览器会根据它来格式化 HTML 文档,插入样式表的方法有三种:行间样式表、内部样式表、外部样式。为HTML标记语言提供了一种样式描述,即【设置HTML页面中的元素的位置、排版、样式外观等】CSS中的注释以"注释以`/*`开头,以`*/`结尾,开始和结束中间为注释内容。
2022-11-03 22:04:48
41
原创 每日知识总结
media screen and (max-width:1200px) { ... } /* 中型设备(台式电脑,1200px 以下) */@media screen and (max-width:768px){ ... }/* 超小型设备(手机,768px 以下) *//* 中等屏幕 992px-1200px 屏幕宽度在1200px以下显示的颜色*//* 小屏幕 768px-992px 屏幕宽度在768px以上显示的颜色*//* 小屏幕 768px-992px*/小屏幕 768px-992px。
2022-10-09 22:40:19
35
原创 每日知识总结
3、行级标签之间有间隙,不可以设置上下外边距 ,(上下内填充把文本不能挤下来)2、行级元素里面只能容纳文本或者行级元素(不能往行级元素里面嵌套块级元素)2、在不设置宽度的情况下:块级盒子的宽度是它父级元素内容的宽度。3、在不设置高度的情况下:块级盒子的高度是它本身内容的高度。1、默认并排显示,可以设置宽高,宽度和高度取决于内容。1、默认并排显示、不能设置宽高,宽高取决于内容。4、可以设置上下左右的内填充和外边距。3、可以设置任意方向的内填充和外边距。1、独占一行,可以设置宽高。2、并排显示时中间有间隙。
2022-09-29 16:37:13
45
原创 每日知识总结
相对于元素在正常文档流中的位置移动它,把一个正常文档流中的元素从它的默认位置按坐标进行相对移动。使用场景:一般搭配绝对定位使用,当做绝对定位的父级【父相子绝】3、不定义位置偏移属性时,对元素没有影响。取值:relative 相对定位。(相对于元素本身的位置发生移动)它原本所占的空间不会变。定位属性:position。
2022-09-29 16:34:58
39
原创 每日知识总结
box垂直方向的距离由margin决定,属于同一个BFC的相邻box的margin会发生塌陷。3、position属性为 absoulte 或者 fixed。4、display属性值为 inline-block。1、在内部的box会在垂直方向,一个接一个的排列。5、overflow属性不为 visible。2、float属性不为none。1、根元素 html。BFC渲染规则(特性)
2022-09-29 16:32:50
40
原创 每日知识总结
它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。用来限制在一个块元素显示的文本的行数。- 每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反),>-webkit-box-orient必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。/* 控制要显示的行数 */
2022-09-29 16:30:43
42
原创 每日知识总结
CSS精灵英文叫法 `CSS sprites`,通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”,其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS “background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position 精确的定位出背景图片的位置。- hidden 隐藏该元素但是该元素所占的内存空间还存在,即“隐身效果”。##### 2.1.1 实现步骤。
2022-09-28 17:28:15
169
原创 每日知识总结
img src="D:/web/2021/2021一阶段资料/day07/笔记/media/day07_01.jpg" style="zoom:50%;>如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的,那么元素的“height”和“width”将隐式地由偏移量决定。相对于元素在正常的文档流中的位置移动它,把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。表示“将元素放在文档布局流的默认位置,HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
2022-09-27 21:42:02
46
原创 每日知识总结
网页中有很多布局效果,标准流没有办法完成,使用可以利用浮动改变元素默认的排列方式,举例说明(如网页中横向排列的模块或者一左一右排列的模块)。浮动可以使元素【脱离文档流】,【按照指定方向排列】,直到遇到父元素的边界或另一个浮动元素【停止】。- 描述:在浮动元素的最后加一个空块元素,此元素本身不浮动,且添加样式`clear:both`说明:左侧列固定,左侧浮动,右侧列使用margin-left预留位置,- 优点:内容适应性强,不会在结构上产生冗余代码,可多次重复使用。- 描述:给浮动元素的父元素固定高度。
2022-09-26 16:46:31
43
原创 每日知识总结
第一个值表示水平位置,第二个值垂直位置;repeat-y 沿着垂直方向进行重复 y轴方向。repeat-x 沿水平方向进行重复 x轴方向。repeat 默认值 在水平和垂直方向上重复。默认,背景图像会位于元素的左上角,并且在水平和垂直方向上重复。背景颜色、背景图片、背景图片的平铺方式、显示位置等等。16进制色值 #ff0000。作用:设置背景图片的起始位置。作用:设置背景图片是否重复。作用:设置元素的背景颜色。作用:为元素设置背景图片。作用:设置背景图片的大小。
2022-09-25 20:49:10
67
原创 每日知识总结
当样式属性发生冲突时,要确定最终值,要考虑样式的来源,又要考虑优先级,先后的顺序---层叠性。inherit 表示开启强制继承 每个css属性都接受inherit;b 、 strong 不能继承 font-weight。作用:恰当使用继承可以简化代码,降低css样式的复杂性。不同级选择器 由选择器的优先级决定。行内样式 内部样式 外部样式。通配符 0。父元素会向后代元素传递属性的机制。h标签不能继承font-weight。标签选择器 1。行内样式和选择器的优先级。
2022-09-25 20:44:57
99
原创 日常知识总结
概念:当样式声明发生冲突时,用户代理需要确定样式声明的最终值,既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ,这个过程就叫做层叠。优先级就是分配给指定的 CSS 声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。- 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上,内部和外部样式遵循就近原则。右下角是 100% 100%。- 作用: 使用逗号分隔的列表来对选择器进行分组,给列表中每一个选择器选中的元素设置样式。
2022-09-22 17:00:53
44
原创 每日知识总结
CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边距、边框、填充、和实际内容。margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。边框是围绕内容和内边距之间的一条或多条线,通过边框属性指定一个元素的边框的宽度、样式和颜色。padding可以单独改变元素的上、下、左、右边距,也可以一次改变所有的属性。设置标签所有边框的样式,或者单独地为各边设置边框样式。设置所有边框宽度,或者单独地为各边边框设置宽度。设置所有边框颜色,或者单独地为各边边框设置颜色。
2022-09-22 01:05:38
49
原创 每日知识总结
](D:/web/2021/2021一阶段资料/day03/笔记/media/day03_08.png)/*font-family:"宋体","微软雅黑";*//*与上一个相比产生的效果不同,谁在前使用哪一个*/红色: rgb(255,0,0) 、绿色: rgb(0,255,0) 、蓝色: rgb(0,0,255)- 白色: rgb(255,255,255) 、黑色 : rgb(0,0,0)/*font-family:"微软雅黑","宋体";font-family:"微软雅黑abc","宋体";
2022-09-20 22:06:20
55
原创 每日知识总结
thead,tbody,tfoot通常配合适用,用于划分表格语义,实现长表格分步加载,或通过改变结构顺序,优先加载tbody。每个表格均有若干行(由`tr`标签定义),每行被分割为若干单元格(由`td `标签定义)。**注意**:具有唯一性,一般用于页面唯一性的元素如头部、底部等,经常和 JavaScript 搭配使用。现在,用于显示、展示数据。CSS中的注释以"注释以`/*`开头,以`*/`结尾,开始和结束中间为注释内容。- 作用:表示表头单元格,通常在行或列的开始处,定义行或列包含的数据类型。
2022-09-19 16:43:54
308
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人