0723 HTML background/float/margin/position || position(absolute,relative) / 小广告

最新推荐文章于 2020-12-05 03:52:51 发布
最新推荐文章于 2020-12-05 03:52:51 发布
阅读量175 收藏
点赞数
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fern2018/article/details/81176493
版权

 盒子模型 
      div(内-->外)
          内容(content)  内边距（填充,padding）边框(border),外边距(margin)
     两种盒子
         a.块级元素
              div  p  h1 table form -->前后会自动换行
              一行只能容纳一个盒子
              可以设置内容的宽和高

         b.内联元素
                img   span  input...
                前后不会自动换行，必须通过<br/> 才能换行
                一行可以容纳多个内联元素
               不能设置宽和高

          网页布局主要使用块级元素
          网页布局(css+div)
              a.浮动
              b.定位     


 
  浮动
     文档流的概念
        浏览器对网页元素自然的布局(文档流，标准流)
        块级元素 从上往下布局
        内联元素从左往右布局

     浮动即脱标
       盒子一旦浮动就会脱离原来的文档流
     左浮与右浮
     清除浮动 
     浮动布局(重点)
        块级元素在父元素中居中，设置 margin: 0 auto;

   定位
      静态定位(默认值)
      绝对定位 (脱标)
             position:absolute
             相对body
                left，right, top，bottom 相对于body的边缘距离
            相对父元素
                将父元素和子元素都设置为绝对定位
                那么left,right,top,bottom都是相对于父元素移动
            使用z-index确定盒子层叠顺序
      相对定位(不脱标)
           position:relative;
           不脱离文档流
           left ,top,right,bottom是相对于自身原来的位置移动

           最常用的布局模式:子绝父相  
           将父元素设置为相对定位
           将子元素设置为绝对定位
           left right top bottom 子元素相对于父元素的边缘移动
           小米定位案例
      固定定位(脱标)
          小广告，不随也页面滚动

作业:
   以组为单位下载电商网站的静态页面
   至少包含：登陆 注册 主页 购物车 商品详情  生成订单


 

background  / float  / margin  / position  


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
  <style type="text/css">
  	  .one{
  	  	width: 100px;
  	  	height: 100px;
  	  	background: red;
  	  }

  	  .two{
  	  	 width: 200px;
  	  	 height: 160px;
  	  	 background: blue;
  	  }

  	  p{
  	  	 width: 120px;
  	  	 height: 200px;
  	  	 background: pink;
  	  }

      span{
      	 width: 200px;
      	 height: 200px;
      	 background: yellow;
      }
  </style>
</head>
<body>
	<!-- 块级元素 -->
	<div class="one"></div>
	<div class="two"></div>
	 <p></p>
	<!--  内联元素 -->
	<span>hello</span>
	<input type="" name="" value="world">
</body>
</html>


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
      <style type="text/css">
      	 .one{
      	 	width: 100px;
      	 	height: 100px;
      	 	background: red;
      	 	float:left;
      	 }
         .two{
         	width: 100px;
         	height: 100px;
         	background:green;
         	float:left;
         }


      </style>
    </head>
    <body>
    	<div class="one"></div>
    	<div class="two"></div>

    </body>
</html>


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    <style type="text/css">
        .main{
       	  width: 600px;
       	  border:3px solid #999;
       	  margin:auto;
       }
    	.top{
    		width: 600px;
    		height: 160px;
    		background: pink;
    	}
    	.center{
            width: 600px;
            height: 350px;
            background: #eee;
            /* margin-top:10px;
            margin-bottom:10px; */
            margin:10px 0px;
    	}

    	.footer{
    		width: 600px;
    		height: 100px;
    		background: green;
    	}

    	.left,.right{
    	    width: 285px;
    	    height: 350px;
    	    float:left;  
    	    margin-left: 10px; 	    
    	}
        .left{
        	background: blue;
        }
        .right{
        	background: yellow;
        }


    </style>
    </head>
    <body>
       <div class="main">
        <div class="top"></div>
        <div class="center">
          <div class="left"></div>
          <div class="right"></div>   
        </div>
        <div class="footer"></div>
      </div>
    </body>
</html>

 


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        	.one{
        		width: 100px;
        		height: 100px;
        		background: red;
        		position:absolute;
        		left:100px;
        		top:100px;
        		z-index:1;

        	}
        	.two{
        		width: 100px;
        		height: 100px;
        		background: green;
        		position:absolute;
        		left:120px;
        		top:120px;
        		z-index:2;

        	}

        	.box{
        		width: 500px;
        		height:300px;
        		border:3px solid blue;
        		position:absolute;
             }

        </style>
    </head>
    <body>
    	
    	
  <div class="one"></div>
  <div class="two"></div>

    </body>
