当前位置： 移动技术网 > IT编程>网页制作>CSS > 初识CSS总结

初识CSS总结

2020年07月12日  | 移动技术网IT编程  | 我要评论

初识CSS

一、什么是CSS？

1、CSS的定义

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

2、CSS的主要作用

1. 布局
  • 盒子模型
  • 块级元素并排显示
2. 美化
  • 字体设置
  • 文本设置
  • 列表设置
  • 表格设置

二、盒子模型

一张网页就是一堆的盒子堆积起来的。盒子就是标签，都是矩形。

盒子的分类

盒子可以分为三类：

  • 块级元素
    独占一行。
  • 行内元素
    并排显示。
  • 行内块元素
    可以并排显示，且具有块级元素的所有特点。

盒子模型的六大属性

1. 内容区域：width 和 height

  • 块级元素

可以设置width和height，表示内容区域。

  • 行内元素

width和height不起作用

2. 内填充区域： padding

用来设置内填充，也称补白。表示内容区域和边框之间的距离
  • 块级元素

上下padding可以撑起块级元素盒子的高度

  • 行内元素

padding在垂直方向上不影响行高

3. 边框： border

  • border-width

设置边框的宽度

  • border-style

设置边框的样式

  • border-color

设置边框的颜色
border是一个复合属性
通常使用

.box{
border:1px solid red;
}

4. 外填充区域：margin

表示外边距,盒子与盒子之间的距离,是边框之外的间隔。
  • 设置盒子水平居中
.box{
margin:0 auto;
}
  • 块级元素

margin有重叠问题

  • 行内元素

margin在垂直方向上无效

5. 背景： background

  • background-color

设置盒子的背景颜色

  • background-image

设置盒子的背景图片

  • background-repeat

控制背景图片是否平铺

  • background-position

背景图片定位

三、字体和文本设置

字体设置

  • font-style

设置字体是否倾斜

  • font-weight

设置字体是否加粗

  • font-size

设置字体大小

  • font-family

设置字体类型

font是一个复合属性
  • color

设置字体颜色

文本设置

  • text-decoration

用来设置文本的装饰线

把a标签的默认的下划线去掉
a {
text-decoration:none;
}
  • text-indent

首行空两格

  • text-align

1）让盒子中的文本居中
2）让行内元素或行内块元素在一个盒子中居中

  • line-height

设置行高

四、浮动布局

浮动的初衷：为了实现新闻的字围效果。

浮动的主要作用

  使用浮动来让块级元素并排显示。

浮动的特点

  • 贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。
  • 包裹性 如果是一个块级元素，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小
  • 一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。
  • 如果一个行内元素浮动了，就可以设置宽度和高度。

清除浮动的影响

  • 清除对父元素造成的影响
  • 使用overflow:hidden
.box{
overflow:hidden;
}
  • 对父元素添加高度
  • 清除对兄弟元素造成的影响
  • 使用clear:both
.box2{
clear:both;
}

本文地址：https://blog.csdn.net/TH_Kakashi/article/details/107284711

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网