CSS 基础

2019-08-09 本文已影响0人叮铃桄榔_f7cb

css规范： css书写规范 - 追求极致 - 博客园

（1）Class 和 ID

使用语义化、通用的命名方式；
使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和 " _ " ；
id采用驼峰式命名(不要乱用id)scss中的变量、函数、混合、placeholder采用驼峰式命名；
避免选择器嵌套层级过多，尽量少于 3 级；
避免选择器和 Class、ID 叠加使用；

（2）媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

（3）去掉小数点前面的0： 0.9rem => .9rem

1.css3新增属性

（1）过渡 transition
（2）animation 动画
（3）transform ：scale、rotate、translate、skew
（4）选择器 [attribute^=value] first-of-type nth:child :last-child
（5）渐变
（6）filter 滤镜
（7）弹性布局 flex
（8）栅格布局 grid
（9）盒模型 box-sizing
（10）媒体查询 @media
（11）阴影 box-shadow:h-shadow v-shadow blur spread color inset;

（12）border-image border-radius
（13）background-clip borderground-origin background-size
（14）换行 word-break:normal / break-all / keep-all

超出显示省略号
(单行)： over-flow:hidden;text-overflow:ellipsis;white-space:nowrap;
(多行)： over-flow:hidden;text-overflow:ellipsis;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
--- 防止第三行文字显示：padding:0 10px;line-height:30px;height:30px;
--- 连续字母或数字的强制换行：white-space:normal; word-break:break-all;

（15）文字阴影 text-shadow
（16）颜色 rgba hsla

2.双飞翼布局 -- 左右固定，中间自适应

（1）flex 布局：

<div class="content">
    <div class="sub"></div>
    <div class="main"></div>
    <div class="extra"></div>
</div>

.content { display: flex; }
.sub { width: 200px; height: 500px; background: blue; }
.main { flex: 1; height: 500px; background: red; }
.extra { width: 180px; height: 500px; background: green; }

（2）

<div class="content">
    <div class="main"></div>
    <div class="sub"></div>
    <div class="extra"></div>
</div>
.main{ float: left; width: 100%; height: 500px; background:red; }
.sub{ position: relative; float: left; left: -200px; width: 200px; height: 500px; margin-left: -100%; background:blue; }
.extra{ position: relative; float: left; right: -180px; width: 180px; height: 500px; margin-left: -180px; background:green; }
.content{ padding: 0 180px 0 200px; position: absolute; }

（3）

<div class="content">
<div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>

.content{ float: left; width: 100%; height: 500px; background:red; }
.sub{ float: left; width: 200px; height: 500px; margin-left: -100%; background:blue; }
.extra{ float: left; width: 180px; height: 500px; margin-left: -180px; background:green; }
.main{ margin: 0 180px 0 200px; }

3.左右布局

（1）table

<table class="sTable">
    <tr>
        <td class="col-4 c1">1</td>
        <td class="col-4 c2">2</td>
        <td class="col-4 c3">3</td>
        <td class="col-4 c4">4</td>
    </tr>
    <tr>
         <td class="col-4 c5" colspan="2">5</td>
<td class="col-4 c6" colspan="2">6</td>
    </tr>
</table >

（2）inline-block （另：它不支持ie6、7浏览器，请注意，但是可以使用inline进行hack处理）、float 、position:absolute左右布局原理一样

<div class="wrap">

<div class="col-4 c1">1</div>

<div class="col-4 c2">2</div>

</div>

.col-4 { display: inline-block; *display: inline; *zoom: 1; //ie6、7hack width: 50%; height: 30px; border: 1px solid #999; font-size: 14px; }
.wrap { margin: 10px auto; font-size: 0px; }

3.左边固定右边自适应布局

<div class="outer">
<div class="sidebar">固定宽度区(sideBar)</div>
<div class="content">自适应区(content)</div>
</div>

（1）将左侧div浮动，右侧div设置margin-left

.sidebar{float: left;width:200px;height: 150px; background: #BCE8F1;}
.content{margin-left:200px;height:100px;background: #F0AD4E;}

（2）固定区采用绝对定位，自适应区设置margin

（3）tabel （父元素高度会随着子元素最高的一边变化）

.outer3{display: table;width:100%; border: 1px solid red;}
.sidebar3{display:table-cell;width:200px; background: #BCE8F1;}
.content3{display:table-cell; background: #F0AD4E;}

（4）双float + calc()计算属性

.outer4{overflow: hidden; border: 1px solid red;}
.sidebar4{float:left;width:200px;background: #BCE8F1;}
.content4{float:left;width:calc(100% - 200px);background: #F0AD4E;}

（5）flex

.outer7{display: flex; border: 1px solid red;}
.sidebar7{flex:0 0 200px;height:150px;background: #BCE8F1;}
.content7{flex: 1;height:100px;background: #F0AD4E;}

4.父子元素高度都不确定，实现垂直居中

（1） position

.parentElement{position:relative;}

.childElement{ position: absolute; top: 50%; transform: translateY(-50%); }

（2）flex --- 设置 align-items:center