CSS笔记-基础篇-css入门(一)

2021/9/12 23:35:06

本文主要是介绍CSS笔记-基础篇-css入门(一),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1.为什么需要CSS

前一篇所讲的html标签可以认为是在浏览器窗口中从左到右、从上到下,按照标签的特性一次排列,就像堆积木一样,而标签的种类可以分为块级元素和行内块元素,它们的区别在于块级元素独占一行,行内块可以在一行内排列多个

  <div style="background: pink;">块级元素1</div>
  <div style="background: skyblue;">块级元素2</div>
  <span style="background: red;">行内块元素1</span>
  <span style="background: red;">行内块元素2</span>
  <div style="background: yellow;">块级元素3</div>

image.png
虽然这些标签具有默认的样式,但是大部分都不能满足要求,通过css可以对页面上的所有元素重新定位、排列和渲染

2.html标签内容的分类及显示

在页面上出现的元素根据其占用的位置大致可以分为三类,块级元素、行内元素和行内块元素
块级元素的特点就是独占一行,可以指定宽高,代表元素有:div、h系列、p、br、hr等
行内元素的特点就是并排展示,指定宽高无效,具体的宽高由本身的内容决定,代表元素有:span、a、img等
行内块元素的特点是具有块级元素和行内元素的共同点,即可以指定宽高,并且可以在一排上放置多个元素,通过css可以将元素的类型改为行内块
页面上的所有元素展示时并不是只有内容组成,一个元素由外边距、内边距、边框和内容组成
image.png
这些部分组合起来就称为盒子模型,页面上就是由这些盒子组成的

盒子模型中的概念

首先说内容,内容就是希望使用这个盒子装什么东西
image.png
选中div内容区域后会发现,内容占了一整行,由于未指定高度,默认就是文字的高度,内边距、外边距和边框默认都是0
接着给它添加一个5px的内边距
image.png
可以看到除了内容的高度与宽度外,在它的外部又额外套了一层,这层内容就称为内边距
继续添加5px的边框
image.png
看着和上图没什么区别,其实它是在内边距的基础上又套了一层,这层就被称为边框
外边距是相对其他元素来说的,此处继续指定5px的外边距
image.png
根据上面的内容可以看出,盒子模型中几部分的组成内容基本相似,而这些部分都可以通过css进行控制

css控制盒子模型的方式

无论是什么元素,css控制此类的盒子模型基本都是一样的
对于内容,css可以控制它的字体属性、文本属性,比如字体大小、粗细、倾斜、文本颜色、行间距等
image.png
具体每个样式可以取哪些值可以通过官网或离线手册查询,除了值不同外写法都是相同的,本次列出的基本都是日常开发中经常使用的
其中文字缩进里使用到的em代表的也是一种单位,比如2em代表的就是2倍的字体大小,所以缩进了两个文字
image.png
内边距是用来撑开内容与边框之间的距离的,它可以指定的样式很少
image.png
对于边框,可以指定它的高度、样式、颜色等信息,边框角度指的是边框上四个角的弧度
image.png
外边框和内边框类似,它主要用来指定盒子距离上下左右四个方向上其他盒子的距离
为了便于书写,为以上几种样式都提供了简写形式,通过参数的排列指定特定位置的样式
image.png
其余的样式同上

css对于盒子模型的控制总结

  • 控制内容样式:font、text系列
  • 控制内边距:padding系列
  • 控制边框:border系列
  • 控制外边距:margin系列
  • 内边距、边框、外边距都可单独指定某一个方向
  • 内边距、内容、外边距、边框都存在简写方式,且排列方向为顺时针


这篇关于CSS笔记-基础篇-css入门(一)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程