杂文

2018-03-19  本文已影响0人  春铃邃晓

写个编辑器、组件、博客、阅读器、Chrome插件、日程管理、普通的单页、小游戏等。

语法 作用
column-count: auto/整数； 控制栏数
column-width: auto/length; 每栏的宽度
column-gap:length 两栏之间的距离
column-rule:宽度，线型，颜色； 栏与栏之间的间隔线，类似border/solid/dotted/dashied

column-width和column-count可以让一个元素进行多列布局
column-gap和column-rule就处在相邻两列之间

4 弹性布局
优点：
a.实用性强，可以做不同屏幕分辨率的界面时非常实用
b.可以随时按照宽度、比例划分元素的宽高
c.可以轻松改变元素的显示顺序
d.弹性布局实现快捷，易维护

语法 作用
display:box; 将一个元素的子元素以弹性布局进行布局
box-orient:horizontal / vertical / inherit 子元素排列方式
box-direction:normal / reverse / inherit 子元素的排列顺序
box-align:start / end / center 子元素的对齐方式 (规定水平框中垂直位置 或 垂直框中水平位置)
box-pack: start / end / center 子元素的对齐方式(规定水平框中水平位置 或 垂直框中垂直位置)
box-flex:number; 子元素如何分配剩余空间
box-ordinal-group:number; 子元素显示顺序

5 响应式布局
一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本

@media all(用于所有的设备) 
|| screen (用于电脑屏幕,平板电脑,智能手机等)  and|not|only(三个关键字可以选)

<style media="screen">
    @media screen and (max-width:600px){
      .con{
        background:red;
      }
    }
    @media screen and (min-width:600px) and (max-width:800px){
      .con{
        background:blue;
      }
    }
    @media screen and (min-width:800px){
      .con{
        background:green;
      }
    }
    .con{
      width: 100%;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="con">

  </div>
</body>

<head> 
     <style type="text/css"> 
            ...此处写CSS样式 
      </style> 
</head>

这种方法的使用情况要少的多，最长见的就是访问量大的门户网站。或者访问量较大的企业网站的首页。
3 导入式

<head> 
     <style type="text/css"> 
            @import url(mystyle.css);
      </style> 
</head>

在整个网页装载完之后再装载CSS文件。
问题是：如果网页内容较大则会先显示无样式的页面，闪烁一下，再出现网页的样式

4 链接式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
以网文件主体装载CSS文件，因此显示出来的网页从一开始就是带样式的效果

总结：
一般来说，做网站时把样式多写在多个样式表文件中，因此先用链接式引入一个总的CSS文件，然后在这个CSS文件中再使用导入式来引入其他的CSS文件。但如果通过JavaScript来动态引入CSS文件，则只能使用链接式。

.clearfix:after {
              display: block;
              content: '';
              clear: both;
              height: 0;
        }
上一篇 下一篇

猜你喜欢

热点阅读