CSS3 元素基础知识

元素宽高特点
元素类型转换
元素显隐
px像素
em单位
rem单位
百分比单位
颜色名和16进制颜色值
rgb和rgba颜色值

元素宽高特点

块级元素

可以设置宽高
不能和其他元素在一行
没有设置宽高时，宽度和父级宽度一样，高度由元素内容的高度决定
当设置有宽高时，元素的宽高就是设置的值

行级元素

不可以设置宽高，设置的宽高无效
可以和其它元素在一行
宽高由元素内容决定

行内块级元素

可以设置宽高
可以和其它元素在一行
当没有设置宽高时，宽高由元素内容决定
当设置有宽高时，元素的宽高就是设置的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素宽高特点</title>
</head>
<body><!-- <div style="background: red; width: 200px; height: 20px;">块级元素</div> --><!-- <div>块级元素</div> --><!-- <span style="background: red; width: 300px; height: 20px;">行级元素</span> --><!-- <span style="background: red;">行级元素</span> --><img src="./头像.png" style="background: red; width: 100px; height: 100px;"><img src="./头像.png" style="background: red; width: 100px; height: 100px;">
</body>
</html>

元素类型转换

display:block 转块级元素

display:inline 转行级元素

display:inline-block 转行内块级元素

任何元素都可以进行类型转换，元素类型之间可以相互转换
元素类型转换不会影响元素自身的性质

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素类型转换</title><style type="text/css">a,span,img{background: #ccc; margin-bottom: 5px;display: block;width: 200px; height: 80px;}div{background: #ccc; /* width: 200px; height: 80px;宽高失效 */display: inline;display: inline-block;}</style>
</head>
<body><a href="http://www.baidu.com">行级元素</a><span>行内元素</span><img src="./头像1.png" alt="行内块级元素"><hr><div>块级元素111</div><strong>行内元素</strong>
</body>
</html>

元素显隐

display:none 元素隐藏，页面结构仍然存在，元素所占空间会被隐藏

display:block 块级元素显示

display:inline 行级元素显示

display:inline-block 行内块级元素显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素显隐</title><style type="text/css">div{width: 200px; height: 80px;background: #ccc;display: none;}span{background: #ccc;display: none;}.div1{display: block;}.span1{display: inline;}</style>
</head>
<body><div class="div1">元素显隐</div><span class="span1">元素显隐2</span>
</body>
</html>

px像素

屏幕上的一个点作为单位，稳定精确
用得最多的尺寸单位

em单位

em是以自身字体大小font-size作为参考，是自身字体大小的倍数
当自身字体大小改变时，em会跟着改变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>em单位</title><style type="text/css">div{font-size: 15px;}h4{background: #ccc;width: 300px; height: 30px;}p{font-size: 20px;background: green;width: 20em; }</style>
</head>
<body><div><h4>em单位</h4><p>em单位2</p></div>
</body>
</html>

rem单位

rem是以根元素（html元素）字体大小作为参考，是根元素字体大小的倍数
当根元素字体大小改变时，rem会跟着改变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>rem单位</title><style type="text/css">html{font-size: 20px;}h4{background: #ccc;width: 400px; height: 30px;}p{font-size: 20px;background: green;width: 20rem; }</style>
</head>
<body><div><h4>rem单位</h4><p>rem单位2</p></div>
</body>
</html>

百分比单位

%百分比单位是以父作为参考，是父元素的百分比
当父元素改变时，使用%作单位的子元素会跟着改变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>百分比单位</title><style>div{background: #ccc;width: 600px; height: 300px;}p{background: red;width: 50%; height: 50%;font-size: 200%;}</style>
</head>
<body><div><span style="font-size: 32px;">百分比单位</span><p>百分比单位2</p></div>
</body>
</html>

颜色名和16进制颜色值

颜色表示方式：

颜色名称：red、yellow、blue。。。（用得少）
16进制颜色值：#rrggbb；rr(红色)，gg(绿色)，bb(蓝色)；使用16进制整数规定颜色成分，所有值必须介于00至ff之间（用得多）

color: red;
color: #ff0000;

rgb和rgba颜色值

rgb(红，绿，蓝)颜色值：通过定义三种（红，绿，蓝）颜色的强度来定义颜色；所有值必须介于0至255之间
rgba(红，绿，蓝，透明度)颜色值：在rgb颜色值基础上增加了透明度，a表示alpha透明度，取值0.0至1.0之间，0表示完全透明，1表示完全不透明

color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.6);

CSS3 元素基础知识相关推荐

css before after用法_CSS 伪元素基础知识：content 与counter 实用技巧（二）
在CSS 伪元素基础知识:before 与after (一),笔者已经介绍过 CSS 里的::before 和::after 这两个伪元素,以及content 相关的用法,这篇将针对content 搭 ...
aspx网页背景图片设置代码_Vue+CSS3制作双螺旋DNA动画：代码详解和基础知识复习
1 效果: 2 知识点: ======= 2.1 html的基础知识. 2.2 css3的基础知识. 2.3 vue的基础知识. 2.4 代码讲解非常清楚,小白看了都会. 3 html骨架: ==== ...
python的基础知识可以应用到哪方面-Python基础知识
python基础 python的诞生 2002年,python 2.x 2008年,python 3.x python的命名马戏团的名称 python简介简单.易学持快速开发. 跨平台. 开源. ...
CSS学习笔记 01、CSS3基础知识学习
文章目录前言 CSS3基本了解如何学习? 一.什么是CSS 1.1.发展史 1.2.快速入门(三种引用方式) 扩展:外部样式两种写法二.选择器 2.1.基本选择器(标签.类.id) 2.2.元素 ...
css过渡取消过渡_CSS基础知识：CSS3过渡
css过渡取消过渡随着CSS3在网络上的推广,它带来了一些有趣的新演示技术. 今天,我们将回顾使用CSS3过渡和动画的基础知识,以增加额外的修饰. 本教程包括Tuts + Premium成员可用的 ...
CSS3基础知识及详情
CSS3基础知识及详情什么是CSS3 CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能.目前主流浏览器chrome.safari.firefox.opera ...
html5 css3基础知识详解
如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了 CSS2的众多不足之处,使得Web开发变得更为高效和便捷. Html4 ...
SAP SD基础知识之交货中的控制元素
SAP SD基础知识之交货中的控制元素一,交货类型Delivery Type Delivery type控制整个的交货,我们可以在delivery header中看到delivery type: D ...
基础知识--:before伪元素和:after伪元素
http://book.51cto.com/art/201108/285688.htm 3.7 替换指定位置大家都知道before和after是前.后的意思.但是奇怪的是,CSS中的:before ...

CSS3 元素基础知识

CSS3 元素基础知识

元素宽高特点

元素类型转换

元素显隐

px像素

em单位

rem单位

百分比单位

颜色名和16进制颜色值

rgb和rgba颜色值

CSS3 元素基础知识相关推荐

最新文章

热门文章