乐趣区

关于css:CSS样式全部属性和难记忆点归纳

有一些 CSS 的冷门款式太多了,然而又想记住,能够看这篇文章,这篇文章包含了一些 css 须要记忆的一些属性,不包含平时常常应用的(置信你曾经接触的太多了)

伪类选择器

:link 未拜访
:visited 已拜访
:hover 鼠标挪动到链接上
:active 选定的链接

文字暗影

简写:
text-shadow: 程度地位 垂直地位 含糊间隔 暗影色彩;

text-indent:首行缩进 ;
word-spacing: 单词间距;
letter-spacing: 字间距;

link 答疑

type="text/css"在 link 中能够疏忽不写,写了比拟标准,rel 定义以后文档和被链接文档之间的关系,在这里须要指定为“stylesheet”,示意被链接的文档是一个款式文件

行内元素 & 块级元素

行内元素 :高宽有效, 程度的 paddingmargin无效,但垂直方向有效

常见的行内元素:<a> <strong> <b> <i> <del> <s> <ins> <u> <span>

块级元素:高宽无效,都能够自定义

选择器

交加选择器

p.one{color:red;font-size:14px;}

是“即 … 又 … 的意思”,p.one抉择的是类名为.one 的 段落标签

并集选择器(逗号宰割)

.one,p,#test{color:red;}

伪元素选择器

E::first-letter 文本的第一个单纯或字

E::first-line 文本第一行

E::selection 扭转文本选中的款式(有点好用)

E::befor 和 E::after 该元素是行内元素 联合 content 应用

“:”和“::”在于辨别伪类和伪元素

背景(background)

background-image:none/url(url)
属性 作用
background-color 背景色彩 色值 /inherit(继承父元素)/transparent(默认)
background-image 背景图片地址 none/url()
background-repeat 是否平铺 repeat/no-repeat/repeat-y/repeat-x
background-position 背景地位 length length (百分数) / positon postion(top/center/bottom/left/right)
background-attachment 背景是固定还是滚动 scroll(滚动) fixed(固定)
背景的合写(复合属性)
background: 背景色彩 背景图片地址 背景平铺 背景滚动 背景地位; background: transparent url(*1111.jpg*) no-repeat scroll 50% 0;
background-size 设置图片尺寸 px 百分比 /cover(保障填充斥背景区域,溢出局部暗藏)/contain(保障图片始终残缺显示在背景区域) 例如:background-size:50%;比原来小一半

个别应用习惯(参考):

  .img {
            width: 400px;
            height: 400px;
            border: 1px solid #fff;
            background: #fff url(1111.jpg) no-repeat;
            background-position: 30px 50px;
            background-size: 200px 210px;
        }

文本润饰

`text-decoration`   润饰文本
形容
none 默认
underline 定义文本下的一条线。下划线自带的
overline 定义文本上的一条线
line-through 定义穿过文本的一条线

盒子模型

应该都比拟相熟,只讲几个比拟容易遗记的属性

border-style

属性 作用
none 没有边框
solid 边框是单实线(罕用)
dashed 边框为虚线
dotted 边框为点线
double 边框为双实线

表格 table 的边框

table{border-collapse:collapse;}collapse 单词是合并的意思。示意边框合并在一起

外边距实现盒子居中

能够让一个盒子实现程度居中:

.header{width:960px; margin:0 auto;}

文字居中:text-align:center;

相邻块元素垂直外边距的合并(容易呈现的 bug)

1. 高低相邻的元素,上:margin-bottom,下:margin-top, 会产生合并(外边距塌陷),合并的边距值等于其中大的那者

解决办法:防止

2. 嵌套元素垂直外边距的合并

解决方案:
1. 为父元素定义 1 像素的上边框
2. 能够为父元素增加:overflow:hidden(触发 BFC)

CSS 盒模型

box-sizing:content-box; 默认

box-sizing:border-box; 盒子大小为 width,也就是说paddingborder都蕴含到了 width 外面

盒子暗影

box-shadow: 程度 垂直 含糊间隔 暗影尺寸 色彩 内 / 外暗影;

想要内暗影就用 inset

理论用法:box-shadow:0 15px 30px rgba(0,0,0,.4);

CSS 定位

CSS 的定位机制有三种:一般流(规范流 )、 浮动 定位

革除浮动

解决父级元素因为子浮动引起的外部高度为 0 的问题
利用场景:比方文章,做瀑布流布局等等,很多时候咱们不须要给父盒子高度,因为比方文章的内容你是无法估量其高度的,咱们须要自适应地撑开盒子。所以才会革除浮动。

解决办法:

1. 选择器{clear:both;}

2. 父级增加overflow:hidden;,触发 BFC 的形式实现革除浮动成果

