CSS学习笔记3

最新推荐文章于 2024-09-04 02:27:32 发布

沉迷于搬砖

最新推荐文章于 2024-09-04 02:27:32 发布

阅读量74

点赞数

文章标签： css 学习

本文链接：https://blog.csdn.net/weixin_45960356/article/details/125531253

版权

CSS学习笔记

CSS 常用样式

1.字体属性

1.粗细 font-weight
作用：设置文字是否加粗显示
属性名：font-weight，属于font属性的一个单一属性
属性值有两种方式：单词类型、数字类型

a、单词类型
在这里插入图片描述

b、数字类型
100-900之间的整百数字
数字越大，字体显示越粗
其中400等价于normal，700等价于bold

2.字体风格 font-style
作用：设置文字是否倾斜显示
属性名：font-style，属于font属性的一个单一属性
属性值：单词
在这里插入图片描述

日常应用中，更多的斜体效果习惯使用italic属性值

3.行高 line-height
作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的
属性名：line-height，属于font属性的一个单一属性
属性值
在这里插入图片描述

日常工作中，行高的数值通过设计图获取，量取数值时需要使用一些辅助软件工具（PS等）

4.字体综合 font
说明：字体，字号，行高，加粗，斜体都是font综合属性的单一属性
font属性五个单一属性的值可进行合写，属性值可有2到多个，值之间用空额进行分隔

写法1：
注意：font进行综合书写时，必须有字号和字体参与，且字号必须在前，字体在后，不能颠倒顺序

font: 15px "consolas", "arial", "SimSun", "Microsoft Yahei";

写法2：
font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔

font: 15px/28px "consolas", "arial", "SimSun", "Microsoft Yahei";

写法3：
如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可互换位置，后面的字号、行高、字体不能更改位置

font: italic bold 15px/28px "consolas", "arial", "SimSun", "Microsoft Yahei";
font: bold italic 15px/28px "consolas", "arial", "SimSun", "Microsoft Yahei"

2.文本属性

1.水平对齐 text-align
作用：设置文本水平方向的对齐
在盒子中，不论文本是单行还是多行，都会对应方向对齐
属性值：单个方向的单词
在这里插入图片描述
2.文本修饰 text-decoration
作用：设置文本整体是否有线条的修饰效果
属性值：
3.文本缩进 text-indent
作用：设置段落首行是否进行缩进
属性值：

日常工作中，最常使用em为单位的属性值
属性值区分正负，正数表示向右缩进，负数表示向左缩进

3.盒子模型

说明：盒子模型又叫框模型，包含了五个用来描述盒子位置，尺寸的属性，分别是宽度width、高度height、内边距padding、边框border、外边距margin

宽度：内容的宽度
高度：内容的高度
内边距：内容距离边框的距离（如果边框大于1，取最短距离）
外边距：边框与边框之间的距离（如果边框大于1，去最短距离）

1.常见盒子模型区域

a、盒子模型的属性中，根据不同属性的效果，可划分为以下区域：
书写元素内容区域：width+height
盒子可实体化区域：width+height+padding+border
盒子实际占位的位置：width+height+padding+border+margin

2.宽度 width

作用：设置可添加元素内容的区域宽度
属性值：
在这里插入图片描述

特殊应用：
a、如果一个元素不添加width属性，默认属性值为auto，不同元素浏览器会根据其特点自动计算出实际宽度，例如div元素等独占一行，其width属性的值会自动撑满父元素的width区域，如果span元素等不需要独占一行，其width属性的值是元素内容自动撑开的宽度
b、body元素比较特殊，不需要设置width属性，宽度会自动适应浏览器窗口的宽度

3.高度 height

作用：设置可添加元素内容的区域高度
属性值：
在这里插入图片描述

特殊应用：如果一个元素不添加height属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是内部元素内容自动撑开的高度，元素的高度自适应内部内容的高度

4.内边距 height

作用：设置的元素的边框内部到宽高区域之间的距离
特点：可去加载背景，不能书写嵌套内容
属性值：常用px为单位的数值
padding是一个复合属性，可根据内边距的方向不同划分为四个方向的单一属性
书写四个方向单一属性时，一般是按照顺时针规律书写：上、右、下、左

p {
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 40px;
}

四种简写方法
a、四值法：上、右、下、左
b、三值法：上、左右、下
c、二值法：上下、左右
d、单值法：上右下左

5.边框 border

作用：设置内边距外面的边界区域，作为盒子的实体化的最外层
属性值：由三个值组成，分为线的宽度，线的形状，线的颜色
border属性也是一个复合属性，根据划分依据不同可有两种单一属性的划分方式
a、按照属性值的类型划分

线宽：border-width

作用：设置边框线的宽度
属性值：常用px形式的数值，四个方向都有边框，属性值类似padding，也有四种值的写法

