CSS基础2

最新推荐文章于 2023-02-05 23:48:33 发布
最新推荐文章于 2023-02-05 23:48:33 发布
阅读量80 收藏
点赞数
文章标签： 定位 列表 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blake2/article/details/114447786
版权

1.CSS中常用的属性设置

     1.1关于字体的css属性设置

          color--设置字体颜色[颜色单词/颜色码【#0000ff】]

          font-family---设置字体名称[黑体.....]

          font-size --设置字体大小【数字px】

          font-style--设置字体倾斜【normal | italic | oblique 】

          font-weight--设置字体粗细【整百的数字【100~900】】

          text-decoration--设置字体的修饰线【none || underline下划线 || overline上划线 || line-through贯穿线 】

          text-shadow--文本的文字是否有阴影及模糊效果

          text-transform--文本的大小写转换【none | capitalize | uppercase | lowercase 】

          line-height--行高【数字px】

          letter-spacing--文字之间的间隔 normal | length 【数字px】

          word-spacing--单词之间插入的空隔normal | length 【数字px】

          例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于字体的css属性设置</title>
		<style>
			p{
				color:red;
				font-family:楷体;
				font-size:30px;
				font-style:italic;
				font-weight:900;
				text-decoration:underline;
				text-transform:uppercase;
				letter-spacing:10px;
				word-spacing:20px;
				text-shadow:10px 10px 20px red;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<h1>关于字体的css属性设置</h1>
		<h2 >color--设置字体颜色[颜色单词/颜色码【#0000ff】]</h2>
		<h2>font-family---设置字体名称[黑体.....]</h2>
		<h2>font-size --设置字体大小【数字px】</h2>
		<h2>font-style--设置字体倾斜【normal | italic | oblique 】</h2>
		<h2>font-weight--设置字体粗细【整百的数字【100~900】】</h2>
		<h2>text-decoration--设置字体的修饰线【none || underline下划线 
		|| overline上划线 || line-through贯穿线 】</h2>
		<h2>text-shadow--文本的文字是否有阴影及模糊效果</h2>
		<h3>text-shadow:10px 0px 0px red;</h3>
		<h3>第一个值:水平移动距离 0px 0px red;</h3>
		<h3>第二个值:前后移动距离 0px 0px red;</h3>
		<h3>第三个值:模糊效果</h3>
		<h3>第四个值:阴影颜色</h3>
		<h2>text-transform--文本的大小写转换【none | 
		capitalize | uppercase | lowercase 】</h2>
		<h2>line-height--行高【数字px】</h2>
		<h2>letter-spacing--文字之间的间隔 normal | length 【数字px】</h2>
		<h2>word-spacing--单词之间插入的空隔normal | length 【数字px】</h2>
		<p>测试关于字体的test css属性设置</p>
		<p>测试文字是否有阴影及模糊效果</p>
		<p>测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否
		有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果
		测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果
		测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果
		测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果</p>
	</body>
</html>

     1.2关于文本属性设置

          text-indent :文本的缩进 length 【数字px】

          vertical-align：垂直对齐方式top  middle bottom

          text-align :水平对齐方式left | right | center

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于文本属性设置</title>
		<style>
			#p1{
				font-size: 20px;
				text-indent:30px;
			}
			#p2{
				font-size: 20px;
				text-indent:50px;
			}
			tr{
				text-align:right;
				vertical-align:bottom;
			}
		</style>
	</head>
	<body>
		<h1>关于文本属性设置</h1>
		<h2>text-indent :文本的缩进 length 【数字px】</h2>
		<h2>vertical-align：垂直对齐方式top  middle bottom </h2>
		<h2>text-align :水平对齐方式left | right | center </h2>
		<p id="p1">关于文本属性设置关于文本属性设置关于文本属性设置</p>
		<p id="p2">关于文本属性设置关于文本属性设置关于文本属性设置</p>
		<table border="1px" width="600px" height="200px">
			<tr>
				<td>text-align</td>
				<td>水平对齐方式left | right | center</td>
			</tr>
			<tr>
				<td>vertical-align</td>
				<td>垂直对齐方式top  middle bottom</td>
			</tr>
		</table>
	</body>
</html>

     1.3关于背景的设置

        整个网页的背景设置

          1. 整个网页的背景颜色【在body元素中设置bgcolor】

          2. 整个网页的背景图片【在body元素中设置background】

        Html元素的背景设置

          1.  Html元素的背景颜色【background-color】

          2. Html元素的背景图片【background-image:url("imgs/banner1.png");】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于背景的设置</title>
		<style>
			div{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			p{
				font-size: 40px;
				color: yellow;
				background-color: blue;
				
			}
			table{
				background-image:url("imgs/banner1.png");
			}
			tr{
				font-size: 20px;
				color: #FFFF00;
			}
		</style>
	</head>
	<body background="imgs/timg.jpg">
		<h1>关于背景的设置</h1>
		<h2>1. 整个网页的背景颜色【在body元素中设置bgcolor】</h2>
		<h2>2. 整个网页的背景图片【在body元素中设置background】</h2>
		<h1>关于HTML元素背景的设置</h1>
		<div></div>
		<p>关于HTML元素背景的设置--背景颜色</p>
		<table border="1px" width="600px" height="200px">
			<tr>
				<td colspan="2">关html元素的背景设置</td>
			</tr>
			<tr>
				<td>HTML元素的背景颜色</td>
				<td>background-color:颜色单词/颜色码</td>
			</tr>
			<tr>
				<td>HTML元素的背景图片</td>
				<td>background-image:url("图片路径")</td>
			</tr>
		</table>
	</body>
</html>

     1.4关于html元素的尺寸设置

          width : 设置元素的宽度 auto | length 

          height : 设置元素的高度auto | length

     1.5关于边框设置

          border-width：边框粗细

          border-style ：边框样式

          border-color : 边框颜色

       上面这三个属性可以分为4组：

          border-top-color，border-right-color，border-bottom-color，border-left-color

          border-top-style，border-right-style，border-bottom-style，border-left-style

          border-top-width，border-right-width，border-bottom-width，border-left-width

       我们可以通过border属性设置4边的边框： border---粗细  样式  颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于边框设置</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				border: 10px solid red;
			}
			#img1{
				border-top-width:5px ;
				border-top-style: double;
				border-top-color: black;
				border-right-width:10px ;
				border-right-style: solid;
				border-right-color: blue;
				border-bottom-width:15px ;
				border-bottom-style: dashed;
				border-bottom-color: red;
				border-left-width:20px ;
				border-left-style: dotted;
				border-left-color: green;
			}
			#img2{
				border-top:5px double black;
				border-right:10px solid blue;
				border-bottom:15px dashed red;
				border-left:20px dotted green;
			}
		</style>
	</head>
	<body>
		<h1>关于边框设置</h1>
		<div></div>
		<br>
		<img id="img1"  src="imgs/avatar2.png" />
		<br>
		<img id="img2" src="imgs/avatar2.png" />
	</body>
