CSS概述和语法2

最新推荐文章于 2020-05-19 08:43:21 发布

小张biubiu

最新推荐文章于 2020-05-19 08:43:21 发布

阅读量224

点赞数 1

分类专栏： HTML CSS 文章标签： CSS概述 CSS语法

本文链接：https://blog.csdn.net/weixin_45178455/article/details/102786714

版权

CSS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 0 订阅

订阅专栏

紧接上一篇博客------>>>选择器优先级选择器类型权值元素选择器0,0,0,1类选择器0,0,1,0伪类选择器0,0,1,0ID选择器0,1,0,0内联样式1,0,0,0 选择器的权值加在一起，大的优先；如果权值相同，后定义者优先。尺寸单位：% ：百分比in ：英寸cm ：厘米mm...

摘要由CSDN通过智能技术生成

紧接上一篇博客------>>>

尺寸单位：

% ：百分比
in ：英寸
cm ：厘米
mm ：毫米
pt ：磅(1pt等于1/72英寸)
px ：像素(计算机屏幕上的一个点)
em ：1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍。

颜色单位：

rgb(x,x,x) ：RGB值。如rbg(255.0.0)
rgb(x%,x%,x%) ：RGB百分比值。如rgb(100%,100%,100%)
#rrggbb ：十六进制数。如#ff0000
#rgb ：简写的十六进制数。如#f00
表示颜色的英文单词。如red

选择器优先级

选择器类型	权值
元素选择器	0,0,0,1
类选择器	0,0,1,0
伪类选择器	0,0,1,0
ID选择器	0,1,0,0
内联样式	1,0,0,0

选择器的权值加在一起，大的优先；如果权值相同，后定义者优先。

上面是所要补充的，接下来我们步入今天的正题！~

三、尺寸与边框

Ps：因为是接上一篇博客所以这里的这个标题就写三了~

(一)、尺寸属性

1、作用

用于设置元素的宽度和高度。
单位为百分比或者像素。
?传送至尺寸单位~
?传送至颜色单位~
ex：

<html>
<head>
<style>
body{
	font-size:24px;
}
		//设置body中的文字大小为24px。

#d1{
	font-size:2em;
}
		//设置div元素中的文字大小为2em
</style>
</head>

<body>
	    <div id="d1">
    		这是d1中的字体大小
		</div>

		<p>这是body中的字体大小</p>
		
</body>

//设置body中文字大小为24px，利用id选择器设置id为d1的元素中，文字大小为body的两倍。
(如上所示也就是p标记中的文字大小是div中的文字大小的两倍，也就是48px。)

效果如下所示：
在这里插入图片描述

2、宽度属性

width ：设置元素的宽度。
min-width ：设置元素最小宽度。
max-width ：设置元素最大宽度。

3、高度属性

height ：设置元素的高度。
min-height ：设置元素最小高度。
max-height ：设置元素最大高度。

ex：

<html>
<head>
<style>
#d1{
	background-color:red;
	width:100px;
	height:100px;
}
		//利用ID选择器使id为d1的元素中的文字背景 为红色，宽度为100px，高度为100px。
</style>
</head>

<body>
	    <div id="d1">
    		我是测试文字！
		</div>
		
</body>

效果如下所示：

在这里插入图片描述

4、允许被修改宽度和高度的元素

1)、块级元素允许被修改宽度和高度。
2)、大部分的行内块元素允许被修改尺寸。
行内块：表单控件元素
(单选按钮，复选框，无法修改尺寸。)
3)、存在widt和height属性的html元素允许被修改尺寸。
比如：img，table

5、溢出

使用尺寸属性限制元素大小时，如果内容所需要的空间的大小大于元素本身，则会导致溢出的效果。
属性：overfow
取值：
1)、 visible
默认值，溢出可见。
2)、 hidden
隐藏，溢出隐藏。
3)、 scroll
滚动，元素会出现滚动条，当内容溢出时，滚动条可用。
4)、auto
自动，内容溢出时显示滚动条并且可用，不溢出没有滚动条。
ex(scroll：滚动条)：

<html>
<head>
<style>
#d1{
	background-color:red;
	width:200px;
	height:200px;
	overflow:scroll;
}
</style>
</head>

<body>
	    <div id="d1">
    	        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
		</div>
		
</body>

效果如图所示：

在这里插入图片描述

不管高度溢出还是宽度溢出，都会出现两条滚动条。

ex(auto：自动)：

<html>
<head>
<style>
#d1{
	background-color:red;
	width:200px;
	height:200px;
	overflow:auto;
}
</style>
</head>

<body>
	    <div id="d1">
    	        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
		</div>
		
</body>

效果如图所示：在这里插入图片描述
高度溢出的时候会出现右滚动条，宽度溢出的时候会出现底部滚动条。

因为使用auto比scroll好看一些，所以一般会使用auto多一些?~

小张biubiu

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
CSS概述和语法2

紧接上一篇博客------>>>选择器优先级选择器类型权值元素选择器0,0,0,1类选择器0,0,1,0伪类选择器0,0,1,0ID选择器0,1,0,0内联样式1,0,0,0 选择器的权值加在一起，大的优先；如果权值相同，后定义者优先。尺寸单位：% ：百分比in ：英寸cm ：厘米mm...
复制链接

扫一扫

专栏目录