Day14 CSS基础设定_4
今天我们要来教一些常用到的基本设定、包括宽高、背景颜色、文字颜色，以及inline与block的区别。
1.设定宽高
<style>
div{
width: 250px;
height: 250px;
}
</style>
设定一个宽高为250px的方框。
2.背景颜色
background-color: blue;
<style>
div{
width: 250px;
height: 250px;
background-color: blue;
}
</style>
将这个方框设定为蓝色。
3.文字颜色
color: rgb(20, 243, 20);
div{
width: 250px;
height: 250px;
background-color: blue;
}
p{
color: rgb(20, 243, 20);
}
以上这些都是非常基础的设定，接下来要认识inline，与block的特性。
inline
inline元素会拥有以下的特性:
1.他的方框宽度大小是由内容撑开去决定的，内容多少，宽度就多少。
2.因为第一点的关西，没办法设定宽高。
3.元素均会在同一行，包括图片跟文字，不会强制换行。
那inline元素会有那些呢?
inline元素:
span、a、img、input、br、textarea这些都是我们前面提过的。
那我们就马上实验看看吧!
<body>
<div>
<a href="">我是超连结</a>
<img src="https://picsum.photos/200/300" alt="">
<span>我不想要换行</span>
</div>
</body>
透过使用者开发工具我们发现，这三个东西a、img、span都在同一行里，没有进行换行的动作，这就是所谓的inline元素!
block
block元素会有以下的特性:
1.不管内容多小，元素宽度预设就是占满整个宽。
2.可以设定长宽/margin/padding。
block常见元素:
div、p、h1~h6、ul、ol、li、form、table
那让我们来看看区别吧!
<div class="a">
<p>我只有六个字</p>
<ul></ul>
<li>nnnnn</li>
<li>nnnnn</li>
<li>nnnnn</li>
</ul>
<h1>我不想换行</h1>
</div>
透过设定背景颜色我们可以看到，尽管我们打说不想换行，他还是会换行，因为这就是block元素的特性。不管内容多小就是会占满整个宽度。
最後其实还有混合两种的特性inline-block，其实就是结合两种的特性，能够以inline的方式排版，不会占满整个宽，但又拥有block的特性，能够设定margin和padding，能够水平排列。之後我们在详细介绍吧!今天的教学就到这。
>>: [C 语言笔记--Day17] 让一个绝对不会 return 的 function 进行一点优化
Debian10安装iRedMail v1.2.1详细教程
iRedMail简介 iRedMail是基于开源的postfix、dovecot、openldap...
[Day 13]每天前进一点应该也是进步吧?(前端篇)
挑战目标: MockNative Camp 今天我们来整理昨天没有弄好的footer右边的部分， 这...
CSS选择器
前言 CSS选择器可指定你要对那些元素设定CSS属性。 基本选择器 Class 选择器 使用「.」代...
DAY28 - [React] useContext 概念篇
今日文章目录 前言 参考资料 前言 在 Day25-[React] props 中我们练习用pro...
在Mac/Windows上将MOV转换为MP4：实用工具推荐
怎麽在Mac/Windows上将MOV转换为MP4：免费或在线转换器推荐 MOV是Mac用户的流行影...