</html>

     1.6 关于列表的设置

          列表--1.有序列表 <ol><li></li></ol>

                    2.无序列表 <ul><li></li></ul>

                    3.自定义列表<dl><dt><dd></dd></dt></dl>

          列表的设置就是改变一下列表的前面的标识。

            list-style-image : 设置标识图标none | url ( url )

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于列表的设置</title>
		<style>
			ul li a{
				font-size: 50px;
				text-decoration: none;
				color: black;
			}
			ul{
				list-style-image:url("imgs/home.PNG");
			}
		</style>
	</head>
	<body>
		<h1>关于列表的设置</h1>
		<h2>list-style-image : 设置标识图标none | url ( url ) </h2>
		<ul>
			<li><a href="#">用户信息管理</a></li>
			<li><a href="#">部门信息管理</a></li>
			<li><a href="#">职位信息管理</a></li>
		</ul>
	</body>
</html>

      1.7关于表格的设置

          border-collapse :设置表格单元格之间的边框合并[ separate | collapse相邻边被合并] 

          border-spacing :表格边框独立时，行和单元格的边在横向和纵向上的间距。 【数字px】

          empty-cells :当单元格中没有内容时,单元格的边框是否显示 show | hide

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格属性设置</title>
		<style>
			table{
				width: 800px;
				height: 400px;
				border-collapse:separate;
				border-spacing:10px;
				empty-cells:show;
			}
			table tr{
				font-size: 20px;
				text-align: right;
				vertical-align: bottom;
			}
			
		</style>
	</head>
	<body>
		<h1>表格属性设置</h1>
		<h2>border-collapse :设置表格单元格之间的边框合并[ separate | collapse相邻边被合并] </h2>
		<h2>border-spacing :表格边框独立时，行和单元格的边在横向和纵向上的间距。 【数字px】</h2>
		<h2>empty-cells :当单元格中没有内容时,单元格的边框是否显示 </h2>
		<table border="1px">
			<tr>
				<td colspan="3"><h1>表格属性设置</h1></td>
			</tr>
			<tr>
				<td>border-collapse</td>
				<td>设置单元格是否合并</td>
				<td>separate | collapse相邻边被合并</td>
			</tr>
			<tr>
				<td>border-spacing</td>
				<td>框独立时，单元格之间的间距</td>
				<td>数字px</td>
			</tr>
			<tr>
				<td>empty-cells</td>
				<td>当单元格中没有内容时,单元格的边框是否显示</td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

      1.8关于补丁的设置

          补丁--子元素和父元素之间的距离

          如果设置的是父元素---内补丁【padding】

          如果设置的是子元素---外补丁【margin】

          padding:12px 15px  28px  35px     四个参数值，将按上－右－下－左的顺序作用于四边。

          提供一个，将用于全部的四边     padding:12px

          两个，第一个用于上－下，第二个用于左－右     padding:12px 15px

          提供三个，第一个用于上，第二个用于左－右，第三个用于下     padding:12px 15px  28px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>补丁设置</title>
		<style>
			div{
				width: 500px;
				height: 400px;
				background-color: black;
			}
			#div1{
				padding: 50px;
			}
			#img2{
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<img id="img1" src="imgs/avatar2.png" />
		</div>
		<br>
		<div id="div2">
			<img id="img2" src="imgs/avatar5.png" />
		</div>
	</body>
