css基础 2018-04-10

2018-04-15 本文已影响0人 H_uan

css （Cascading Style Sheets 层叠样式表）
css历史：英文维基百科

周边工具

LESS CSS
一种简化、功能更多的 CSS 语言中文官网英文官网
SASS
一种简化、功能更多的 CSS 语言（请自行搜索中英文官网）
PostCSS
一种 CSS 处理程序

建议，先不要看周边工具，学好最朴素的 CSS，然后升级就很容易了。

CSS 学习资源

建议：中文学习资源只看大 V 的（毕竟他们要维护形象不能瞎写），英文资源看 CSS Tricks、MDN 和 Codrops。书的话作用不大，最权威的书其实是文档。（google搜 css spec）

开始写CSS

1.引入 CSS 的三/四种方式

内联： <body bgcolor="#B2B2B2"></body> <body style="background-image: #eee;"></body>
标签：a{color:"#eee"}
导入式：@import"mystyle.css"
链接式：<link rel="stylesheet" type="text/css" href="css/a.css"/>

2.float布局

给所有子元素加上float:left
给浮动的父元素加clearfix类

.clearfix::after{
    content:'';
    clear: both;
    display: block;
}
.clearfix{
    zoom: 1;//ie6
}

浏览器默认字体大小：font-size:16px

3.高度与文档流

文档流：文档内元素流动方向
内联元素:从左往右流动，宽度不够，另起一行
默认<span>中文/English</span>中文放不下会截断，英文不会
word-break:break-all;强制打断
内联元素高度 line-height 的值是多少像素，那么 span 所占的高度就是多少。
块级元素:从上往下流动，每一个块占一行
块级元素高度由其内部文档流元素的高度总和决定

4.脱离文档流的方式

position:fixed;
position:absolution;
注意：元素用了position:fixed;后，设置了width:100%;再设置padding会溢出，解决方式，再加一个盒子，盒子里面设置padding

5.注意：

display:inline-block;vertical-align:top;共同使用，避免有下缝隙

css小例子

css写三角形

<div class="triangle"></div>

.triangle{
  width:0px;
  height:0px;
  border:10px solid #111;
  border-top-color:transparent;
  border-left-color:yellow;
  border-bottom-color:transparent;
  border-right-color:transparent;
  border-top:0px;  
}

*　太极八卦图

<div class="gossip"></div>

        <style type="text/css">
            .gossip{
                position: relative;
                width: 200px;
                height: 200px;
                border: 1px solid #111;
                border-radius: 50%;
                background: linear-gradient(to bottom,#fff 0%,#fff 50%,#000 50%,#000 100%); 
                
            }
            .gossip:before{
                content: '';
                width: 20px;
                height: 20px;
                background: #fff;
                border:40px solid #000;
                border-radius: 50%;
                position: absolute;
                top: 25%;
            }
            .gossip:after{
                content: '';
                width: 20px;
                height: 20px;
                background: #000;
                border:40px solid #fff;
                border-radius: 50%;
                position: absolute;
                top: 25%;
                left: 50%;
            }
            
        </style>