电商网站的建设与运营网站建设申报书

当前位置： 首页 > news >正文

电商网站的建设与运营,网站建设申报书,北京seo服务商,公司网站建设深圳文章目录 一、html1. 如何理解html语义化2. 说说块级元素和内联元素的区别 二、css1. 盒模型的宽度offsetWidth如何计算2. box-sizing:border-box有什么用3. margin的纵向重叠问题4. 谈谈你对BFC的理解和应用5. 清除浮动有哪些方式6. 使用flex布局实现骰子37.position的absolut… 文章目录 一、html1. 如何理解html语义化2. 说说块级元素和内联元素的区别 二、css1. 盒模型的宽度offsetWidth如何计算2. box-sizing:border-box有什么用3. margin的纵向重叠问题4. 谈谈你对BFC的理解和应用5. 清除浮动有哪些方式6. 使用flex布局实现骰子37.position的absolute和relative定位问题8. 水平居中的实现方式9.水平垂直居中的实现方式10. line-height继承问题11. remempx12. vw和vh 一、html

1. 如何理解html语义化 HTML语义化是指在编写HTML代码时使用适当的标签来描述内容的含义和结构。 语义化的好处包括 增强代码的可读性;提高搜索引擎的理解能力;方便开发者阅读和维护代码;以及更好地支持无障碍访问等。 理解HTML语义化的关键在于正确使用HTML标签来表示内容的含义。以下是一些常见的HTML标签和它们的语义含义 header 标签用于表示页面或区块的头部比如页面的标题或导航栏。 nav 标签用于表示导航栏。 main 标签用于表示页面的主要内容。 article 标签用于表示独立的文章内容。 section 标签用于表示页面或文章的分段内容。 aside 标签用于表示与主要内容相关但不属于主要内容的附加信息。 footer 标签用于表示页面或区块的底部比如版权信息或联系方式。 h1 - h6 标签用于表示标题其中 h1 表示最高级别的标题。 p 标签用于表示段落。 ul 和 ol 标签用于表示无序列表和有序列表。 li 标签用于表示列表中的每一项。 a 标签用于表示链接。 img 标签用于表示图片。 table 标签用于表示表格。
   举例对比说明假设有一个网页包含一个标题、一段文字内容和两张图片 非语义化的HTML代码 div classheader网页标题/div div classcontent这是内容/div div classimageimg srcimage1.jpg alt图片1/div div classimageimg srcimage2.jpg alt图片2/div这段代码使用了一些无具体含义的div标签来表示页面的结构。这样的代码在没有样式的情况下很难理解页面结构也不利于搜索引擎对页面内容的分析。 语义化的HTML代码 header网页标题/header mainarticleh1文章标题/h1p这是内容/p/articlefigureimg srcimage1.jpg alt图片1figcaption图片1的描述/figcaption/figurefigureimg srcimage2.jpg alt图片2figcaption图片2的描述/figcaption/figure /main这段代码使用了具有明确含义的HTML标签来描述页面结构和内容。header表示网页的标题main表示主要内容article表示一篇文章等等。这样的代码清晰易读有助于理解网页结构和内容。 通过对比可以看出语义化的HTML代码更直观、易理解也更便于网页的维护和SEO优化。
2. 说说块级元素和内联元素的区别 在HTML中块级元素和内联元素是两种不同的元素类型。 块级元素Block-level elements 块级元素通常会在页面中生成一个独立的块占据一行或者多行的空间。常见的块级元素有div, p, h1-h6, ul, li, table, form等。 内联元素Inline elements 内联元素不会在页面中生成一个独立的块而是与其他元素在一行显示。常见的内联元素有span, a, strong, em, img, input, br等。 块级元素和内联元素的区别主要体现在以下几个方面 显示方式块级元素以块的形式显示即自动换行且占据一整行或多行的宽度内联元素则与其他元素在一行上显示不会换行。盒模型块级元素可以设置宽度、高度、内外边距等样式属性可以直接控制元素的盒模型内联元素的宽度和高度由其内容决定不能直接设置。默认样式块级元素的默认样式是display: block;而内联元素的默认样式是display: inline;。嵌套规则块级元素可以包含其他块级元素和内联元素内联元素不能包含块级元素只能包含其他内联元素或者文本内容。 需要注意的是可以通过CSS的属性display来改变元素的显示方式将块级元素设置为内联元素或将内联元素设置为块级元素。 二、css
3. 盒模型的宽度offsetWidth如何计算 盒模型的宽度offsetWidth是指一个元素的整体宽度包括内容区域的宽度(content)、内边距padding以及边框border。 在计算offsetWidth时浏览器会将元素的内容区域宽度、内边距宽度和边框宽度都考虑在内。 举例说明 假设有一个 div 元素设置了如下样式 div {width: 300px;padding: 10px;border: 1px solid black; }这个 div 元素的盒模型宽度可以这样计算 内容宽度指定的宽度为 300px。 内边距和边框宽度左右两侧的内边距为 10px上下两侧的内边距为 10px四条边的边框宽度为 1px。
   因此盒模型的总宽度为 300px 2 * 10px 2 * 1px 322px。
