CSS样式全部属性和难记忆点(归纳)

有一些CSS的冷门样式太多了,但是又想记住,可以看这篇文章,这篇文章包括了一些css需要记忆的一些属性,不包括平时经常使用的(相信你已经接触的太多了)
CSS样式全部属性和难记忆点(归纳)_第1张图片

伪类选择器

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

文字阴影

简写:
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

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

link答疑

type="text/css"在link中可以忽略不写,写了比较规范,rel定义当前文档和被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式文件

行内元素&块级元素

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

常见的行内元素:

块级元素:高宽有效,都可以自定义

选择器

交集选择器

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 postiontop/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,会发生合并(外边距塌陷),合并的边距值等于其中大的那者
CSS样式全部属性和难记忆点(归纳)_第2张图片
解决方法:避免

2.嵌套元素垂直外边距的合并
CSS样式全部属性和难记忆点(归纳)_第3张图片
解决方案:
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 文本;
尽量不要用 hand,火狐不支持
pointer: ie6以上支持

轮廓outline

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

一般不会关心设置多少,去掉就好:outline:0;或outline:none;
(比如在点击表单input时候会默认有一个黑色轮廓,我们可以去掉,也可以用 outline-color: red;改变轮廓颜色)

防止拖拽文本域resize

CSS样式全部属性和难记忆点(归纳)_第4张图片

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 强制在同一内显所有文本,直到文本结束或者遇到
才换行

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";
    }
    或者
    /* □是从网站复制过来的(无法看见)*/

滑动门技术

CSS样式全部属性和难记忆点(归纳)_第5张图片

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

CSS样式全部属性和难记忆点(归纳)_第6张图片

  • 导航栏内容
  •  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

    你可能感兴趣的:(css,前端,html,html5)