CSS基础 盒子模型与案例

最新推荐文章于 2022-12-01 12:51:07 发布
最新推荐文章于 2022-12-01 12:51:07 发布
阅读量675 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44717746/article/details/107396597
版权

目录

一.块级标签：

  • 如果该标签需要独占一行，则称其为块级标签
  • h1 p ul li ol dl

二.内联标签：

  • 如果该标签不会独占一行，则称其为内联标签
  • img a span

块极标签中可以放入内联标签，反之不成立

我们可以通过css样式进行调整，使得内联标签具有块级标签的效果，也可以使得块级标签具有内联标签的效果。

		   h1{
				/**
				 * 设置将其转化为内联标签
				 */
				display: inline;
			}
			span{
				/**
				 * 将内联转为块级
				 */
				display: block;
			}

三.盒子模型：

  • 针对的是块级元素。所有的块级元素都具备盒子模型的特点。
  • div标签 常用的布局标签，用来存放别的标签或者数据
1.边框：
			div{
				/**
				 * 方式一
				 */
				border:1px solid red;
				
				
				/**
				 * 方式二
				 */
				/**
				 * 边框的颜色
				 */
				border-color: #FF0000;
				/**
				 * 边框的风格
				 solid  实线
				 dotted 点线
				 dashed 虚线
				 */
				border-style:dashed;
				
				/**
				 * 边框的粗细
				 */
				border-width: 5px;
			}
2.边距：
内边距  padding  上下 左右
外边距  margin   上下 左右
3.margin妙用：
当盒子模型设置了宽度之后，可以使用
margin: 0px auto;来将其居中。
4.背景颜色和图片：
				/**
				 * 背景图片
				 */
				background-image: url(img/搜狗截图20200715143753.png);
				/**
				 * repeat-x 水平方向上重复
				 repeat-y  垂直方向上重复
				 no-repeat 不重复
				 */
				background-repeat: no-repeat;
				/**
				 * 100px  代表离最左边的距离
				 20px 代表离最上边的距离
				 */
				background-position: 100px 20px;
5.无序列表去掉前标识：
			ul{
				/**
				 * 去掉无序列表前面的黑色圆圈
				 */
				list-style-type: none;
				
			}
6.超链接样式:
			/**
			 * 超链接被访问过之后的样式
			 */
			a:visited{
				color:yellow;
			}
			
			a{
				/**
				 * 去掉下划线
				 */
				text-decoration: none;
				color: #A9A9A9;
				font-size: 12px;
			}
			
			/**
			 * 鼠标悬停在超链接上出现的样式
			 */
			a:hover{
				color:red;
				text-decoration: underline;
				
			}

四.案例：

在这里插入图片描述