3.:after 案例:百度 淘宝网 网易

 .clearfix::after{
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix{*zoom: 1;}

4.beforeafter 案例:小米 腾讯 代码更简洁

  .clearfix::after,.clearfix:before {
            content: ".";
            display: table;/* 这句话能够触发 BFC */
        }

        .clearfix::after {clear: both;}

        .clearfix {*zoom: 1;}

给父盒子的 class 属性增加 clearfix 就能够应用了

定位

形容 是否脱标占用地位 挪动地位基准
static 主动定位(默认) 不脱标,失常模式 失常模式
relative 绝对定位 不脱标,占有地位 绝对本身地位挪动(自恋型)
absolute 相对定位 齐全脱标,不占有地位 绝对于定位父级挪动地位(拼爹型)
fixed 固定定位(绝对于浏览器窗口进行定位) 齐全脱标,不占有地位 绝对于浏览器挪动地位(认死理型)

Tip:“子绝父相”牢记于心

相对定位中的盒子程度 / 垂直居中

相对定位的盒子 margin 有效

解决办法:

  1. left:50%
  2. 走本人外边距负的一半:margin-left

z-index

默认是 0,属性越大,定位元素地位越居上。

只有 relative,absolute,fixed 能够应用这个属性

元素的显示暗藏

overflow display visibility 比拟常见

display

none 暗藏对象
block 转换块级元素,显示元素

visibility

visible 对象可见
hidden 对象可视

overflow

auto 超出主动显示滚动条,不超出不显示滚动条
hidden 不显示超过对象尺寸的内容,超出的局部暗藏
scroll 不论超出内容否,总是显示滚动条

CSS 高级技巧

鼠标 cursor

cursor:default 小白  |  pointer 小手  |  move 挪动  |  text 文本;

尽量不要用 pointer,火狐不反对 pointer ie6 以上反对

轮廓 outline

outline:outline-color || outline-style  ||  outline-width

个别不会关怀设置多少,去掉就好:outline:0; 或 outline:none;
(比方在点击表单 input 时候会默认有一个彩色轮廓,咱们能够去掉,也能够用 outline-color: red; 扭转轮廓色彩)

避免拖拽文本域 resize

resize:none能够避免 火狐 谷歌 等浏览器随便拖拽 textarea 毁坏布局

vertical-align 垂直对齐

它不影响块级元素的内容对齐,只针对行内和行内块元素,通常用来管制图片 / 表单与文字的对齐

MDN 文档讲述这个属性很棒:

   链接:[https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align](https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align)

去除图片底侧空白缝隙

图片或表单等行内元素,它的底线和父级盒子的基线对齐。这样会造成一个问题,图片底侧会有一个空白缝隙。

解决办法:

  1. 给 img vertical-align:middle | top;等等。让图片不要和基线对齐
  2. 给 img 增加display:block;

溢出的文字暗藏

word-break

次要解决英文单词

属性 作用
normal 应用浏览器默认的换行规定
break-all 运行在单词内换行
keep-all 只能在半角空格或连字符处换行

white-space

属性 作用
normal 默认
nowrap 强制在同一内显所有文本,直到文本完结或者遇到 <br> 才换行

text-overflow 文字溢出

设置一个省略标记(…)显示文本的溢出

属性 作用
clip 不显示(…),简略的裁切
ellipsis 当对象内文本溢出时显示省略标记(…)

留神首先要强制一行内显示,而后搭配 overflow:hidden; 应用

CSS 精灵图

很多图片汇合到一张内,缩小服务器承受和发送申请的次数,进步页面加载速度

应用: 用到 CSS 的 background-image,background-repeat,background-position 进行背景定位,也能够简写操作

字体图标 iconfont

长处:有文字的属性,体积小,简直反对所有浏览器,挪动端必备

格局:.svg

程序员举荐图标字体网站:http://icomoon.io(iconmoon 字库,容许用户自定义抉择图标使它们生成字型,品种很多,国外网站关上速度比较慢)

如何引入

  1. 创立 fonts 文件夹,外面蕴含了字体文件
  2. 在款式内申明字体

    @font-face {  /* 申明字体 */
      font-family: 'icomoon'; /* 本人申明的字体包 */
      src:  url('../fonts/icomoon.eot?8qhwk5'); /* 门路 */
      src:  url('../fonts/icomoon.eot?8qhwk5#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?8qhwk5') format('truetype'),
        url('../fonts/icomoon.woff?8qhwk5') format('woff'),
        url('../fonts/icomoon.svg?8qhwk5#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
    }
  3. 给盒子应用字体

    font-family:"icomoon";
  4. 盒子里增加构造

    span::before{content:"\e900";}
    或者
    <span>□<spam>/* □是从网站复制过去的(无奈看见)*/

    滑动门技术


设置导航栏时候,字数不一样多,比方图里的,怎么适应外部的文本内容呢?

办法:利用 CSS(背景地位)和盒子 padding 撑开宽度。

<li> <li>
           <a href="#">
               <span> 导航栏内容 </span>
           </a>
       </li>
 a {
            margin: 100px;
            display: inline-block;
            height: 33px;
            background: url() no-repeat;
            padding-left: 15px;
            color: #fff;
            text-decoration: none;
            line-height: 15px;
        }

        a span {
            display: inline-block;
            height: 33px;
            background: url() no-repeat right;
            padding-right: 15px;
        }
  1. a 设置背景左侧padding-left:15px;,padding 撑开适合宽度
  2. span 设置背景右侧 padding-right:15px; 剩下由文字本身撑开宽度
  3. 之所以 a 蕴含 span 是因为 整个导航都是能够点击

动画(太多,零碎学习参考文档)

CSS3 中应用 transition 能够实现补间动画(过渡成果)

语法格局:transition: 要过渡的属性 破费工夫 静止曲线 何时开始;

属性 形容 CSS
transition 简写,设置四个过渡属性 3
transition-property 规定利用过渡的属性的名字 3
transiton-duration 定义过渡成果破费的工夫。默认是 0 3
transition-timing-function 规定过渡成果的工夫曲线。默认是 ”ease” 3
transiton-delay 规定过渡成果何时开始。默认是 0 3

属性太多,看 MDN 文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition

flex 弹性布局

这块学习比拟艰难,能够参考我之前写的一篇文章
链接:https://segmentfault.com/a/1190000023520335

退出移动版