CSS（零基础）

css常用属性

标签的显示（display）模式

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素

1、块级元素（block-level）

 常见的块元素有<h1>~<h6> ,<p>,<div>,<ul>,<ol>,<li>等，其中<div>标签是最典型的块元素

块级元素的特点：

（1）自己独占一行

（2）高度，宽度，外边距以及内边距都可以控制

（3）宽度默认是容器的100%

（4）是一个容器及盒子、里面可以放行内或者块级元素。

注意：

只有文字才能组成段落 因此p里面不能放块级元素，特别是p不能放div

同理还有标签h1,h2,h3,h4,h5,h6,dt，都是文字类块级标签，里面不能放其他块级元素

1. 行内元素（inline-level）

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>标签最典型的行内元素，有的地方也成为内联元素

行内元素的特点
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置时无效的。
（3）默认宽度就是它本身内容的宽度
（4）行内元素只能容纳文本或者其他行内元素。
注意
链接里面不能再放链接。
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

1. 行内块元素（inline-block）

 在行内元素有几个特殊的标签 <img />,<input />,<td>,可以对它们设置宽高和对齐属性，称为行内块元素

行内块元素的特点
（1）和相邻内元素（行内块）在一行上，但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度
（3）高度，行高，外边距以及内边距都可以控制。

4、三种模式总结与区别

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	他本身的内容

5、标签显示模式转换display

块转行内：display：inline;
行内转块：display:block;
块、行内元素转换行内块：display:inline-block;

边框样式（border-style）:

border-style属性可以控制边框的视觉样式，包含8种可用边框样式。
使用方法：

8种样式：

solid： 实线边框，经典边框。

double： 双线边框，含有两条线。

groove： 槽线边框，看起来就像页面中的一个槽。

outset： 外凸边框，看起来就像从页面凸出来一样。

dotted： 虚线（点线）边框。

dashed： 破折线边框。

inset： 内凹边框，看起来像页面凹进去一样。

ridge： 脊线边框，看起来像页面上一个凸起来的山脊。

边框圆角（border-radius）:

一般设置的边框默认样式都是90°的直角边框，利用border-radius属性可以设置边框四角的弧度。

使用方法：
1.用一个数字指定四个角的弧度大小。

border-radius: 15px;

 首先我们要知道display是显示的意思，分别有四种属性值分别为：

   display：block;（转换为块元素）

   display：inline;（转换为行内元素）

   display：inline-block;（转换为行内块元素）

  display：none;（元素不会被显示）

前言

CSS 中的 padding 属性用于控制元素内容与其边框之间的距离，即元素内边距。

它的主要作用是调整元素内部内容与边框之间上右下左的间距，以增加页面的美观性和布局灵活性。

好，那我们一起来看看吧。

Padding 基础

padding 属性的四个边属性分别是：

padding-top：控制元素顶部内边距的大小，用于设置元素上边距的间距。

padding-right：控制元素右侧内边距的大小，用于设置元素右边距的间距。

padding-bottom：控制元素底部内边距的大小，用于设置元素下边距的间距。

padding-left：控制元素左侧内边距的大小，用于设置元素左边距的间距。

margin 的使用

margin 用于设置元素的外边距。

margin 是一个简写属性，包括以下 4 个子属性：

margin-top：上外边距。

margin-right：右外边距。

margin-bottom：下外边距。

margin-left：左外边距。

margin 可以设置 1 ~ 4 个属性值：

一个属性值：一起设置上下左右。

两个属性值：分别设置上下、左右。

三个属性值：分别设置上、左右、下。

四个属性值：分别设置上右下左。

margin 的值可以是以下几种：

<length>：使用一个有单位的长度值。可以使用负值。

<percentage>：使用一个百分比值。相对于元素的包含块的宽度。

auto：让浏览器自动计算外边距的大小，通常用于设置块级元素水平居中或平均分配空间。

inherit：继承父元素的外边距。

CSS3：overflow属性详解

overflow为溢出（容器），当内容超出容器时只需添加overflow属性值为hidden， 就可以把超出容器的部分隐藏起来；

如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto；

overflow：auto 属性如果超出就出现滚动条，没有超出则不出现滚动条这样就可以出现滚动条，

滚动条也可以单独设置，例如overflow-x：hidden；overflow-y：auto；这样就只能看见垂直方向的滚动条了。如果单独定义x轴或者y轴的时候，两个属性都需设置属性值

1. 添加overflow：hidden；属性，效果：

可以看到，overflow：hidden会把超出盒子的部分隐藏，也可以理解为切断。

1. 添加overflow-x：hidden；overflow-y：auto属性

属性设为overflow-x：auto；overflow-y：hidden；与上图效果正好相反，即滚动条侧边隐藏，会出现在底部。

2.overflow的常见属性值

Overflow属心常见的有四个：visible，hidden，auto和scroll；

visible为overflow 的默认值，为超出显示；

hidden为超出隐藏；

auto为自动，即超出会出现滚动条， 不超出就没有滚动条；

scroll为内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。