4. box-sizing:border-box有什么用 box-sizing: border-box;是一个用于 CSS 的属性它指定了元素的盒子模型计算方式并将CSS的宽度width和高度height的计算方式修改为包括边框border和内边距padding的计算。 举例来说如果一个元素宽度被设置为200px并且应用了一些边框和内边距如果没有使用box-sizing: border-box;属性那么元素的实际宽度将会变大以包括边框和内边距的大小。而如果使用了box-sizing: border-box;属性元素的实际宽度将会保持为200px并且边框和内边距将会减少自动适应。 下面是一个示例展示了使用和不使用box-sizing: border-box;属性的区别 HTML: div classexample/divCSS: .example {width: 200px;height: 100px;padding: 10px;border: 5px solid black;background-color: lightgray; box-sizing: border-box; }在上述例子中使用了box-sizing: border-box;“属性因此元素的实际宽度仍然为200px包括边框和内边距。如果没有使用该属性元素的实际宽度将会变为230px宽度 左右边距 左右边框因为默认的box-sizing属性值是content-box”即只包括内容。 这个属性特别有用的一个场景是当需要制作一个带有固定宽度的网格系统时可以使用该属性确保每列总宽度都是固定的而不会因为边框和内边距的存在而超出指定的宽度范围。
5. margin的纵向重叠问题 纵向重叠问题是指当相邻的元素都设置了上下边距margin并且上一个元素的下边距与下一个元素的上边距之和超过了一定的阈值常为负数则两者之间的垂直间距会取两个边距值中的较大者。 举一个具体的例子假设有两个相邻的块级元素分别是div1和div2它们的CSS样式如下 div1 {margin-bottom: 20px; }div2 {margin-top: 30px; }在正常情况下div1和div2之间的垂直间距应该是20px30px50px。然而因为它们的边距之和超过了一定的阈值实际渲染结果会取两个边距值中的较大者即30px所以div1和div2之间的垂直间距为30px。 这种纵向重叠问题通常出现在嵌套的块级元素中比如一个列表中的每个列表项li都设置了上下边距而整个列表外又设置了上下边距。当边距值的和超过了阈值时列表项之间会出现较大的垂直间距而不是累加所有边距值的和。为了避免这个问题可以使用其他的方式来实现元素之间的间距如padding、border等。
6. 谈谈你对BFC的理解和应用 BFC是块格式化上下文Block Formatting Context的缩写BFC可以看作是一个封闭的容器容器内的元素布局不会影响到容器外的元素。 形成bfc的条件 条件描述根元素根元素html默认就是一个 bfc浮动元素浮动元素float不为none绝对定位元素绝对定位元素position为absolute和fixeddisplay为inline-block、table-cell等display为inline-block、table-cell等overflow不为visibleoverflow不为visible的块级元素 常见的bfc应用场景 清除浮动当容器内部有浮动元素时容器的高度会塌陷不会撑开容器。我们可以通过创建一个BFC来清除浮动使得容器能够正常显示高度。可以通过给容器设置overflow: hidden或者display: table来创建BFC。 防止外边距合并在正常流布局中相邻的块级元素的垂直外边距会发生合并导致元素之间的间距变大。但是在BFC中相邻块级元素的垂直外边距不会合并。可以通过给元素创建BFC来防止外边距合并可以通过设置float、position: absolute、overflow: hidden等属性来创建BFC。 实现多列布局BFC可以实现多列布局通过给容器设置column-count或者column-width属性可以将容器内的内容按照多列进行布局。由于每一列都处于独立的BFC中因此列与列之间的布局互不影响。
   
