CSS ｜青训营笔记

最新推荐文章于 2024-09-15 21:53:51 发布

wkxjhngw

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量80

点赞数

文章标签： css html css3 前端 javascript

本文链接：https://blog.csdn.net/weixin_50945128/article/details/129377770

版权

这是我参与「第四届青训营」笔记创作活动的的第2天

CSS

CSS规则 = 选择器 + 声明块

css h1{ color:red; background-color:lightblue; text-align: center; }

选择器

选择器：选中元素

ID选择器

```html

这是一个段落

```

元素选择器

```html

这是一个标题

```

类选择器

```html

```

通配符选择器

*，选中所有元素

html <style> *{ margin: auto; } </style>

属性选择器

根据属性名和属性值选中元素

css /* 选中所有具有href属性的元素 */ [href]{ color:red; }

伪类选择器

选中某些元素的某种状态

1)link: 超链接未访问时的状态

css a:link { color: chocolate; }

2)visited: 超链接访问过后的状态

css a:visited { color: rgb(113, 133, 0); }

3)hover: 鼠标悬停状态

css /* 选中鼠标悬停时的a元素 */ a:hover{ color:red; }

4)active：激活状态，鼠标按下状态

css /* 鼠标按下时的a元素 */ a:active{ color:#008c8c; }

爱恨法则

link > visited > hover > active

```html

Document

特殊的两个CSS取值：
- inherit：手动(强制)继承，将父元素的值取出应用到该元素
- initial：初始值，将该属性设置为默认值

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域(盒子)

display默认值为inline (没有声明display时)

盒子的组成部分

在这里插入图片描述

无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：

内容 content

width、height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的内容盒 content-box

填充(内边距) padding

盒子边框到盒子内容的距离

padding-left、padding-right、padding-top、padding-bottom

简写属性

padding: 上右下左

填充区+内容区 = 填充盒 padding-box

边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框样式：border-style
边框宽度：border-width
边框颜色：border-color

边框+填充区+内容区 = 边框盒 border-box

外边距 margin

边框到其他盒子的距离

margin-top、margin-left、margin-right、margin-bottom

速写属性margin

比较块盒、行盒、行块盒

块盒
可以设置宽高大小
默认宽度为100%
独占一行
p ul li h1~h6 div form table
行盒
无法设置宽高
元素大小随内容变化
所有元素默认排在一行
i b span a
行块盒
可以设置宽高大小
能排在一行显示
img input

盒模型应用

改变宽高范围

默认情况下，width 和 height 设置的是内容盒宽高。

衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒

解决方法： 1. 精确计算 2. CSS3：box-sizing

例：

css <style> .text{ width: 100px; height: 200px; padding-left: 20px; border: solid 1px red; } </style>

效果如下在这里插入图片描述修改如下 css <style> .text{ width: 100px; height: 200px; padding-left: 20px; border: solid 1px red; box-sizing: border-box; } </style> 结果如下

改变背景覆盖范围

默认情况下，背景覆盖边框盒

可以通过==background-clip==进行修改 css .text{ width: 200px; height: 600px; padding: 10px; border: 5px dashed red; background: #008c8c; background-clip: padding-box; } 效果如下在这里插入图片描述

溢出处理

==overflow==，控制内容溢出边框盒后的处理方式

visible：可见(默认) hidden：隐藏 scroll：滚动条(可通过overflow-y(x)：使滚动条只纵向(横向)出现) auto：滚动条自动出现

在这里插入图片描述

断词规则

==word-break==，会影响文字在什么位置被截断换行

normal：普通。CJK字符(文字位置截断)，非CJK字符(单词位置截断)
break-all：截断所有。所有字符都在文字处截断
keep-all：保持所有。所有文字都在单词之间截断

空白处理

==white-space: nowrap==(不换行)

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li{ border-bottom: 1px dashed #ccc; line-height: 2; border-left: 3px solid #008c8c; padding-left: 10px; margin: 1em 0; width: 300px; white-space: nowrap;/*不换行 */ overflow: hidden;/* 溢出隐藏 */ text-overflow: ellipsis;/*文字溢出的部分用用圆点代替*/ } </style> </head> <body> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Debitis facilis aperiam nam autem. Sed, quisquam velit.</li> <li>Mollitia consequuntur veritatis doloribus odit qui fuga id!</li> <li>Itaque quam, dolores perferendis reprehenderit harum laboriosam! Alias?</li> <li>Enim laborum quas rem distinctio corrupti quo ad?</li> <li>Deleniti voluptate laboriosam quos distinctio fuga, at sint!</li> <li>Enim labore culpa soluta placeat harum, iste ex.</li> <li>Error quibusdam quidem minus voluptas, similique aliquid iste.</li> <li>Nemo nam sit architecto facere non, quae similique?</li> <li>Placeat et cumque maxime minus, ducimus hic esse.</li> </ul> </body> </html> 效果如下在这里插入图片描述