</html>

 

 position(absolute,relative) / bottom ,right ,left ,up  / 小广告

 


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
       <style type="text/css">
       	   .one{
       	   	  width: 100px;
       	   	  height: 100px;
       	   	  background: red;
       	   	 /*  position:relative; */
       	   	  position:absolute;
       	   	  right:50px;
       	   	  bottom:10px;        //底部
       	   }

       	   .two{
       	   	  width: 100px;
       	   	  height: 100px;
       	   	  background: green;
       	   }

       	   .box{
       	   	  width: 600px;
       	   	  height: 350px;
       	   	  border:3px solid blue;
       	   	  position:relative;
       	   }

       </style>
    </head>
    <body>
       <div class="box">
    	<div class="one"></div>
       </div>
    	<!-- <div class="two"></div> -->
    </body>
</html>


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
      <style type="text/css">
      	  .main{
      	  	 position:relative;
      	  	 width: 1226px;
      	  	 margin:auto;
      	  }
      	  .left-bar{
      	  	  position:absolute;
      	  	  left:0px;
      	  	  top:0px;
      	  }
      	  .left,.right{
      	  	 position:absolute;
      	  }
      	   .left{
      	   	  left:245px;
              bottom:166px;      	   	   
      	   }
      	   .right{
      	   	   right:10px;
      	   	   bottom:166px;   
      	   }

      </style>
    </head>
    <body>
    	<div class="main">
    		<img src="images/111.jpg"/>
    	  <div class="left-bar">
    	  	  <img src="images/xiaom_left.png"/>
    	  </div>
    	  <div class="left">
    	  	 <img src="images/left.png">
    	  </div>
    	  <div class="right">
    	  	  <img src="images/right.png">
    	  </div>
    	</div>
    </body>
</html>


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
      <style type="text/css">
      	 .adv{
      	 	 width: 130px;
      	 	 height: 130px;
      	 	 background: green;
      	 	 position:fixed;
      	 	 right:0px;
      	 	 bottom:0px;
      	 }

      </style>
    </head>
    <body>
    	<div class="adv">小广告</div>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    	<p>you can you up</p>
    </body>
</html>

 

