CSS样式如何组织规划？将样式写的简洁，重用性强。

html-css018

CSS样式如何组织规划？将样式写的简洁，重用性强。,第1张

建议你选择你所说的“针对样式的功能写样式”，其实样式CSS只需要写一个就可以，只要你写的CSS文件不超过30K，那么建议你尽量将CSS代码都存在一个CSS文件中，但是如果你怕自己分不清或者难以找到自己想要修改的CSS文件，你也可以分别建立CSS，如首页使用的CSS就可以命名为index.css，列表页可以命名为list.css等等。这样一看就知道是哪里的样式了。

css大致有4个级别，一个是浏览器默认css，一个是外部css，一个是内部css，一个是内联css，他们的优先级逐渐提高，也就是内联css优先级最高，何为内联，就是标签里设置的css样式，举个例子<p style="color:red">this is a paragraf.</p>这里直接在标签里设置的样式就是内联样式，而内部css就是在本页面里<style type="text/css">.body{color:red}</style>来书写的css，而外部css就是引入的外部css样式表了。下面说一下css样式表的设计，刚开始的时候，我感觉如果2个选择器，或者多个选择器拥有相同的css样式，就应该将他们合并，这样既可以节省空间，有方便查看，但是，我的想法在实践中被无情的打击了，当你设计一个大型网站的css时，每一个选择器他们的样式是不固定的，有时候可能会不停的改变，这样入过一个样式修改了，和他公用的选择器怎么办？

很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。

学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊- 点击此处 ，

同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。

————————————————

1.什么是flex

flex 是 Flexible Box 的缩写,意为 弹性布局

flex布局中把一个元素作为容器，容器中的子元素称为项目

可以通过容器的flex属性，设置所有项目的排列样式。也可以通过项目的flex属性，设置指定项目的排列样式。

2.flex布局的方向

flex布局项目的排列方向可以有两个维度，一水平，二垂直

项目排列方向称为主轴，与主轴垂直的方向叫交叉轴

在每个轴上有两个方向，从左至右，从右到左；从上到下，从下到上。

2.1 flex水平布局

在水平维度，默认方向是从左至右

可以通过 flex-direction：row-reverse设置为从右到左排列

效果图：

1).默认方向,从左至右

2).反方向

2.2 垂直布局

效果图：

1).默认方向，从上到下

2).反方向

3. 容器内项目换行

通过flex-wrap属性，设置项目在容器内是否可以换行，默认不允许换行。

不换行的称为单行容器，换行的称为多行容器

也可以通过flex-flow属性同时设置容器主轴方向和是否换行（推荐使用）

效果图：

1).默认不允许换行，项目被压缩

2).允许换行，当剩余宽度不足容纳一个项目块时，就换行

相关知识：

css如何实现边框长度控制功能

详细介绍css中的数学表达式calc()

关于书籍：需要学习资料的小伙伴们可以加群， 点击此处