<style type="text/css">
			#demo{
				/**
				 * 设置宽度和高度
				 */
				width: 300px;
				height: 400px;
			}
			#demo1{
				/**
				 * 设置背景颜色
				 */
				background-color: darkgreen;
				height: 40px;
				/**
				 * 设置字体颜色
				 */
				color:white;
				/**
				 * 首行缩进
				 */
				text-indent: 2em;
				padding-top: 8px;
				/**
				 * 给盒子模型加背景图片
				 */
				background-image: url(img/bang.gif);
				/**
				 *  设置背景图片不重复
				 */
				background-repeat: no-repeat;
				/**
				 * 设置背景图片的位置
				 */
				background-position: 120px 8px;
				
			}
			
			/**
			 * 后代选择器
			 */
			#demo  ul{
				/**
				 * 添加背景颜色
				 */
				background-color: lightgray;
				/**
				 * 去掉无序列表前面的黑圈圈
				 */
				list-style-type: none;
				border: 1px solid #006400;
				/**
				 * 去掉上外边距
				 */
				margin-top:0px;
				
			}
			
			a{
				/**
				 * 去掉下划线
				 */
				text-decoration: none;
				font-size: 14px;
				color: blue;
			}
			
			/**
			 * 设置li的行高
			 */
			li{
				line-height: 30px;
				border: 1px solid red;
				text-indent: 1.5em;
			
			}
			
			#li1{
				background-image: url(img/book_no01.gif);
				background-repeat: no-repeat;
				background-position: 2px 5px;
			}
			#li2{
				background-image: url(img/book_no02.gif);
				background-repeat: no-repeat;
				background-position: 2px 5px;
			}
			#li3{
				background-image: url(img/book_no03.gif);
				background-repeat: no-repeat;
				background-position: 2px 5px;
			}
			#li4{
				background-image: url(img/book_no04.gif);
				background-repeat: no-repeat;
				background-position: 2px 9px;
			}
			#li5{
				background-image: url(img/book_no05.gif);
				background-repeat: no-repeat;
				background-position: 2px 9px;
			}
			
			
			#li6{
				background-image: url(img/book_no06.gif);
				background-repeat: no-repeat;
				background-position: 2px 9px;
			}
			#li7{
				background-image: url(img/book_no07.gif);
				background-repeat: no-repeat;
				background-position: 2px 9px;
			}
			#li8{
				background-image: url(img/book_no08.gif);
				background-repeat: no-repeat;
				background-position: 2px 9px;
			}
			#li9{
				background-image: url(img/book_no09.gif);
				background-repeat: no-repeat;
				background-position: 2px 9px;
			}
			#li10{
				background-image: url(img/book_no10.gif);
				background-repeat: no-repeat;
				background-position: 2px 9px;
			}
			
		</style>
	</head>
	<body>
		<div id="demo">
			<div id="demo1">
				畅销书排行
			</div>
			<ul>
				<li id="li1"><a href="#">不抱怨的世界(畅...</a></li>
				<li id="li2"><a href="#">遇见未知的自己...</a></li>
				<li id="li3"><a href="#">不抱怨的世界(畅...</a></li>
				<li id="li4"><a href="#">遇见未知的自己...</a></li>
				<li id="li5"><a href="#">不抱怨的世界(畅...</a></li>
				<li id="li6"><a href="#">遇见未知的自己...</a></li>
				<li id="li7"><a href="#">不抱怨的世界(畅...</a></li>
				<li id="li8"><a href="#">遇见未知的自己...</a></li>
				<li id="li9"><a href="#">不抱怨的世界(畅...</a></li>
				<li id="li10"><a href="#">遇见未知的自己...</a></li>
			</ul>
			
		</div>
</body>
寒青~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS盒子模型之产品模块案例
weixin_48879289的博客
09-13 698
代码最终运行效果图如下： 代码开始编写前，我们需要编写一行清除样式本身带有的内外边距的代码，该代码用通配符标识了这篇代码的通用，如下：其中padding为内边距样式；margin为外边距。 接着，我们需要构造大致模型——“大的盒子”装上“图片模块”、段落标签、两个“小盒子”（分占一行）。整体布局思路是这样，接着先写出部分代码如下： 那么，“大盒子”起先没有任何修饰，这时，我定义了一个类选择器，先整体body给它个颜色，然后给“大盒子”设置行高，列宽，底色还有在整体页面的边距。部分代码...
Css基础：盒子模型+浮动+定位简要介绍
qq_52264068的博客
10-30 187
Css基础：盒子模型+浮动+定位简要介绍
CSS+DIV-盒子模型示例.zip
11-03
CSS+DIV-盒子模型示例.zip
CSS的盒子模型案例
web开发
03-23 528
CSS的功能可谓强大，作为程序员，不能只在后台默默无闻，也要到前台爽一把，意思意思，这样自己干活从前台 界面到后台数据库就算是全能了。能给自己省了不少力气，艺多不压身嘛，下面来介绍一下CSS里面的盒子模型。 所谓的盒子模型就是指比如Div嵌套Div这里的Div可以理解成为一个盒子，当然了，不一定是Div嵌套Div，还可能 是Div里面嵌套了别的东西，不管嵌套了什么，都可以把他们叫做盒子模型。...
CSS笔记4-盒子模型案例
PIUYIXIU的博客
10-27 481
案例一： 鼠标事件+背景图片+边框格式设置 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> li{ list-style-type:none; } body,ul,li,h1{ margin:0; padding:0; } div ul li a{ text-decorat
css盒子模型及实例
龙行天下 欢迎来我的地盘
10-24 825
1.概述css盒子模型 1>先看看w3c的概述 2>其实css每个元素都是一个盒子（盒模型） 2.css盒子模型种类 1>w3c标准模型—————————>element空间宽度 = content内容 + border + padding + margin 2>IE传统模型（IE6-）—————>element = content = content(border + paddin
css之盒子模型案例
态度决定高度A=X+Y+Z
05-22 1176
/* 盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离。 盒子模型主要是用于操作内边距(padding)与外边距（margin） */ div{ border-style:solid; width:100px; height:100px; /* 内边距 */ padding
CSS盒子模型教程PPT课件.pptx
10-10
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素...盒子模型的案例包括调整网页中的对齐方式、理解盒子的各个属性、理解空格的影响、理解 body 标记的 margin 属性、如何利用 CSS 控制页面特定的元素等。
css盒子模型案例
weixin_49474155的博客
07-31 798
1.课程导航 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #a{ width: 200px; height: 300px; border: 1px solid #7FFFD4; } img{ vertical-align: middle;
CSS 盒子模型
酷爱前端的小陈博客
05-07 366
页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面. 1.1 看透网页布局的本质 网页布局其实就是每一个大的盒子包小的盒子，然后一点点堆积起来，最后得以将网页搭建起来。 网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容. 网页布局的核心本质： 就是利用 CSS 摆盒子。 1.2 盒子模型（Box Model）组成 .
css3-盒模型实例.html
08-27
同上
H5div盒子模型例子
04-27
H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子
css案例学习之盒子模型
weixin_33778778的博客
11-23 109
定义：每个盒子都有：边界、边框、填充、内容四个属性； 每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。 案例代码： &lt;!DOCTYPE html PUBliC "-//W3C//DTD XHTML...
css盒子模型及其实战案例（下）
阿牛的博客
02-04 1682
今天总结盒子模型剩下的一点内容，包括圆角边框，盒子阴影，文字阴影
实例-CSS盒子模型演示
最新发布
qq_45348373的博客
12-01 378
最近呢就是有朋友问我css盒子模型的演示，所以今天我将给大家讲一讲盒子模型。然后呢，我会很系统的将这一课讲完，内容比较多也希望各位能够仔细观看，看懂了，实操一下也就会了。
css盒子模型例子--小列表
qq_40687516的博客
11-18 901
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新闻列表</title> <style type="text/css"> /*祖传开头*/ *{ margin: 0;padding: 0; } l...
一个实例带你透析CSS盒子模型
Rookie
08-29 900
文章目录CSS盒子模型简介盒子模型与width/height之间的关系一个玩转margin的实例结语 CSS盒子模型简介 当对一个文档进行布局（lay out）的时候，将所有元素表示为一个个矩形的盒子（box）。每个盒子由四个部分（或称区域）组成。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 content、内边距边界 padding、边框边界 border、外边框边界 margin。 这是chrome开发者工具element面板中style部分的一个盒子模型图，如果有对chrome开发
新浪导航案例
绿色水杯
08-22 535
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ma
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值