Div元素 html

于 2021-12-30 16:40:55 发布
阅读量296 收藏
点赞数 1
分类专栏： HTML 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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>

                相对定位

                 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值