</html>

2.关于布局的属性设置

     1.float：html元素是否及如何浮动【none没有 | left{左浮动} | right{右浮动} 】

        块级元素:其元素的前后会自动折行

        行内元素:按照由左向右一次排列，除非使用<br>元素强制换行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置元素浮动</title>
		<style>
			span{
				float: right;
			}
			ul{
				list-style-type: none;
			}
			ul li{
				float: left;
				padding-left:50px;
			}
			ul li a{
				font-size: 30px;
				text-decoration: none;
				color: darkgrey;
			}
			ul li a:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<font size="7">设置元素浮动</font>
		<ul>
			<li><a href="http://news.baidu.com/" target="_blank">新闻</a></li>
			<li><a href="#">hao123</a></li>
			<li><a href="#">地图</a></li>
			<li><a href="#">视频</a></li>
			<li><a href="#">贴吧</a></li>
			<li><a href="#">学术</a></li>
			<li><a href="#">更多</a></li>
		</ul>
	</body>
</html>

     2.设置html元素的隐藏和显示

          display:html元素是否及如何显示

          block：显示

          none:隐藏

          visibility:是否显示html元素

          visible：显示

          hidden:隐藏

        display与visibility的区别?

          Display隐藏元素之后，元素的物理空间也会消失，

          Visibility:隐藏元素之后，元素的物理空间不会消失，会留出空白。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置html元素的隐藏和显示</title>
		<script>
			function test1(){
				document.getElementById("img1").style.display="none";
			}
			function test2(){
				document.getElementById("img1").style.display="block";
			}
			function testvisibility1(){
				document.getElementById("img2").style.visibility="hidden";
			}
			function testvisibility2(){
				document.getElementById("img2").style.visibility="visible";
			}
		</script>
	</head>
	<body>
		<h1>设置html元素的隐藏和显示</h1>
		<h2>display:html元素是否及如何显示</h2>
		<h3>block：显示</h3> 
		<h3>none:隐藏</h3>
		<h1 onmouseover="test1();" onmouseout="test2();">图片的隐藏和显示</h1><br>
		<img id="img1" src="imgs/avatar2.png" /><br>
		<img id="img2" src="imgs/avatar5.png" />
		<h2>visibility:是否显示html元素</h2>
		<h3>visible：显示</h3> 
		<h3>hidden:隐藏</h3>
		<h1 onmouseover="testvisibility1();" onmouseout="testvisibility2();">图片的隐藏和显示</h1><br>
	</body>
</html>

3.关于定位的属性设置

     position：设置HTML元素的定位方式

     static：默认值。无特殊定位，html元素遵循HTML定位规则

        absolute:绝对定位。脱离HTML默认的定位规则，使用left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。

        relative：相对定位。不脱离HTML默认的定位规则，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

     left【左距】，right【右距】 ， top【上距】 ， bottom【下距】 

     必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。 HTML默认的定位规则，html元素在HTML文件中按照从左上角向右下角一次排列，遇见块级元素折行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>absolute:绝对定位</title>
		<style>
			#div1{
				width: 200px;
				height: 200px;
				background-color: black;
				position: absolute;
			}
			#div2{
				width: 200px;
				height: 200px;
				background-color: blue;
				position: absolute;
				top:1200px;
				left: 1200px;
			}
		</style>
	</head>
	<body>
		<h1>absolute:绝对定位。脱离HTML默认的定位规则</h1>
		<h1>使用left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位</h1>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>relative：相对定位</title>
		<style>
			#div1{
				width: 200px;
				height: 200px;
				background-color: black;
			}
			#div2{
				width: 200px;
				height: 200px;
				background-color: blue;
				position: relative;
				top:200px;
				left:200px;
			}
		</style>
	</head>
	<body>
		<h1>relative：相对定位。不脱离HTML默认的定位规则，</h1>
		<h2>但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置</h2>
		<div id="div1"></div>
		<div id="div2"></div>
		
	</body>
