关于html元素Css样式设置的一点心得(特别是与位置有关的,还有外边距、内边距有关的那些)

简介: 关于html元素Css样式设置的一点心得(特别是与位置有关的,还有外边距、内边距有关的那些)

关于html元素Css样式设置的一点心得(特别是与位置有关的,还有外边距、内边距有关的那些)


 

外边距、内边距(设置站在的角度看问题!)正如一个标签:text-align:文本内容(元素内部内容)居中,它设置的起作用是对内部的内容起作用!!!

57.png


同样,当对于一个标签选择器或者一个类选择器设置,例如对齐,居中,颜色。。。。都是对其内部的内容进行设置,而不是对当前自身起到设置作用,特别是位置(居中、左对齐等、内边距、外边距)!!!


58.png


代码示例:

一开始没加css的效果


59.png


这个时候内边距该设置在哪里呢?

想看一下我的html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易游戏</title>
    <link rel="stylesheet" type="text/css" href="../Sytle/网易游戏.css">
</head>
<body>
<div class="left">
    <h1>
        家国天下,萃聚群英,《率土之滨》周年庆典玩家活动重磅来袭!
    </h1>
    <hr/>
    <img class="clockImage" src="../images//clock.png" />
    <span class="date">2019-10-22</span>
    <hr/>
    <div class="container">
        <p class="content">百战沙场碎铁衣,常胜将军踏英豪,这正是全自由沙盘战略手游《率土之滨》的魅力所在,一路走来,率土十三州已历四年,各方豪强逐鹿中原,无数同盟鼎足而立,如今,逾千个服务器上演同台竞技,上千万主公加入其中,他们内修盟政,外治山河,谋兵法将略,督百万雄兵,在一次次智慧博弈中体验实时策略的快感。</p>
        <img src="../images//home.png" />
    </div>
</div>
</body>
</html>


first:一开始我用div (class=”left“)把内部的标题、图片、段落呀等等内容都装起来后,设置left的内边距、外边距为0,


60.png


结果是没有改变没设置css之前的1 和 2 的位置,还是离左边和上边有一点距离,是因为我对div(class="left")设置内外边距为0,起作用的是内部的那些标题、图片、段落,离这个容器(div(class="left")的内外边距为0),就是样式设定起作用的是对其内部内容,所以,我们需要找到,把div(class="left")当内部内容的body,来设置内外边距为0。

 

second:body,来设置内外边距为0。


61.png


运行结果:(完美解决!)


62.png



目录
相关文章
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
1168 2
|
9月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
284 1
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
549 0
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
1414 1
|
移动开发 前端开发 JavaScript
HTML表单验证:确认input元素输入为具有特定整数和小数位数的数值。
将上述JavaScript代码与HTML一同使用,便可以确保用户输入的数值符合特定的格式要求。特别要注意,在实际的生产环境中,仅仅依靠前端验证是不够的。为了安全起见,后端也应该实施相应的验证措施,以防止不匹配格式的数据通过其他手段提交到服务器。
663 74
|
10月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
423 19
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
315 1
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的多种方法与组件封装技巧,涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动DOM操作及动态创建组件实例等内容。同时提供了性能优化建议,如批量更新DOM、使用v-show代替v-if以及懒加载大型组件等。通过合理封装组件,可提高代码复用性和维护性。文中还附有具体示例代码,帮助开发者更好地理解和应用相关技术。适用于前端开发人员学习和实践Vue动态元素处理与组件设计。
343 19
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
609 2