导航类 导航：nav 标题：title 摘要：summary 菜单：menu 子菜单：submenu 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：...leftsidebar 右导航：rightsidebar 页面结构布局 容器：container 页头：header 内容：content/container 页尾：footer 导航：nav 侧栏：sidebar...bold 斜体：italic 加重：weight 加粗：bold 输入：input 主体：main 下面的：under 重复：repeat 填充：padding 位置：position 正常：normal 父级...parent 子级：children 隐藏：hidden 显示：visible 溢出：overflow 列表：list 样式 style 导航：nav 显示类型：display 广告图片：banner...margin 外边距 border 边线 solid 直线 dashed 虚线 dotted 点线 overflow 溢出 hidden 隐藏 visibility 可见度 table 表格 thead
常用块元素标签 1、标题标签，表示文档的标题，除了具有块元素基本特性外，还含有默认的外边距和字体大小 一级标题 二级标题 三级标题 四级标题...，常用的属性有： 1、none 元素隐藏且不占位置 2、block 元素以块元素显示 css元素溢出 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow...*/ padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下： padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px...*/ padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ padding：20px; /* 设置四边内边距为20px */ 设置外间距margin ...关于定位 我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下： relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位
布局相关知识 1 盒子模型 外盒子 在计算宽高时要算外边距。 内盒子在计算宽高时不计算内边距。 块级元素在普通文档流中独占一行，可设置宽高宽度默认是父级100%，内外边距，可容纳其他元素。...--->只能去避免 内边距合并问题 --> 父子盒子同时设置内边距会发生合并。解决方案 父盒子设置边框 或者父盒子overwirte:隐藏。...浮动元素排列的位置，跟上一个元素有关系，如果上一个元素有浮动，则a元素顶部会和上一个元素的顶部对齐，如果上一个元素是标准流，则a元素的顶部会和上一个元素的底部对齐。...2 父级添加overflow属性方法 通过出发bfc来清除浮动 overflow为hidden|auto|scroll 优点：代码整洁 缺点：内容增多容易造成不会自动换行导致内容被隐藏掉如文本等...就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围，(这条相对于父容器是body)。
display:”none”与visibility:hidden的区别： visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。...父标签塌陷问题 .clearfix:after { content: ""; display: block; clear: both; } 父级坍塌现象及解决方案 父级坍塌现象示例...2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。 overflow溢出属性 值 描述 visible 默认值。...元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。...这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left
制作iVX 低代码项目需要进入在线IDE：https://editor.ivx.cn/ 一、博客详情页分析 博客详情页大体分为顶部标题、发布时间、作者信息、博文内容，底部的评论我们在此不必做悬浮内容...二、博客详情页标题及发布时间制作 首先咱们先制作博客详情页的标题和发布时间，此时先把顶部的头部栏复制过来，点击前台添加一个页面，命名为详情页： 接着复制整个首页中的主要内容行到详情页之中，因为大体布局一致...，在此设置这个行的上内边距以及距离顶部的一段距离，这样才可以使上部分像有一个隔断的颜色，当然你也可以设置边距样式达到同样的效果： 接着设置内边距： 此时页面效果如下： 接着往这个行中添加一个行命名为标题...，同样设置高度为包裹背景色为透明： 由于标题还距离左右两侧有一定的边距，并且接下来的所有内容都距离左右有一定边距，此时直接设置父容器的左右内边距是最方便的方法： 直接设置主要内容行的内边距...设置完毕后在左行中添加一个文本用于记录时间： 此时页面效果如下： 但此时我们的时间和点赞区域应该有一定的内边距，设置他们的父容器上下内边距： 此时页面显示如下： 接着在右按钮中添加一个按钮
如果上一个元素有浮动，则 A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部 会和上一个元素的底部对齐。...优点： 代码简洁 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。...注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。 父级没有定位 若所有父元素都没有定位，以浏览器为准对齐(document文档)。...visible : 对象可视 hidden : 对象隐藏 特点： 隐藏之后，继续保留原有位置。（停职留薪） overflow 溢出 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。...给img 添加 display：block; 转换为块级元素就不会存在问题了。 溢出的文字隐藏 word-break:自动换行 normal 使用浏览器默认的换行规则。
margin为20px，但表现在页面上2者之间的间隔为20px，而不是预想中的10+20px=30px，结果是选择2者之间最大的那个margin，我们把这种机制称之为“外边距合并”；外边距合并不仅仅出现在相邻的元素间...外边距合并只出现在块级元素上； // b. 浮动元素不会和相邻的元素产生外边距合并； // c. 绝对定位元素不会和相邻的元素产生外边距合并； // d....内联块级元素间不会产生外边距合并； // e. 根元素间不会产生外边距合并（如html与body间）； // f....设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并； 22....打印分页符 // 虽然大多数的互联网用户更愿意在网上阅读的内容，但一些用户可能想打印文章。
：隐藏； 文字溢出：省略号； } .line-2 { 宽度：100px； 溢出：隐藏； 文字溢出：省略号； 显示：-webkit-box; -webkit-line-clamp：2; //控制多行的行数...-webkit-box-orient：垂直; } 5，水平/垂直居中定位 //绝对定位未知高度，距顶部，左边50％，然后转换：translate（-50％，-50％），不支持IE9以下 。...中央 { 位置：绝对； 最高：50％； 左：50％； 边距：-50px 0 0 -50px; //假设宽高都为100px } //弹性布局 。...device-width，初始比例= 1.0，最小比例= 1.0，最大比例= 1.0，用户可缩放比例=否，viewport-fit = cover”> 身体{ padding-top：constant（安全区域插入顶部...ms-input-placeholder {} / * IE浏览器* / //冒号前写input或textarea等元素 // IE9和Opera12以下版本的CSS选择器均不支持占位文本 8，去掉图片底部至少边距
换句话说，如果行内级盒先于左浮动被放在行盒中，而行盒的剩余空间可以容纳左浮动，那么左浮动会被置于该行内，且与行盒顶部对齐，而已经放入该行盒的行内级盒会被相应地移动到浮动的右侧（右侧即是左浮动的另一侧），...浮动的内容会像浮动创建了新的堆叠上下文 Stacking Context 一样堆叠起来，但定位元素、创建了新的堆叠上下文并参与了浮动的父级堆叠上下文的元素除外。...两个段落都设置了 clear: left ，因此使得第二个段落“被往下推”到浮动之下的位置，这是“空隙clearance”被添加到其top margin 之上的结果。 3....浮动盒的上外边缘不可高于其包含块的顶部。当浮动出现两个折叠外边距之间时，浮动会如同它有一个参与标准流的空匿名父块一样来定位。该父块的位置由关于外边距折叠那章的规则定义。... 说明：要是没有 clear ，首段和末段两个段落的边距将会折叠并且末段的上边框边缘将同浮动段落的顶部齐平。如下： ? 但 clear 使得上边框边缘低于浮动，即下降2em。
，但内联元素不能包含块级元素，它只能包含其它内联元素。...可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。...上下边距为10px 左右边距为20px margin:25px; 所有的4个边距都是25px 居中应用 1 margin: 0 auto; margin...（会改变结构），不想改变可以加下面属性 1 overflow: hidden; 溢出则隐藏 如果有文本，最好用overflow：auto，那样溢出的文本也可以通过滚动条看到 float属性 基本浮动规则...父级坍塌现象 <!
38、为什么css放在顶部而js写在后面？ 39、z-index属性在什么情况下会失效 40、Flex 布局父级容器属性和子级项目属性有哪些？...它会继承父级元素的字体大小，因此并不是一个固定的值。 rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。...（3）、父级div定义伪类:after和zoom。 （4）、父级div定义overflow:hidden。 （5）、父级div定义overflow:auto。...参数是visible时候，溢出的内容出现在父元素之外。 参数是hidden时候，溢出隐藏。 20、对line-height是如何理解的？ 行高是指一行文字的高度，具体说是两行文字间基线的距离。...1.浏览器预先加载css后，可以不必等待HTML加载完毕就可以渲染页面了 2.其实HTML渲染并不会等到完全加载完在渲染页面，而是一边解析DOM一边渲染。
然后，为容器元素的父元素设置 page-break-after: always; 属性，表示在该元素之后始终分页。...然后，我们定义了一个名为 page 的父元素，并为其设置了 page-break-after: always; 属性，表示在该元素之后始终分页。 当数据超出一页时，浏览器会自动将剩余部分放到下一页。...在打印预览中，你可以看到所有的数据被正确地分页，并且可以跨页打印。...@media print { body { font-size: 12pt; color: #000; } } 3.设置页面边距：通过设置 margin 属性来调整打印页面的边距...size: A4; /* 可以使用常见的纸张尺寸如 A4、Letter、Legal 等 */ } } 6.调整图片显示：可以通过设置 max-width 属性来控制打印版本中图片的最大宽度，避免图片溢出页面边界
display:"none“ 与visibility:hidden的区别： visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。...也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。...4.5 父标签塌陷问题 .clearfix:after { content: ""; display: block; clear: both; } 5、overflow溢出属性 值 描述 visible...重点：如果父级设置了position属性，例如 position:relative; 那么子元素就会以父级的左上角为原点进行定位。...这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute; 父元素设置 position:relative; 然后top、right、bottom
Flexbox 在某些情况下，在flexbox中使用自动页边距非常有用。当一个子项目有一个margin是auto 时，它将被推到远的另一边。...考虑下面的模型，父级元素是一个 flex 布局： ? 我们想把第二项推到最右边，自动边距就派上用场了。...使用CSS网格时，可以使用自动页边距实现类似于 flexbox 的结果。...如果没有，那么请使用自动页边距作为最后的选择，而应使用CSS逻辑属性。 overflow 属性 当我们有一个元素时，我们应该考虑它应该包含的最小和最大内容。...如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。 如果内容溢出，桌面浏览器会提供滚动条。
但注意继承的优先级是最小的。...visibility：hidden隐藏的元素仍然占据空间，该元素虽然被隐藏了，但仍然会影响布局 display：none隐藏的某个元素不会占据空间，不会影响布局 七、font相关属性 font-style...top，bottom，left，right margin-top：2px 十三、float浮动属性 float可以让块级标签并排在一行，但如果设定了float，浮动框就不在文档的普通流，比如在一个div1...3，absolute（绝对定位） 设置为绝对定位的元素框会从文本流出来，也就不会占据原来的位置，同时也会出现父级塌陷的现象，绝对定位是相对于父级位置来的（父级必须是relative，也就是父级要是相对定位的...，父级没有，就找父级的父级），若都没有，那它的位置相对于body ?
style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距） clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距） offsetHeight...//返回元素的高度（包括元素高度、内边距和边框，不包括外边距） scrollHeigh //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight...相同 scrollTop //此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。...offsetTop //返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。
对于margin来说，可以使用margin-top/right/bottom/left设置，记住顺序为顺时针，同时注意在设置百分比边距时，一定记住是相对的百分比，比如外部容器为页面的25%，那么内部的margin...元素中部与父元素中部对齐,bottom,text-top将元素的顶部与其父元素的顶部对齐,baseline,text-bottom。...padding-left + padding-right + border-left + border-right + margin-left + margin-right，在实际项目中，一定不要忘了设置默认的边距属性...通常可以通过float，clear,overflow在控制文本流，overflow用于当元素太小时，控制文本的溢出，当元素的长宽设置过小时，可以通过设置visible自动扩大元素，hidden允许溢出的文本隐藏...在设置时，可以使用min-width（不包括填充、边框和边距）来保证流动式布局至少可以达到最基本的显示效果。
margin 外边距 overflow 内容溢出后会怎么样（visible默认值溢出显示，hidden溢出隐藏，auto溢出滚动（超出内容才加滚动条），scroll溢出滚动（无论内容是否溢出都会加滚动条...这个功能的名称单词中肯定会有toggle） val （jQuery中的val是专门来修改访问value属性值的） value 值 prop 访问修改属性值 css 控制css属性的函数 siblings 同级的 parent 父级的...children 子级的 addClass 添加类 removeClass删除类 hover 鼠标滑过 eq 找下标 animate 自定义动画函数 slideUp 隐藏（向上滑，就是把东西收起来，就隐藏了...： append 新增节点 appendTo新增节点 perpend给前面新增节点 perpendTo给前面新增节点 给父级加： after给后面增加节点 insertAfter给指定的后面新增节点 before...给前面新增节点 insertBefore 给指定的父级前面新增节点 empty 清空节点 remove 删除节点 allow允许 上面的单词，如果你哪一个忘记了具体的功能，不要怕，仍旧是老规矩，点击传送门进行查看
通用选择器 * { color: white; } 组合选择器 后代选择器 /*li内部的a标签设置字体颜色*/ li a { color: green; } 儿子选择器 /*选择所有父级是 <...display:"none"与visibility:hidden的区别： visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。...父标签塌陷问题 .clearfix:after { content: ""; display: block; clear: both; } overflow溢出属性 值 描述 visible...元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。...这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left
水平方法, 两个标签都设外边距,取两者的边距之和....display:"none"与visibility:hidden的区别 visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。...， 就按照父级标签的大小来，比父级标签的高宽小的时候，就不需要按照父级标签的大小来了，了解一下就行了*/ .header-img > img {...对象遵循正常文档流，所以不会出现像浮动那种父级标签塌陷的副作用，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。往上移动?...重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