</html>

     z-index：设置对象的层叠顺序

         较大 number 值的对象会覆盖在较小 number 值的对象之上

         注意:z-index属性是的有效性与position属性有关。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置元素的层叠</title>
		<style>
			#div1{
				width: 300px;
				height: 200px;
				background-color: red;
				position: absolute;
				left: 100px;
				top: 100px;
				z-index: 1;
			}
			#div2{
				width: 300px;
				height: 200px;
				background-color: blue;
				position: absolute;
				left: 150px;
				top: 160px;
				z-index: 2;
			}
			#div3{
				width: 300px;
				height: 200px;
				background-color: yellow;
				position: absolute;
				left: 200px;
				top: 220px;
				z-index: 3;
			}
			#div4{
				width: 300px;
				height: 200px;
				background-color: green;
				position: absolute;
				left: 250px;
				top: 280px;
				z-index: 4;
			}
			div p{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<p align="right">div1--[z-index=1]</p>
		</div>
		<div id="div2">
			<p align="right">div2--[z-index=2]</p>
		</div>
		<div id="div3">
			<p align="right">div3--[z-index=3]</p>
		</div>
		<div id="div4">
			<p align="right">div4--[z-index=4]</p>
		</div>
	</body>
</html>

 

blake2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Css复习2
m0_49935332的博客
03-06 96
1.CSS中常用的属性设置 1.1关于列表的设置 列表--1.有序列表 <ol><li></li></ol> 2.无序列表 <ul><li></li></ul> 3.自定义列表<dl><dt><dd></dd></dt></dl> 列表的...
纯CSS实现自适应正方形、自适应正方形布局
最新发布
采黎的博客
02-27 1610
css自适应正方形，css实现自适应正方形，css实现宽高自适应正方形，css自适应正方形布局、css自适应正方形图片；提起自适应，想必都会想到rem、vw等相对单位，我们分别用这些单位来实现一下。
css相关
rtyytr的专栏
05-28 210
<br />.page<br />{<br />    width: 960px;      //控制横向页面宽度<br />    background-color: #fff;<br />    margin: 0px auto 0px auto; //控制上边页面距离顶端距离<br />    <br />    border: 1px solid #496077;<br />}<br /> <br />.main<br />{<br />    padding: 0px 12px;<br />   
CSS学习笔记07 盒子模型
weixin_34292924的博客
06-20 97
1、盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 用公式表示就是：盒子=边框+内边距+内容区域+外边距 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的...
js通过标签元素id，用document.getElementById().style设置标签元素的css属性
此人很懒，什么都没有写
07-07 1万+
参考：https://blog.csdn.net/kissing7/article/details/8924112 对定义了id的html标签元素，js可以通过以下方法修改标签元素的css样式： 方法一： 对标签定义一个css样式： document.getElementById(“idname”).style.display=“none”; 方法二： 对标签定义多个css样式： var a = document.getElementById(“idname”); with(a.style){ color
CSS基础知识
07-22
资源名称：CSS基础知识内容简介：0、基础知识1、CSS概述2、CSS基础语法3、CSS选择器4、CSS主要属性5、CSS核心机制-盒子模型6、CSS重点和难点-定位7、综合示例浏览器模式 当浏览器厂商开始创建于标准兼容的浏览器时...
CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性
12-05
CSS基础-选择器进阶+背景属性+元素显示模式+三大特性 CSS基础选择器进阶： 在CSS中，选择器是用于选择HTML元素并应用样式的核心机制。选择器进阶是指在基础选择器的基础上，进一步学习和应用选择器的高级规则和...
css 入门基础教程
09-25
总的来说，CSS入门基础教程涵盖了基本语法、选择器、注释和不同类型的样式表，这些都是学习CSS的基础。掌握这些知识后，可以进一步学习更复杂的布局技巧、响应式设计、动画和过渡效果，以及CSS预处理器等进阶主题。
python 零基础学习篇web前端开发基础css基础2 css样式表三种使用方式 .mp4
04-21
python 零基础学习篇
css 基础样式 base.css
04-28
css基础样式
【前端】【JavaScript】基础知识
我的的博客哦
02-05 3918
二. JavaScript 输入输出语句 方法 说明 alert(msg) 浏览器弹出警示框 console.log(msg) 浏览器控制台打印输出信息 prompt(into) 浏览器弹出输入框，用户可以输入 三. 变量 (一) 变量的使用 (二) 变量语法扩展 (三) 变量命名规范 四. 数据类型 (一) 简单数据类型 简单数据类型 说明 默认值 Number 数字型，包含整型，浮点型值，如21，0.21 0 Boolean
Echarts--柱形使用中记录
我是我家小女孩
07-04 205
//城市统计--柱形图 var mycity = echarts.init(document.getElementById("city_chart")); // 指定图表的配置项和数据 var city_option = { tooltip: {}, textStyle: { color: "#fff" }, ...
设置html元素的padding,css padding属性怎么用
weixin_34043280的博客
07-02 3386
css padding属性定义及用法在css中，padding属性是一个简写属性，用来设置所有内边距属性(填充)，将上边距属性、右边距属性、下边距属性、左边距属性定义在同一个声明中。css padding属性语法格式1.padding:属性值1 属性值2 属性值3 属性值42.padding:属性值1 属性值2 属性值33.padding:属性值1 属性值24.padding:属性值1说明：1.p...
CSS中padding属性的参数顺序
xin_shou123的博客
04-10 1050
CSS中padding属性的参数顺序 Padding属性是在网站建设的过程中是必不可少的，它的主要作用就是设定对象四边的补丁边距，padding可以说给我们带来的麻烦不少，最大的一个就是浏览器兼容性问题，这里先抛开这个不说了，单来分析一下padding中参数属性的作用规则，也就是哪个参数对应哪个补丁，从例子说起。 test{padding:10px 12px 14px 16px} 这里所有的参数都有了，那么它们的作用顺序是上右下左。 Test{padding:10px 12px 14px} 这里有3个参数，
padding:10px 0 10px 20px; css中的这个是什么意思
sinat_30474567的博客
06-30 6403
四个值分别是 上 右 下 左，margin也是一样的，你只要记住是顺时针旋转。
CSS 实现字体发光效果 text-shadow
热门推荐
单枪匹码
11-15 2万+
一、CSS字体发光效果： CSS3 并没有直接设置发光效果的属性，但是利用text-shadow属性实现此效果 1、text-shadow：该属性为文本添加阴影效果。 text-shadow: h-shadow v-shadow blur color; 2、参数： 参数名称 说明 h-shadow 水平阴影的位置（阴影水平偏移量），可为负值，必需 v-shadow 垂直阴影的...
CSS基础样式属性设置
淘小欣的博客
03-08 1544
文章目录css基础样式与属性设置一、宽和高二、字体属性1. font-family：文字字体2.font-size:字体大小3.font-weight：文字粗细4.font-style：文字风格5.color：文字颜色6.文字属性简写：7.总结：8.案例：三、文字属性1.text-align：文字对齐:2.text-decoration：文本装饰3.text-indent：首行缩进4.text-height：行高5.文字对其+行高实现文本水平垂直居中(掌握):6.字符间距（了解）7.单词间距（了解）8.示例
自定义 border（dashed）虚线的间距
khalil
10-08 1万+
前些日子接到一个小需求（见下图） 我看了一眼，想了几秒钟，这玩意不就是 border-bottom：dashed 嘛，然后我就咔咔咔上代码，就变成下面这样了。 敲完后我就感觉自己有很蠢，肯定不是这样实现的。然后我就想了一下，因为右边的按钮是需要用到渐变的，恰巧左边的下划线也能用渐变实现。东西想通之后那就也是咔咔咔几下的事情了。 .one { width: 300px...
【CSS】【面试题】牛客网CSS专项练习部分答案及解析（更新中...）
weixin_39006917的博客
03-01 6333
1.在W3C标准盒模型中，默认情况下块元素的总宽度为： content content+2*padding content+2*padding+2*border content+2*padding+2*border+2*margin 答案为：content 解析：CSS有两种盒子模型，分别为W3C盒子模型和IE盒子模型。区别在于，IE盒子模型的content部分，将border和padding包含进去了。width = border+padding+content。题干问的总宽度应该理解为width值为
CSS基础：浮动与定位详解
"本章主要介绍了CSS基础知识，包括CSS简介、引入CSS的方法、基本选择器、复合选择器以及盒子的浮动与定位等关键概念。CSS是层叠样式表的简称，用于设计网页样式，使网页呈现出丰富的效果。CSS可以应用于HTML、XHTML...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值