7. 清除浮动有哪些方式 清除浮动的方式有以下几种 使用clearfix 需要在浮动元素的父元素中添加clearfix类然后通过该类设置clear:both属性来清除浮动。示例代码如下 div classclearfixdiv classfloat-left左浮动元素/divdiv classfloat-right右浮动元素/div /div.clearfix::after {content: ;display: table;clear: both; } .float-left {float: left; } .float-right {float: right; }使用空元素添加clear属性 在浮动元素的父元素中添加一个空元素然后使用clear属性来清除浮动。示例代码如下 div classclear-floatdiv classfloat-left左浮动元素/divdiv classfloat-right右浮动元素/divdiv styleclear: both;/div /div使用overflow:hidden 在浮动元素的父元素中设置overflow属性为hidden可以使父元素自动包含浮动子元素从而清除浮动。示例代码如下 div classfloat-parentdiv classfloat-left左浮动元素/divdiv classfloat-right右浮动元素/div /div.float-parent {overflow: hidden; } .float-left {float: left; } .float-right {float: right; }6. 使用flex布局实现骰子3 效果如下
   示例代码 !DOCTYPE html html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title骰子三点布局/titlestyle.dice {display: flex;justify-content: center;align-items: center;width: 50px;height: 50px;border: 1px solid #000;}.dot {width: 10px;height: 10px;background-color: #000;border-radius: 50%;margin: 2px;}.dot:nth-child(1) {align-self: flex-start;}.dot:nth-child(3) {align-self: flex-end;}/style/headbodydiv classdicespan classdot/spanspan classdot/spanspan classdot/span/div/body /html 主要考察的是交叉轴的align-self属性。 7.position的absolute和relative定位问题 position:absolute使元素的位置相对于其最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素则相对于最初的包含块通常是浏览器窗口进行定位。使用position:absolute时可以使用top、bottom、left和right属性来指定元素相对于其定位父元素的偏移位置。绝对定位的元素会完全从正常的文档流中脱离并且不保留其空间 position:relative则使元素相对于正常文档流进行定位。在使用position:relative时可以使用top、bottom、left和right属性来指定元素相对于其原始位置的偏移。相对定位不会从元素在正常文档流中的位置中删除元素。相对定位的元素仍然占据其原始的空间因此周围的元素不会发生布局变化 为什么常用“子绝父相”进行定位布局 子绝父相是指子元素使用position:absolute进行定位父元素使用position:relative进行定位的布局方式。这种方式常用于构建复杂的页面布局具有一些优点 父元素的position:relative会创建一个新的定位上下文使得子元素相对于其定位而不会影响其他元素的布局。子元素的position:absolute允许完全自由的定位。可以通过指定top、bottom、left和right属性来控制子元素在父元素中的精确位置。可以方便地创建重叠和层叠效果使得布局更加灵活。 举个例子假设我们有以下HTML代码 div classparentdiv classchild/div /divCSS代码如下 .parent {position: relative;height: 200px;width: 200px;background-color: lightblue; }.child {position: absolute;top: 50px;left: 50px;height: 50px;width: 50px;background-color: red; }在这个例子中父元素class“parent”被设置为position:relative这意味着子元素class“child”将相对于父元素进行定位。子元素使用position:absolute进行定位并且设置top和left属性使其与父元素的左上角偏移50像素。
8. 水平居中的实现方式 使用text-align属性可以在父元素上设置text-align属性为center将其子元素水平居中对齐。 .parent {text-align: center; }.child {display: inline-block; }使用margin属性通过设置子元素的左右margin值为auto可以将其水平居中对齐。 .parent {width: 300px; }.child {margin-left: auto;margin-right: auto; }使用flexbox布局使用flexbox布局可以轻松实现水平居中对齐。 .parent {display: flex;justify-content: center; }.child {/* no additional styling needed / }使用grid布局通过将子元素放置在父元素的中心单元格中可以实现水平居中对齐。 .parent {display: grid;place-items: center; }.child {/ no additional styling needed */ }使用绝对定位与transform属性通过将子元素的左右偏移设置为50%并且使用transform属性的translateX(-50%)将其平移回来可以实现水平居中对齐。 .parent {position: relative; }.child {position: absolute;left: 50%;transform: translateX(-50%); }9.水平垂直居中的实现方式 使用绝对定位和transform属性 div classcontainerdiv classcentered!– 内容 –/div /div.container {position: relative; }.centered {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); }将父容器设置为相对定位然后将子容器设置为绝对定位通过设置left和top为50%再使用transform属性将内容向左和向上平移50%的宽度和高度从而实现水平垂直居中对齐。 使用Flexbox布局 div classcontainerdiv classcentered!– 内容 –/div /div.container {display: flex;justify-content: center;align-items: center; }将父容器设置为Flex布局并使用justify-content: center;和align-items: center;属性使内容在水平和垂直方向上都居中对齐。 设置容器的text-align属性为center使文本在容器中水平居中 根据目标元素的高度调整line-height的值使得目标元素在容器中垂直居中 !DOCTYPE html html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title垂直居中/titlestyle.container {height: 200px;line-height: 200px;text-align: center;border: 1px solid black;}.target {border: 1px solid red;display: inline-block;line-height: normal;vertical-align: middle;}/style/headbodydiv classcontainerdiv classtarget居中文本/div/div/body /html 绝对定位加margin:auto实现 可以使用绝对定位和margin:auto来实现水平垂直居中可以按照以下步骤进行操作 父元素需要设置position: relative用于作为相对定位的基准。子元素需要设置position: absolute以便于进行绝对定位。子元素设置top: 0left: 0bottom: 0right: 0这样可以将子元素拉伸至父元素的边界。子元素设置margin: auto让子元素在父元素中居中。 效果如下: 示例代码如下 !DOCTYPE html html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlemargin:auto居中/titlestyle.parent {position: relative;width: 600px;height: 500px;background-color: lightgray;}.child {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 200px;height: 100px;background-color: white;}/style/headbodydiv classparentdiv classchild垂直水平居中/div/div/body /html
9. line-height继承问题 1.当父元素的line-height属性设置为具体像素值50px时子元素会继承父元素的line-height属性值。无论子元素的font-size属性值是多少它的行高将始终是50px。 例如假设父元素的line-height设置为50px子元素的font-size设置为20px那么子元素的行高也将是50px。 div classparentp classchildLorem ipsum dolor sit amet, consectetur adipiscing elit./p /divCSS样式如下 .parent {line-height: 50px; }.child {font-size: 20px; }2.当父元素的line-height属性设置为数值3时子元素会继承该比例。具体取决于子元素的font-size属性值。 假设父元素的line-height属性值为3子元素的font-size属性值为16px。那么子元素的行高计算如下 子元素的行高计算公式是line-height 父元素的line-height * 子元素的font-size。父元素的line-height属性值是3子元素的font-size属性值是16px所以子元素的行高计算公式是line-height 3 * 16px。子元素的行高计算结果是48px。 因此子元素的行高为48px。这意味着子元素的文本内容将在每行之间保留48px的空白区域。 如下 div classparentp classchild这是子元素/p /divCSS代码 .parent {font-size: 20px;line-height: 3; }.child {font-size: 16px; }3.当父元素的line-height属性设置为百分比200%时子元素会继承父元素的line-height属性计算后的结果。具体取决于父元素的font-size属性值。 style.parent {font-size: 20px;line-height: 200%;}.child {font-size: 16px;} /stylediv classparentdiv classchild子元素的文本内容。/div /div在上述代码中父元素的line-height属性值设置为200%即2倍的字体大小父元素的font-size属性值为20px。子元素的font-size属性值为16px。 根据继承机制和计算规则 父元素的line-height属性值会以父元素的font-size属性值为基准进行计算。即父元素的line-height计算结果为20px * 200% 40px。子元素会继承父元素的计算后的line-height属性值。因此子元素的line-height属性值也为40px。
10. remempx 在CSS中rem、em和px都是用于指定元素大小的单位。 rem根元素相对单位rem单位是相对于根元素即元素的字体大小的单位。如果根元素的字体大小为16px则1rem等于16px。rem单位的主要优势是能够根据根元素的字体大小进行自适应调整适用于响应式设计。 em相对父元素单位em单位是相对于最近的父元素的字体大小的单位。如果父元素的字体大小为16px则1em等于16px。em单位与rem单位不同之处在于它是根据父元素的字体大小而不是根元素的字体大小进行计算的。因此em单位也可以用于实现相对父元素的布局。 px像素单位px单位是像素单位1px表示屏幕上的一个物理像素不受其他因素影响。px单位是固定大小的单位无法根据用户设置进行调整。由于设备显示的物理像素不同使用px单位可能导致在不同设备上显示不一致的问题。
    总结 rem单位根据根元素的字体大小进行调整适用于响应式设计。em单位根据父元素的字体大小进行调整适用于相对布局。px单位是固定的像素单位不受其他因素影响适用于精确布局。
11. vw和vh 在CSS中vwViewport Width和vhViewport Height是相对于视口大小的单位。 vw1vw等于视口宽度的1%。例如如果视口的宽度是1000px那么1vw就等于10px。vh1vh等于视口高度的1%。例如如果视口的高度是800px那么1vh就等于8px。 vw 和 vh 单位的用途是根据设备的视口大小即浏览器窗口大小来调整元素的尺寸。这对于创建响应式布局非常有用可以使元素在不同设备和窗口尺寸下保持一致的比例。 例如如果你希望一个元素的宽度占据视口宽度的 50%你可以使用以下代码 .element {width: 50vw; }同样地如果你希望一个元素的高度占据视口高度的 30%你可以使用以下代码 .element {height: 30vh; }通过使用 vw 和 vh 单位你可以创建具有自适应性质的布局使得网页在不同大小的屏幕上都能良好地展示。