【海码学院】web前端基础入门CSS之边框、宽高和行内块元素课堂学习笔记

最新推荐文章于 2024-04-21 08:38:46 发布

励志的程序员

最新推荐文章于 2024-04-21 08:38:46 发布

阅读量131

点赞数

分类专栏： HTML CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/weixin_45282338/article/details/94854473

版权

HTML 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

一、边框属性

1、多变定义边框属性

边框属性border：宽度类型颜色

宽度：px

类型：solid、dotted、dashed；默认为solid

颜色：单色单词、#色号、rgb（r，g，b）；默认不写就是黑色

<style>
    .box-div{
	    border: 1px dotted #0000FF;
        }
	.box-p{
		border: 5px solid red;
	}
	.box-h1{
		border: 2px dashed rgb(51, 201, 255);
	}
</style>


<body>
	<div class="box-div">div盒子</div>
	<p class="box-p">p段落</p>
	<h1 class="box-h1">h1标题</h1>
</body>

2、单边定义边框属性

左边框border-left：宽度类型颜色

右边框border-right ：宽度类型颜色

上边框border-top ：宽度类型颜色

下边框border-bottom：宽度类型颜色

<style>
	.box-div{
		border-left: 1px solid red;
		border-right: 2px dashed #87CEEB;
		border-top: 3px dotted rgb(45,100,256);
		border-bottom: 5px solid green;
	}
</style>


<body>
	<div class="box-div">div盒子</div>
</body>

3、多边属性定义边框属性

边框宽度border-width：px

边框类型border-style：solid、dashed、dotted

边框颜色border-color：颜色单词、#色号、rgb（r，g，b）

<style>
	.box-div{
		border-width: 3px;
		border-style: dotted;
		border-color: #FFA500;
	}
</style>
	

<body>
	<div class="box-div">div盒子</div>
</body>

4、单边属性定义边框属性

border - left/right/top/bottom - width/style/color：值

我只单独写一个例子，其他都是一样的。

<style>
	.box-div{
		border-left-width: 2px;
		border-left-style: solid;
		border-left-color: red;
	}
</style>

<body>
	<div class="box-div">div盒子</div>
</body>

二、宽、高属性

宽度属性width：值（px/%）

高度属性heigh：值（px/%）

注意：如果是百分比（%），那么参考的是父标签宽高百分比计算

<style>
	.box-div{
		border: 1px solid red;
		width: 100px;
		height: 100px;
	}
	.box-div p{
		border: 1px solid green;
		width: 50px;
		height: 50%;
	}
</style>
	

<body>
	<div class="box-div">
		<p>p标签</p>
	</div>
</body>

max-width：最大宽度

min-width：最小宽度

max-heigth：最大高度

min-heigth：最小高度

<style>
	.box-div{
		border: 1px solid red;
		max-width: 100px;
		max-height: 50px;
	}
		
</style>
	
<body>
	<div class="box-div">111111111
		1111111
		11111111
		1111111111
		111111111
	</div>
	</body>

三、行内块元素

标签元素分为：行内元素、块元素、行内块元素；

行内元素：宽高无效。

a、span、b、em、strong、i、del等；

块元素：默认的宽度是他所在父标签元素的宽度，默认独占一行。

h1-h6、div、p、form、ul、ol等；

行内块元素：会和行内元素，行元素在一行，并且宽高是有效的。

img、input等

注意：行内元素是可以通过display属性使之具有宽高值的！我会在后续的课程中整理。

励志的程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【海码学院】web前端基础入门CSS之边框、宽高和行内块元素课堂学习笔记

一、边框属性1、多变定义边框属性边框属性border：宽度类型颜色宽度：px类型：solid、dotted、dashed；默认为solid颜色：单色单词、#色号、rgb（r，g，b）；默认不写就是黑色<style> .box-div{ border: 1px dotted #0000FF; } .box-p{ ...
复制链接

扫一扫