2022-08-07 CSS 2

一、css盒子模型

1.content：内容区域

是由width和height组成的区域，增加内边距、边框和外边距不会影响内容区域元素框的总尺寸

2.padding：内边距（内填充）

只写一个值：30px（上下左右）
写两个值：30px 40px（上下、左右）
写三个值：30px 40px 50px（上 左 右 下）
写四个值：30px 40px 50px 60px（上、右、下、左）
也可针对某一遍进行设置，此时只能写一个值：
padding-left padding-right padding-top padding-bottom

3.border：边框。

给盒子设置边框粗细（border-wieth）、边框样式（border-style）、边框颜色（border-color）等效果。

4.margin：外边距（外填充）

margin控制元素与元素之间的距离。body的margin比较特殊，控制的是页面与浏览器窗口边距的距离。用法与padding一样

二、标签分类

（一）、按类型

1.block：块
例如div、p、ul、li、h1等都属于块，它们具有以下特性：
a) 独占一行
b) 支持CSS所有样式
c) 不设置宽时，宽会和父元素的宽相同
d) 所占区域是一个矩形

2.inline：内联（行内标签）
例如span、a、em、strong等都属于内联，它们具有以下特性：
a) 挨在一起（和其他元素在一行上）
b) 对元素的高度、宽度及顶部和底部边距设置不生效；完全靠内容撑开宽高
c) 所占区域不一定是矩形
d) 内联标签之间会有空隙，是由写代码时换行产生的，但一般不需要解决这个空隙。
布局一般用块标签，修饰文本一般用内联标签。

3.inline-block：内联块（行内块标签）
例如img、input、select等（一般是表单标签），特性如下：
a) 挨在一起
b) 元素的高度、宽度、行高以及顶和底边距都可设置

三、显示框类型（display）

display属性规定元素应该生成的框的类型
display: block / inline / inline-block / none
a) inline：默认值，此元素会被显示为内联元素，元素前后没有换行符。
b) block：此元素将显示为块级元素，此元素前后会带有换行符。
c) inline-block：行内块元素
d) none：此元素不会被显示
display: none 表示不占空间的隐藏
visibility: hidden 占空间的隐藏
在html文档中，不建议使用显示框类型，通常使用浮动 float 来实现相同的效果。

四、overflow溢出隐藏

overflow属性规定溢出部分的显示效果。
溢出部分：指的是盒子内容部分所超出盒子范围的区域。
常见属性值：
visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被隐藏，其余内容是不可见的。
scroll：无论是否溢出，都将会同时显示水平和垂直两个滚动条。
auto：根据是否溢出，自动显示滚动条以查看其余的内容或隐藏滚动条。
overflow还有两个姐妹属性：overflow-x、overflow-y，但很少使用。

五、透明度与手势

1.透明度

opacity 透明度，是一个属性
(a) 取值为 0(透明) ~ 1(不透明)，例如0.5表示半透明
注：当透明度为0时，也占空间
(b) 有opacity属性的所有后代元素都会继承 opacity 属性，所以其所有的子内容也会透明
rgba（r, g, b, a），是一个属性值
其中a（alpha）控制透明度，取值同样为0~1，它可以让指定的样式透明，而不影响其他的样式。可用于制作透明的边框、透明背景图片等

2.手势：cursor

default：默认，通常是一个箭头。
hand/pointer：手形光标。就像通常用户将光标移到超链接上时那样。
move : 十字箭头光标。用于标示对象可被移动。
help : 带有问号标记的箭头。用于标示有帮助信息存在。
text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
自定义光标：cursor: url(路径), auto。图片类型需要是.cur或.ani格式。

六、float浮动

1.文档流（标准流）

文档流：是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。
常见标准流排版规则

2.块级元素：从上到下，垂直布局，独占一行

3.行内元素或行内块元素：从左到右，水平布局，空间不够时自动折行

4.float特性

加浮动的元素，会脱离标准文档流（脱标），会沿着父容器靠左或靠右排列（不能上下），如果之前已经有浮动的元素，会挨着浮动的元素进行排列。在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框独占一行，而不论它本身是何种元素。

5.float取值

left：元素向左浮动
right：元素向右浮动
none（默认）：元素不浮动，并会显示在其在文本中出现的位置

6.float注意点

只会影响后面的元素，对浮动之前的元素不造成任何影响
内容默认提升半层：浮动的元素有“字围”的效果，可以做一些图文混排效果
默认宽根据内容决定（收缩）：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）

7.换行排列

主要给块元素添加，但也可以给内联元素添加

8.清除浮动

清除浮动的含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准文档流的块级父元素
原因：子元素浮动后脱标–>不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局

十、清除浮动的方法

1.直接设置父元素的高度
2.额外标签法：
步骤：
(a)在父元素内容的最后添加一个块级元素
(b)给添加的块级元素设置 clear:both
缺点是会在页面中添加额外的标签，会让页面中的HTML结构变得复杂
3.伪元素清除法
content : ' ';
display : block;
clear : both;

image.png