CSS盒模型

最新推荐文章于 2023-03-20 11:24:56 发布

司_尘

最新推荐文章于 2023-03-20 11:24:56 发布

阅读量127

点赞数

分类专栏：前端文章标签： CSS

本文链接：https://blog.csdn.net/qq_40833779/article/details/81183806

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

盒模型拓展到了一些概念，该篇不只是单纯的对怎样产生一个盒模型来介绍的。

首先CSS中元素分为块级元素和行内元素从语义上理解块级元素在网页中霸占一行不与其他元素并列。

这是CSS中块级元素与行内元素的分类，那么盒子在CSS中用处很多，我们在未转换的情况下只能对块级元素添加盒子，

盒子属性：width（宽）、height（高）、padding（填充）、border（边框）、margin（盒子间距）

那么我们在对标签进行附带盒子时只能对块级元素进行操作。

这里对padding、border单独介绍一下他们都是有方向的可以分开在不同方向上设定不同的样式。用空格隔开描述的话就是以上右下左的顺序附上属性。

border-width，border-style，border-color，以及上下左右，这是border的基本属性，如果单纯一个一个描述应该有12条，实战上这些操作懂概念基本就会的，不好做讲解，只要知道一些基本属性拿到框架时自然就懂。

在上面说到了行内元素，块级元素。他们之间是可以相互转换的在CSS描述标签开头时：display:inline;(块级转换为行内)、display:block;(行内转化为块级)。

浮动：

这个概念在布局上用的很多做个很简单的比喻我们在页面上很多时候都需要将盒子拼接组成一个页面的各个部分，但按描述来说的话又只能跟块级元素添加盒子属性，而块级元素又独占一行，这时候就要用到浮动，浮动了的元素会脱离标准文档流就可以实现盒子之间的拼接。以float关键字描述：float:left;(向左浮动反之向右)。这样讲解可能不是那么好理解，我们直接上题

在一个页面中我们要用盒子做出这样的一个分块页面。在对这些进行设计时我们要学会对他们进行合适的分块。

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>页面布局</title>
	<style type="text/css">
      *{
      	margin:0;
      	padding:0;
      }
      .head{
      	width:970px;
      	height:103px;
        margin: 0 auto;

      }  相当于给上面部分先做一个盒子然后小盒子在上面浮动，后面也是这样实现所以说学会划分非常重要
      .header{
      	float:left;
      	width:277px;
      	height:103px;
      	background-color:red;
      	margin-bottom:10px;
      }  
      .right{
      	float:right;
      	width:137px;
      	height:49px;
      	margin-bottom:8px;
      	background-color:greenyellow;
      }
      .next{
      	float:right;
      	width:679px;
      	height:46px;
      	margin-bottom:10px;
      	background-color:greenyellow;
      }
      .main{
      	height:435px;
      	width:970px;
      	margin: 0 auto;
      }
      .div1{
      	float:left;
      	width:310px;
      	height:435px;
      	margin-right:10px;
      	background-color: orange;
      }
      .zhuyao{
      	float:right;
      	width:650px;
      	height:400px;
        margin-bottom:10px;
      }
      .div6{
      	float:right;
         width:650px;
         height:25px;
         background-color:green;
      }
      .div2{
      	float:right;
      	width:190px;
      	height:400px;
      	margin-left:10px;
        background-color:purple;
      }
      .div3{
      	float:right;
      	width:450px;
      	height:240px;
      	background-color: skyblue;
      	margin-bottom:10px;
      }
      .div4{
      	float:right;
      	width:450px;
      	height:110px;
      	background-color: skyblue;
      	margin-bottom:10px;

      }
      .div5{
      	float:right;
      	width:450px;
      	height:30px;
      	background-color: skyblue;
      	margin-bottom:10px;

      }
      .mowei{
      	width:970px;
      	height:35px;
      	margin: 0 auto;
      }
      .jieshu{
      	float:left;
      	width:970px;
      	height:35px;
      	margin-top:10px;
      	background-color: blue;

      }
      
	</style>
</head>
<body>
  <div class="head">
  	    <div class="header"></div>
  	  	<div class="right"></div>
  	  	<div class="next"></div>
  </div>
  <div class="main">
  	<div class="div1"></div>
  	<div class="zhuyao">
  	<div class="div2"></div>
  	<div class="div3"></div>
  	<div class="div4"></div>
  	<div class="div5"></div>
    </div>
  	<div class="div6"></div>
  </div>
  <div class="mowei">
  	<div class="jieshu"></div>
  </div>
	
</body>

这是小编自己按照这个做的一个页面。对于浮动的操作已经在其中了，这样看起来也许只是一个很简单的页面，但是这个布局就是某个网站的布局。希望能帮助大家理解，更多的web学习小编之后会持续更新。

司_尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型

盒模型拓展到了一些概念，该篇不只是单纯的对怎样产生一个盒模型来介绍的。首先CSS中元素分为块级元素和行内元素从语义上理解块级元素在网页中霸占一行不与其他元素并列。这是CSS中块级元素与行内元素的分类，那么盒子在CSS中用处很多，我们在未转换的情况下只能对块级元素添加盒子，盒子属性：width（宽）、height（高）、padding（填充）、border（边框）、margin（盒子...
复制链接

扫一扫

专栏目录