线型：border-style

作用：设置边框的线条形状
属性值：形状的单词，总体也是类似padding的综合属性写法
属性值的单词可能性：

颜色：border-color

作用：设置边框的颜色
属性值：颜色名或颜色值，整体类似padding综合属性写法

b、根据边框的方向划分
上边框：border-top
右边框：border-right
下边框：border-bottom
左边框：border-left
每个单一属性都必须与符合属性border一致，设置三个属性值

c、根据方向和类型，进一步细分
雷士border-top的单一方向属性，也可根据属性值类型继续进行单一属性划分
单一属性写法：border-方向-类型
注意：细分时必须先写方向划分再写类型划分，否则属性名错误

6.外边距 margin

作用：设置盒子与盒子之间的距离
特点：不能渲染背景
属性值：常用px为单位的数值
外边距的设置方式与内边距padding一样

4.盒子模型扩展应用

1.清除默认样式

说明：
a、大部分标签都有一个浏览器加载的默认样式，会对布局造成一定影响，为了避免默认样式对整体布局效果造成影响，一定要清楚默认样式。
b、盒子模型属性中内外边距，大部分容器级标签都有默认边距，需要用标签选择器的并集方式或通配符清除。
c、ul和ol两种列表有默认的列表前缀，清除list-style属性
d、a标签的默认样式舒耐设置页面中常用的a的公共样式：设置color和text-decoration。
e、清除默认加粗效果：设置font-weight。
部分清除默认样式设置如图：
在这里插入图片描述

可在body标签设置整体文本样式，让大部分后代标签全部继承

2.height 应用

1.高度height应用场景
根据不同的需求，高度属性可设置也可不设置
如设置了高度，盒子占的高度位置就确定了，后面的统计元素会紧挨着加载
如果不设置高度，会根据标签内部内容高度自动撑开

必须设置高度
如图盒子高度占位固定，后面同级元素在高度下面加载，自身盒子内容过多会溢出盒子区域

2.overflow 属性
说明：设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果；可通过一个溢出属性overflow，进行溢出部分内容的显示效果设置
在这里插入图片描述

必须不设置高度
要求盒子高度必须自适应内部内容的高度或者设置height的属性值时自动的

3.居中

1.文本水平居中
水平居中：text-align属性（不论文本是单行还是多行，都可设置）
在这里插入图片描述

2.文本垂直居中
单行文本垂直居中：让文字行高line-height等于盒子高度height
多行文本垂直居中：让元素高度自适应或者等于多行文字的高度，设置元素内边距上下值相同

3.元素垂直居中
一个元素内部嵌套的子元素，在父元素汇总居中
垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距
在这里插入图片描述

4.元素水平居中
对于div样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可设置子盒子的margin值，水平方向的值都设置为auto
原因：auto只在水平方向有作用，水平方向的margin如果设置为auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是auto，两边都要无限大，智能达到一个平衡，两边距离相同，导致盒子居中
在这里插入图片描述

4.父子盒子模型

一个父元素内部可放一个或多个子元素，而多个子元素要拍成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度width
父元素width>所有子元素width+padding+border+margin
如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素

在这里插入图片描述

特殊情况：盒子模型自动内减
父子盒模型中，只有一个子元素，且子元素是类似div标签必须占一行的，不设置子元素的width属性，子元素的width属性值自动加载父级元素的width。
如果同时设置子元素水平方向的padding和border、margin，不需要手动去进行内减，子元素的width会自动收缩尺寸。
子元素所有的水平方向的位置所有属性的加和等于父元素的width。

5.margin 塌陷现象

说明：margin塌陷现象，在处置方向如果有两个元素的外边距相遇，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。

1.同级元素塌陷
说明：上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值
在这里插入图片描述

2.父子元素塌陷
说明：父子元素之间也会出现margin塌陷，父元素和子元素都设置了同方向的margin-top值，两个属性之间灭有其他的内容进行隔离，导致两个属性相遇，发生margin塌陷
在这里插入图片描述
3.解决margin 塌陷问题的方法
a、同级元素：如果两个元素垂直方向有间距，只需设置给一个元素，不要进行拆分设置两个元素
b、父子元素：让两个边距不要相遇，中间可使用父元素border或padding将边距分隔开；更加常用的方法，父子盒子模型之间的距离就不要用子元素的margin去踹出来，而父级的padding挤出来
注意：水平方向的margin没有塌陷现象

标准文档流

说明：
1.标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式，前面内容发生变化后面内容的位置也会随着发生变化
2.HTML就是一种标准文档流文件
3.HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级

1.微观现象

	a、空白折叠现象
	b、文字类的元素如果排在一行会出现一种高低不齐、底边对齐的效果
	c、自动换行，元素内一行内容写满元素的width时会自动进行换行