Div元素 html

最新推荐文章于 2024-05-31 14:44:29 发布
最新推荐文章于 2024-05-31 14:44:29 发布
阅读量226 收藏
点赞数 1
分类专栏： HTML 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45935397/article/details/122233754
版权

内边距

一个盒子的组成部分：

盒子内容：内容有自己的宽高
内边距：盒子的内容和盒子四个边框之间的距离
边框 : 分四个方向
内边距的设置： padding- 方向： left right top bottom
注意：当盒子设置了内边距，整个盒子所占的页面大小会增大

外边距 :盒子和周边盒子之间的距离

边框 外边框

外边距设置： margin- 方向
margin 不一定针对同级元素，也可能是父子关系
很多元素默认自带内外边距，而且在不同的浏览器中默认的距离大小是不一样的，在
实际的开发中我们不允许这个默认的距离存在
margin 的简写和 padding 一样的
line-height=height: 表示内容在垂直方向居中显示
外边距的一个典型应用： margin:0 auto; 设置整个盒子在父元素中水平居中显示
  1. padding-left 30px 与左边框相距30px整体增加30px;同理 right bottom top

    1. 当盒子设置了内边距 整个盒子会发生变化.

    2. padding 30px 四个方向都是30px

    3. padding 20px 30px 上下20px 左右30px

    4. padding:10px 20px 30px 40px; 上右下左

  4. css的三大特征

    1. 继承性;子元素可以继承父元素的特性
    2. 文本相关的都能继承
    3. 层叠性
      1. 同一优先级相关才能叠加;同一个元素不同的div属性应用时叠加,相同的属性会覆盖.

        1. 不同优先级和写的顺序无关

      2. 优先级

        1. 继承的优先级最低,2.标签选择器 p{ };3. .class{类选择器} 4.#Id{id选择器} 5.行列内样式优先级高 6.!important最高优先级

    4. 网页布局

      1. 默认的文档流        

        1. 浮动属性 

          1. floate 默认为none 不服 ;left 和right 浮动 从文档流脱离出去;只能在父元素内容内进行浮动

          3. 实际上是红盒子覆盖了绿盒子

          5. 浮动的意义;让块能同行显示

          7. 浮动只能往左右浮动 不能影响前面的元素

          8. 浮动元素对父元素也有影响:多个子元素在同一行漂浮有条件;

            1.  解决父级元素由于子元素全部浮动导致的塌陷      

            2. overflow:hidden 

              清除浮动:清除浮动我对使用的元素的影响  : both

              1. 浮动存在的问题:只能左右浮动

                解决方法:定位布局:可以将子元素定在父元素中任何位置

                position定位布局

                        所有的position默认为static 静态的

                        absolute绝对定位 

                 改为absolute才能浮动 之后再通过属性top   left  right bottom

                position另一个属性: relative :相对定位 ;

                        没有从文档流中脱离;参考元素之前的位置移动;

                        原位置没有释放

                总结:子元素做绝对定位;父元素做相对定位 

                将元素固定在当前浏览的页面

                        

              3. <style>
			
			.slider{background: url(ad-02.jpg) no-repeat;
			border: 1px solid red;
			width: 524px;height: 190px;
			margin: 50px;position: relative;}
			.slider li{list-style: none;float: left;
			width: 30px;height: 30px;background: gray;margin-right: 4px;
			text-align: center;line-height: 30px;cursor: pointer;
			}
			.slider li:hover{color: orange;}
			.slider ol{position: absolute;bottom: 20px;}
			*{margin: 0;padding: 0;}
		</style>

<body>
		<div class="slider">
			<ol>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ol>
		</div>
	</body>

                相对定位

                 