青衣-白扇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于HTML实现qq音乐项目html静态页面（完整源码）
05-19
`position`（`static`、`relative`、`absolute`、`fixed`）定义元素定位方式，`box-sizing`调整元素的盒模型等。 在QQ音乐项目的HTML静态页面中，你可能会遇到以下关键点： 1. **导航栏**：使用HTML创建导航菜单，...
HTML/CSS壁纸.zip
02-03
浮动（`float`）和定位（`position`：`static`、`relative`、`absolute`、`fixed`）也是布局中的重要概念，它们影响元素相对于其他元素的位置。 响应式设计是现代网页开发的必备技能，通常通过媒体查询（`media ...
CSS 规避脱标之两种用法
weixin_30793643的博客
08-13 434
大家好，我是小强老师，今天讲解一小点知识哈 对比了才知道什么好 看不出，很漂亮吧！ 有木有倾国倾城的美色。 呵呵，好多东西也是这样的，好的东西只有对比了才觉得好。 我们知道我们网页布局 有三模式。 普通流normal flow（标准流、常规流） 浮动（float） 和 定位 （position） 标准流 标准流实际上就是一个网...
13.相对定位(position:relative)
前端学习笔记
04-18 452
微调元素位置，相对自己原来的位置进行定位，上下移左右移。必须先声明要相对定位，position:relative不脱标，老家留坑，形影分离不脱离标准文档流，下面的盒子不会钻入其原位置下方 原始位置依然占有，不会有其他元素填充 其真实物理位置依然是原位置，用margin-bottom时其原位置的下方盒子会下移。本质说其物理位置依然位于原标准流位置，新位置为渲染出来的的一个位置，影子 用途1...
relative会脱离文档流吗_如何脱离标准文档流之浮动
weixin_32771907的博客
12-05 705
标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。使元素脱离标准文档流的方法之一就是浮动，浮动也是css布局用的最多的属性。1. 浮动的基本语法基本语法：浮动写法示例：网页效果(未加float:left前)加上float之后由上面的例子可知，两个盒子同时往左浮动，脱离了标准文档流，就可以并排布局了。2. 浮动的性质1)浮动的元素脱标一个元素一旦脱离标准文档流，它原来所在标准文档流中的位...
Css标准文档流以及脱标
qq_37009885的博客
12-12 684
标准文档流的现象     1 空白折叠现象     2 高矮不齐，底边对齐     3 一行写不满，自动换行（默认情况下，从左到右，从上到下显示） 行内元素与块元素（css的世界，对元素严格的划分）        块元素：         a  独占一行，不能与其他元素并排         b  可以设置宽高         c 假如未设置宽度，宽度默认值为父亲的10
css 层级 脱标流 可见性
08-28 1806
/* * 脱标的盒子居中显示（重点） * 1 首先走父盒子宽度一半 * 2 使用margin-left设置往回走子元素自己宽度的一半 * position: absolute; * left: 50%; * margin-left: -250px; * Z-index(层级) * 1 元素与元素之间的层级关系
基于HTML实现多图上传预览功能
12-14
自己最近写了一个网页多图上传的脚本,感觉挺实用的,细节就不要说了,直接贴代码了~ <head> <style> .pro_img{ margin-left:10px;....pro_img img{ position: absolute;left: 50%;top:50%; transfo
css/层叠样式表 中文手册
11-05
4. 定位布局（Positioning）：通过`position`属性控制元素位置，如`relative`、`absolute`、`fixed`。 5. 弹性布局（Flexbox）：适用于一维布局，通过`display: flex`实现。 6. 网格布局（Grid）：适用于二维布局，...
前端代码demo示例（全）
最新发布
04-04
4. **定位.html**：CSS定位涉及`position`属性（static, relative, absolute, fixed），理解如何使用这些属性来改变元素的位置和相对于其父元素的相对位置，以及如何与`z-index`配合实现层叠。 5. **盒子模型.html*...
【CSS3】CSS元素定位的四种模式
连通块的应用
09-09 943
定位要配合定位模式和边偏移一起使用 定位模式 是否脱标 是否可以使用边偏移 移动位置基准 静态static 不脱标正常模式 不可以 正常模式 相对定位relative 不脱标 占有位置 可以 相对自身位置移动 绝对定位 absolute 脱标 不占位置 可以 相对于定位父级移动位置 固定定位 fixed 完全脱标 不占位置 可以 相对于浏览器位置 注意事项 1.定位...
CSS学习之[定位]
ByeBye(野蛮生长)
04-22 243
定位(position) 如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。 PS: 定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。要爱上它，它可以让我们工作更加轻松。 为什么要用定位 那么定位，最常运用的场景再那里呢？ 小黄色块可以再图片上移动 元素的定位属性 元素的定位属性主要...
布局、浮动、塌陷现象
erdouzhang
03-06 865
1.关于布局 分大块区域几大块内容，一行为一大块内容。比如topbar、nav、header、slider、ad、main、footer等大块区域。 margin-bottom 大块区域的真实区域，版心部分。 width,版心宽 （可直接单独写一个类，每次用时直接引用类名） margin: 0 auto; （使用margin:0 auto;时必须有明确的宽度） overflow: hidde
浮动是半脱标，绝对定位是完全脱标
qq_37621289的博客
10-09 1830
浮动是半脱标： 1。若将子盒子设置成浮动，它是不会超出父盒子的内边距的。但是如果强制给子盒子一个负的margin-left值,它就会超出父盒子的内边距了。 给父盒子一个内边距，并将子盒子设置为浮动，编写代码如下： 显示结果如下： 可以看到浮动的盒子不会超过父亲内边距的范围。 为了进一步验证浮动的特性，强制给子盒子一个负的margin-left值，结果子盒子会往左走10像素的距离，超出了父盒子的...
关于减少脱标流使用的一个小技巧
sayawei的博客
02-22 207
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; .father{
CSS 定位知识点
Yang_Xingxing_的博客
05-20 302
1. 为什么需要定位？ 以下情况用标准流或者浮动不能实现： 某个元素可以自由的在一个盒子内移动位置，并且压住其它盒子。 当我们滚动窗口的时候，盒子是固定在屏幕的某个位置的。 所以： 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其它盒子。 2. 定位组成 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位 = 定位模式 + 边偏移。 定位模式用于指定一个元素在文档中
java语言高效实现二分法查找
a_yaodinghaha的博客
11-02 414
java实现二分法查找 二分法查找算法适用于已经排好序的数组。 二分法的基本思路和步骤是： 1.找到数组的起始坐标和末尾坐标并记录。 2.找到数组的中间元素坐标并记录。 3.将需要查找的元素跟中间元素进行比较，如果大于中间元素，则截取中间元素以后的所有元素作为新的数组，将中间元素设为新数组的起始元素，如果小于中间元素，则截取中间元素以前的所有元素作为新的数组，将中间元素作为新数组的末尾元素。 4.如果需要查找的元素正好等于中间元素，则查找结束，此时的中间元素为需要查找的元素。 5.重复步骤3，步骤4。 二分
合理使用position、float、flex和grid设计个人网站布局，具体内容包括： 页面整体grid布局或flex布局 页面顶部或侧边、底部固定导航fixed 页面中部粘性内容sticky 图文混排float 各部分应分别体现出常见经典布局，如圣杯布局、左右布局、左中右布局、九宫格布局等等 其它功能relative/absolute 用代码
06-11
position: absolute; bottom: 0; left: 0; right: 0; } ``` 这个示例中，通过使用flex布局和position属性，实现了顶部固定导航和底部固定内容的效果；通过使用grid布局，实现了页面整体的布局，并分别使用了...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值