CSS与CSS3 · 万能Web开发文档笔记

# CSS与CSS3 定位 ``` <pre class="calibre14">``` .c{ position: absolute;//脱离文档绝对定位 relative 相对定位 fixeld 不滚动 static 默认 z-index: 1;层关系 top: auto; left: auto; right: auto; bottom: auto; } ``` ``` 布局 ``` <pre class="calibre14">``` .c{ display:inline;默认内联元素 none 隐藏 block 块元素 inline-block 内联块元素 float:none;不浮动 left right clear: both;清除浮动 visibility: visible;对象可视 hidden对象隐藏 overflow: visible;溢出内容不作处理,可能超出容器 hidden隐藏不出现滚动条 scroll滚动 auto溢出出现滚动,不溢出没有 overflow-x: visible; overflow-y: visible; 同上,表示水平方向和垂直方向 } ``` ``` 尺寸,支持像素 em 百分比等 ``` <pre class="calibre14">``` .c{ width: auto; 12px 10% min-width: 0; max-width: none;没有最大宽度 height: auto; min-height: 0; max-height: none; } ``` ``` 内外补白 ``` <pre class="calibre14">``` .c{ margin: auto;可以负值 margin-top: auto;上 margin-bottom: auto;下 margin-left: auto; margin-right: auto; padding: 1px;不可以负值,也没有自动 padding-bottom:1%; padding-top: inherit; padding-left: inherit; padding-right:1px; } ``` ``` 边框 ``` <pre class="calibre14">``` .c{ border: 1px solid #fff; border-width: 1px; border-style: solid;实线 none;没有边框,默认值 dotted;点状 dashed;虚线 border-color: #fff; border-top: 1px solid #fff; border-bottom: !important; border-left: !important; border-right: !important; } ``` ``` 背景 ``` <pre class="calibre14">``` .c{ background:url(test1.jpg) no-repeat scroll 0% 0%; background-color: transparent;默认透明 background-image: none;无图 url(1.img) background-repeat: repeat;平铺 no-repeat 不平铺 repeat-x ;repeat-y 横纵平铺 background-attachment: scroll; 滚动 fixed;固定 background-position: 0% 0%; left center right top bottom; background-origin: padding-box;背景从content显示 border-box;从border区域开始 padding-box;从padding开始 background-clip: border-box;从padding向外剪裁 border-box;从border开始,不含 content-box;从content开始剪切 text;从内容开始 background-size: auto;背景大小自动 cover;等比缩放完全覆盖,会出容器 contain;等比缩放宽高和容器相等,始终在容器内 } ``` ``` 颜色 ``` <pre class="calibre14">``` .c{ color: #FFF;文本颜色 opacity: 1;1是不透明 0完全透明取值0.0-1 } ``` ``` 字体 ``` <pre class="calibre14">``` .c{ font: 12px Simsun,arial,sans-serif; font-style: normal;字体正常 italic;斜体 font-weight: normal;正常相当于400 bold 粗体相当于700 bolder 特粗相当于b strong font-size:12px; font-family: arial; } ``` ``` 文本 ``` <pre class="calibre14">``` .c{ text-transform: none; capitalize;首字母大写 uppercase;转换大写 lowercase;转小写 white-space: normal;空格处理默认 pre-wrap;不合并空白,边界处换行 nowrap;强制同一行显示,合并多余空白,直到br word-break: normal;换行 break-all; word-wrap: normal; break-word;边界处换行 text-align: center;left;right; text-indent: 0;缩进 vertical-align: baseline; sub;下标 super;上标 middle;居中 line-height: normal;行高 } ``` ``` 列表样式 ``` <pre class="calibre14">``` .c{ list-style:disc outside none; list-style-image: none;不指定图像 list-style-position: outside;文本以外 inside;文本以内 list-style-type: disc;实心圆 circle;空心圆 square;实心方块 decimal;数字 none;不使用 } ``` ``` 表格样式 ``` <pre class="calibre14">``` .c{ border-collapse: collapse;合并边框 } ``` ``` 用户界面 ``` <pre class="calibre14">``` .c{ text-overflow: clip;文本溢出不显示... ellipsis;显示 outline: none;轮廓样式无轮廓 cursor: pointer;手 move移动支持url() box-sizing: content-box;盒子padding和border不包括在宽高内 border-box;包含内; user-select:text;可以选择文本 none;文本不能选择 } ``` ``` 选择 ``` <pre class="calibre16">``` ul>li{ //子选择器 } ul li{ //包含选择 } p+p{ //相邻选择 } p~p{ //兄弟选择 } input[type="text"]{{ //属性选择 } a:link{ } a:visited{ } a:hover{ } a:active{ } a:focus{ } ul li:first-child{ //第一个 } ul li:last-child{ //最后一个 } ``` ```