DaiQuan2206
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div元素
weixin_34006468的博客
04-15 185
什么是div元素？ 是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。它是一个非常常见的元素；他没有任何语义；他仅仅表示一个容器，用于包含其他元素；在网站布局时它通常是用于表示页面的区域。 页面常见的一些DIV元素...
HTML div元素
歪脖先生的博客
04-01 687
div元素div元素可以把文档分割为独立的、不同的区域，每个区域就相当于一个块级容器，其中可以放置段落、标题、表格、图片、乃至任何HTML元素。事实上，div元素本身并没有任何特定的语义，它的真正目的是把页面进行分块，然后通过CSS对它们进行格式化，来实现页面布局，也就是传说中的 DIV + CSS 布局。因此，可以说 div元素是一个通用容器，一个没有任何语义的容器。如，使用 div元素把页面划...
HTML中的div元素
idsina的博客
05-05 379
html中的块元素 1,html中的块元素是什么？ 它可以用于在网页中的定位;它的元素是div,比如在浏览器中你会看到几块区域它们就是利用div元素实现的; 它的语法是:<div></div>; 2,什么是定位？ 定位就是将我们要显示在网页上的某个元素按我们指定的位置显示在网页上的某的位置; 目前我们现在可以用两种方法进行定位: 相对定位:position:relative...
html之div元素
weixin_44992737的博客
06-08 2180
html容器，div元素，容器元素
常见元素 – div元素、span元素
coolchaobing的博客
07-25 530
认识div、span元素
23.（leaflet篇）leaflet叠加html（leaflet叠加div元素）.zip
07-16
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/118784518
Html5实现如何在两个div元素之间拖放图像
12-14
#div1, #div2{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}</style>[removed]function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransf
如何让Flash不遮挡HTML div元素的技巧
12-30
今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。...
javascript 控制 html元素 显示/隐藏实现代码
10-29
javascript 控制 html元素 显示/隐藏，下面是一些逐步的实现原理。
全面掌握div元素：HTML属性、CSS样式及其它特性
俎树振的博客
08-31 1259
文章详细介绍了 div 元素的 HTML 属性（class、title、style）和 CSS 样式，包括布局（display、position）、边距（margin、padding）、背景（background-color、image）、文本样式（font、text-align）、盒子模型（box-sizing）、动画（transition、animation）等。还涉及了层叠上下文（z-index）、伪类（:hover、:active）等掌握这些特性，开发者能创建出适应性强、交互性好的网页布局。
div的布局以及一些元素的使用
qq_44647179的博客
10-25 467
div布局 1.css将页面中的所有元素设置成了一个盒子 2.将指定的盒子摆放到指定的位置 3.盒子的组成：内容区（content）：由width， height决定 边框（border） ：盒子的边缘，为了命名规范，至少设置边框的宽度（border-width），颜色（border-color），边框的样式（border-style） 边框的大小还影响盒子的大小，不信你可以修改border-width的值。 值的设定： 四个值：上 右 下 左 三个值：上 左右 下 两个值：上下 左
HTML基础教程（8）-div和span元素
pynickle的博客
04-22 306
欢迎来到HTML的世界，现在开始HTML之旅吧！ div和span元素 我们可以通过div和span元素组合起来，div可以组合一些HTML元素，而span元素可以组合文字，其中div元素较为常用，接下来看一下如下代码： <div style="color:red"> <h1>title</h1> <p>contents</p> <...
八、DIV+CSS
qq_52916408的博客
04-11 2839
文章目录八、DIV+CSS8.1 DIV与CSS的关系8.2 常用的样式8.3 使用 DIV 对页面进行布局8.4 HTML 中定位方式及浮动8.4.1 普通流方式8.4.2 position 定位方式8.4.3 浮动 八、DIV+CSS 8.1 DIV与CSS的关系 DIV 是一个层，DIV 是在网页悬浮的一个平面,网页中的容器，该容器中可以摆放任何 HTML 元素； DIV 默认情况在页面中什么都不显示，DIV 搭配 CSS 一起使用,通过 CSS 可以对DIV 进行内容、样式的调整； 现在 we
CSS实现一个雨滴滑落效果
云加速
05-28 1264
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css-垂直居中的几种写法
xxuxioxx的博客
05-27 351
垂直居中的几种写法
CSS 空间转换 动画
最新发布
qq_67140973的博客
05-31 286
空间转换、视距 - perspective、空间转换 - 旋转、立体呈现 - transform-style、空间转换 - 缩放、动画 - animation、动画的基本使用、animation 复合属性、animation 拆分属性、多组动画
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
lbcbjtlhmjq的博客
05-30 724
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
【html知识】html中常用的表单元素+css格式美化
weixin_56334307的博客
05-30 301
本作品是一个简洁明了的HTML文档，包含了多种常用的表单元素，如输入框、密码框、单选按钮、多选按钮、下拉列表、文本域、按钮、隐藏文字以及文件上传等。每个元素都配备了相应的说明和示例，方便用户快速理解和使用。
第二十四章多栏布局解决方案（什么是自适应?/）
J3259392566的博客
05-29 564
5.middle 内容拉回来了，但 left 也跟着过来了，所以要还原，就对 left 使用相对定位 left:-200px 同理，right 也要相对定位还原right:-220px;4、这时left 拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上padding:0 220px 0 200px;4、此时main占满了，所以要把left拉到最左边，使用margin-left:-100%，同理right使用margin- left:-220px;
htmldiv元素怎么相对固定
06-08
要实现一个相对固定的HTML元素，可以使用CSS中的position属性。position属性有四个值：static, relative, ...这样，这个div元素就会相对于其正常位置向右下方偏移50个像素，并且在页面滚动时会保持相对位置不变。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值