当前位置：首页 > news >正文

css整体使用

news 文章来源：https://blog.csdn.net/lswdcyy/article/details/132378100 2024/10/6 12:18:57

文章目录

html与css
- html、css与排版
- 响应式与自适应布局
- - 自适应布局
  - 响应式布局
- css规则
- - class、id、以及默认的标签名的优先级
- css书写位置
- flex
- - 整体逻辑
- bootstrap
- - 资源

html与css

html负责网页功能，css负责网页美化；浏览器本身有一套默认的css样式；所以有的元素会表现的不一样

html、css与排版

这里说一下对排版的个人理解：
首先整体上，不论是以前的块级元素、行级元素；还是现在的元素类别，一个元素，他都会区分为换行以及不换行的；而这个换行与不换行本质上由css决定，html的元素有些换行，有些不换行，究其原理就是css的不同默认设置。
而当不换行的时候，css就根据盒子模型不断对元素放置，外层元素要完全包含内层元素。因此整体上的表现就是一个个的元素分层次的嵌套一个又一个的元素，最终嵌套了最基本的元素。

响应式与自适应布局

自适应布局

分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。

响应式布局

响应式布局是网页的布局针对屏幕大小的尺寸而进行响应；通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；只需要开发一套界面即可适用于所有尺寸及终端。

css规则

<style>h1, h2 {color: red;background-color: lightblue;text-align: center;}h3 {color: yellow;background-color: lightblue;text-align: center;}
</style>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3><p class="class_p1">p2</p>
<p>p3</p>

css规则 = 选择器 + 声明块

选择器
用来选中元素，定义选中元素的范围

元素选择器：选中对应标签的元素

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

<h1>标题1</h1>

id选择器：选中对应id的元素

#id_p1 {color: red;
}

<p id="id_p1">p1</p>

类选择器：选中对应的类型

.class_p1 {color: lightblue;
}

<p class="class_p1">p2</p>

声明块
用来定义选择器的属性，出现在大括号中，声明块中包含多种属性，每个属性表达了一种样式规则。

class、id、以及默认的标签名的优先级

<style>.test {background: red;color: red;}#testID{background: blue;}.test2 {background: violet;}.test {background: yellow;}div{background: turquoise;border: 1px black solid;}
</style><div class="test test2" id="testID">

此时相同类型的css定义，如class，如果有重复的，那么后面的属性会覆盖前面的属性(如background)，而后面没有的属性并不会影响前面存在的属性(如color);
而不同类型的css定义，他们的优先级为标签名 < class类型 < id类型；同样的如果一个标签同时引用了三种，那么他们的会按照这个优先级顺序覆盖相同的属性，而优先级低存在的属性但是优先级高的不存在的属性则会保留;
如果class或者id引用了多个类型，那么会按照对应style定义的先后顺序生效，而不是引用顺序，如这里的class="test test2"最终生效的是test2的background，因为他定义在test之前。

css书写位置

内部样式表
即直接将<style>...</style>写在<head>...</head>中；
<style>...</style>也可以写在<body>...</body>中，但是由于浏览器是从html文件从上到下进行数据读取，渲染过程中在遇到<style>...</style>时会根据样式表重新进行渲染，可能造成闪烁问题，因此一般放在head部分，保证浏览器一开始就能读取到样式表。
内联样式表、元素样式表
即直接在元素位置加style属性：<h1 style="color: red; background: blue;"></h1>
外部样式表
将样式书写到独立的css文件中；然后使用link进行引用：
```
<link rel="stylesheet" href="css/base.css">
```

推荐使用外部样式表，理由如下：

外部样式表可以解决多页面样式重复问题，和c++头文件差不多，把重复性的都提取出来成一个外部样式表文件；
有利于浏览器缓存，提升浏览器响应速度。
有利于代码分离，更容易阅读和维护。

flex

Flexible – 灵活的
flex – Flexible Box – 弹性布局，用来为盒状模型提供最大的灵活性。

整体逻辑

整体逻辑就是一个container，然后内部容纳多个item，而属性方面有两个层次，一个是container的层次，用于描述整体排版；一个是item的层次，用于描述container存在剩余空间的时候每个item的放大缩小策略，以及一个排版布局的属性。

整体上，针对的更多的是主轴方面，而垂直轴的布局主要由容器负责管理。

当所有的项目都以 flex-basis 的值进行排列后，仍有剩余空间，那么这时候 flex-grow 就会发挥作用了。
如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。(如果有的话)
如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
当然如果当所有项目以 flex-basis 的值排列完后发现空间不够了，且 flex-wrap：nowrap 时，此时 flex-grow 则不起作用了，这时候就需要接下来的这个属性：
flex-shrink：如果空间不足，该项目将缩小，负值对该属性无效。

bootstrap

一个css库，可以用来美化界面

资源

中文文档：
http://bs4.vx.link/

资源链接：
https://www.bootstrapcdn.com/