CSS学习笔记

山荷枝

已于 2024-12-01 01:04:32 修改

阅读量2.2k

点赞数 23

CC 4.0 BY-SA版权

文章标签： css html5

于 2024-11-10 19:39:34 首次发布

本文链接：https://blog.csdn.net/cfy264269/article/details/143658033

1.css的字体大小

1.属性名：font-size

2.语法：div{

font-size：40px；

}

3.注意点

①chrome浏览器支持的最小文字为12px，默认的字体大小为16px，且0px会自动消失。

②不同浏览器默认的字体大小可能不一致，最好给一个明确的值。

③通常给body设置font-size属性，这样body中其他元素就都可以继承了。

2.字体族

1.属性名：font-family

div{

font-family：“STCaiyun”

}

注意：①使用字体的英文名字兼容性更好

②serif称线字体 sans-serif非称线字体

③可以用中文微软雅黑宋体楷体华文彩云等

3.字体风格

1.属性名：font-style

2.常用值

①normal：正常（默认值）

②italic：斜体（使用字体自带的斜体效果）

③oblique：斜体（强制倾斜产生的斜体效果）

3.语法：div{

font-style：italic

}

4.字体粗细

1.属性名：font-weight

2.常用值：lighter（细） normal（正常）bold（粗）bolder（很粗）以及数字

3.100-300等同于lighter ，400-500等同于normal，600及以上等同于bold

5.字体的复合写法

1.属性名：font

2.编写规则：①字体大小，字体族必须都写上

②字体族必须最后一位，字体大小必须是倒数第二位

③各个属性间用空格隔开

6.文本颜色

1.属性值：color

2.可选值：颜色名、rgb或rgba、HEX或HEXA（十六进制）、HSL或HSLA

7.文本间距

字母间距：letter-spacing

单词间距：word-spacing

属性值为像素px，正值让间距增大，负值让间距缩小

8.文本修饰

1.属性名：text-decoration

2.可选值：none（无装饰线）underline（下划线）overline（上划线）line-through

（删除线） dotted（虚线） wavy（波浪线）

3.实例

text-decoration：none；

}

9.文本缩进

1.属性名：text-indent

2.属性值：长度单位（px）

（如果文字大小为20px，那么缩进40px就是缩进两个字，60px就是三个字）

10.文本对齐-水平

1.属性名：text-align

2.常用值：left（左对齐）right（右对齐）center（居中对齐）

11.行高

1.属性名：line-height

2.可选值：normal（默认值）、px、数字（参考font-size的倍数）、百分比（参考自身font-size的百分比）

3.实例

div{

line-height：60px；

line-height：1.5；

line-height：150%；

}

4.注意事项

12.文本对齐-垂直

1.顶部：无需任何属性，在垂直方向上，默认就是顶部对齐

2.居中：对于单行文字，让height=line-height即可

3.对于单行文字，方式；让line-height=（height*2）-font-size-x

x是根据字体族动态决定的一个值

13.vertical-align

1.属性名：vertical-align

2.作用：用于指定的同一行元素之间，或表格单元格内文字的垂直对齐方式

3.常用值：baseline（默认值）:是元素的基线与父元素的基线对齐

top：使元素的顶部与其所在行的顶部对齐

middle：使元素的中部与其父元素的基线加上父元素字母x的一般对齐

bottom：使元素的底部与其所在行的底部对齐

4.此属性名可以用在图片上，但是不能控制块元素

14.css的列表属性

15.css的表格属性

边框的复合写法

border：1px solid red；

16.css的背景属性

17.css的鼠标属性

18.css的盒子属性

1.css的长度单位

px（像素）、em（相对元素font-size的倍数）、rem（相对字体大小，html标签就是根）

%（相对父元素计算）

19.元素的显示模式(行内块)

实例

div{

display：inline-body

}

作用：使元素从左往右排列，在页面中不独占一行

1.块元素（block）

特点：①在页面中独占一行，不会与任何元素共用一行，是从上到下排列的

②默认宽度：撑满父元素

③默认高度：由内容撑开

④.可以通过css设置宽高

⑤特殊作用：可以使用在页面制作上，放在hover的里面，用作display：block可以使隐藏的内容显现（鼠标放在上面显现，不放在上面不显示，具体运用见尚硅谷153集）

2.行内元素（inline）

特点：

①在页面上不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列

②默认宽度：由内容展开

③默认高度：由内容展开

④无法通过css设置宽高

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

特点：

①在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列

②默认宽度：由内容撑开

③默认高度：由内容撑开

④.可以通过css设置宽高

20.总结·各元素的显示模式

21.修改元素显示模式

通过css中的display属性可以修改元素的默认模式

常用值：none（元素会被隐藏）

block（元素将作为块级元素显示）

inline（元素作为内联元素显示）

inline-block（元素作为行内块元素显示）

22.盒子模型的组成

margin（外边距）:盒子与外界的距离

border（边框）：盒子的边框

padding（内边框）：紧贴内容的补白区域

content（内容）：元素中的文本或后代元素都是他的内容

盒子大小=content+左右padding+左右border

23.盒子的内容区

width（长度）：设置内容区域宽度

max-width（长度）：设置内容区域的最大宽度

min-width（长度）：设置内容区域的最小宽度

height（长度）：设置内容区域高度

max-height（长度）：设置内容区域最大高度

min-height（长度）：设置内容区域最小高度

24.关于默认宽度

所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度

总宽度=父的content-自身的左右margin

内容区的宽度=父的content-自身的左右margin-自身的左右border-自身的左右padding

25.盒子的内边距

26.盒子的外边距margin

27.margin塌陷以及合并问题

什么是margin塌陷？

第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上

如何解决margin塌陷？

方案一：给父元素设置不为0的padding
方案二：给父元素设置宽度不为0的border
方案三：给父元素设置css样式overflow：hidden

什么是margin合并？

上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

如何解决margin塌陷？

无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

28.处理内容溢出

overflow（溢出内容的处理方式）

visible：显示，默认值
hidden：隐藏
scroll：显示滚动条，不论内容是否溢出
auto：自动显示滚动条，内容不溢出不显示

overflow-x（水平方向溢出内容的处理方式，同overflow）

overflow-y（垂直方向溢出内容给的处理方式，同overflow）

29.auto的使用

auto是一个特殊的值，它表示“自动适应”

auto可以用于height、width、margin、padding、flex-grow和flex-shrink等属性。
当应用于height或width时，auto会使元素的高度或宽度自动适应其内容。
对于margin，auto通常用于水平居中元素，例如margin: 0 auto;会使元素的上下边距为0，左右边距自动适应，使元素在父元素中水平居中。
在padding属性中，auto可以自动计算元素的内边距，使元素内容与元素边框之间的距离相等。
在flex布局中，auto值可以帮助元素自动分配剩余空间或自动缩小以适应容器。