WebFrontEnd_TL

记录自己的成长

css属性详解

CSS/CSS3

1. CSS样式

尺寸:width/min-width/max-width/height/min-height/max-height

背景:background-color/repeat/position/attachment
- repeat 背景平铺:no-repeat/repeat/repeat-x/repeat-y css3添加 round/space 图像自动缩放适应填充满容器/以相同的间距平铺且填充满容器
- attachemnt 背景关联:scroll(默认,背景随文档滚动)/fixed
- position left/center/right/top/bottom/percentage/length 背景位置

文本:text-indent/overflow/align/transform/decoration(-line/-color/-style|blink)/stroke text-fill-color word-spacing letter-spacing white-space direction vertical-align line-height
- indent 缩进文本:负值(悬挂缩进:悬挂在元素余下部分的左边) 继承
- overflow clip/ellipsis 文本溢出裁剪或显示省略号
- align left/center/right/justify两端对齐
- transform 处理文本大小写lowercase/capitalize(首字母大写)
- decoration-line none/underline/overline/line-throung
- decoration-color
- decoration-style solid/double/dotted/dashed/wavy
- blink(文本闪烁)
- text-fill-color将会覆盖color属性
- stroke stroke-width/color描边
- direction 块级元素书写方向,表中列布局方向,内容水平填充方向,两端对齐最后一行的位置
- vertical-align 默认baseline percentage/length/sub/top/text-top/middle/bottom/text-bottom
- line-height normal/percentage/length/number

字体:font-family/style/variant/weight/size/
- style 默认normal italic oblique斜体
- variant 默认normal small-caps小型大写字母
- weight 文本粗细,100~900 bold 700 normal 400 bolder lighter细体

颜色: color

链接:a:link a:visited a:hover a:active点击的时刻

列表:list-style-type/image/position
- list-style-type disc/circle/square/... 实心圆/空心圆/方块等
- list-style-position inside/outside标志出现在列表项之外还是内容内部

表格:border-collapse/spacing/ caption-side empty-cells table-layout
- border-collapse collapse是否将表格边框合并单一边框 seprate边框独立
- caption-side 表格标题位置
- empty-cells 是否显示空格单元
- table-layout 默认布局算法auto fixed

用户界面:outline-color/style/width/zoom/cursor

模型框:margin border padding element(width/height)
- margin 外边距默认透明的,因此不会遮挡其后的任何元素
- padding-top/right/bottom/left (背景色包括padding)
- border-(top/right/bottom/left)-style/width/color
- border-style solide/dotted/dashed/double
- color transparent透明
- margin-top/right/bottom/left
- 外边距合并 垂直外边距相遇(正正取大 正负相加 负负取绝对值大)

定位:position/z-index/overflow/clip/float/clear
position
- static 正常生成,默认的元素
- relative 元素框偏移某个距离,保持未定位之前的状态,原本所占的空间任然保留(限制absolute)
- absolute 元素框从文档完全删除,并相对于其包含块定位,元素原先正常文档流中所占空间关闭,包含快可能是文档中的另一个元素或是初始包含块(包含块就是含position: relative/absolute/fixed声明的父集元素,没有则是body元素) 宽高不占据任何尺寸
- fixed 类似于absolute,不过包含块是视窗本身
z-index 检索或设置层叠顺序,值越大则被层叠在最上面 必须定义position属性值为absolute、relative或fixed,此取值方可生效
overflow
- visible 默认,显示原样,不裁剪
- scroll
- auto 内容被裁剪,则显示滚动条以便查看裁剪内容
- inherit 从父元素继承overflow元素
- hidden 超出的裁剪不出现滚动条
- overflow-x/y css3属性,属性值和overflow一样
clip
- rect(t,r,b,l) 剪切成长方形
- auto 对象无裁剪
float
- none/left/right 浮动元素
clear
- none/both/left/right 允许两边有浮动元素/不允许两边有浮动元素/不允许左边浮动

选择器:
- [attribute (~/|/^/$/*)]=value ~匹配 |开头必须为value
- 后代选择器
- 子选择器>
- 相邻选择器+
- 伪元素 :before/after元素之前/后添加 :focus :first-child

高级:
- 对齐 margin position float
- 尺寸 (line/min/max)-height/weight
- 分类 clear cursor display(如何显示inline...baseline[是小写字母下的线]) visibility(元素可见否)
- 导航 display:inline float:left
- 透明度 IE8及之前filter:alpha(opacity=x)[x取值0-100] 其余opacity=x[x取值1-1.0]
- 媒介(CSS2) 定义以何种媒介提交文档 @media screen/print...

SCC3:
被拆分成”模块”,一些重要模块:选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列分布,用户界面

边框:border-redius/shadow/image

字体: font-stretch

文本: word-wrap normal/break-word

背景:background-image/size/origin/clip
- background-image 允许添加多个图片
- background-size 可定义图片大小 cover contain 填充、等比例缩放到某一边
- background-origin 背景图片的位置区域 border/padding/context-box
- background-clip 背景的绘制区域

颜色: opacity透明度 函数rgba()
- opacity是css3特性,默认1不透明

渐变:linear/radial-gradient IE10支持
语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

`linear-gradient` 默认从上到下 重复的线性渐变repeating-linear-gradient() 函数
    从左到右
    ```
        background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, red , blue); /* 标准的语法 */
    ```

    使用角度(0deg就是左到右 90deg上到下)
    ```
        background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(180deg, red, blue); /* 标准的语法 */
    ```

\- `radial-gradient` 径向渐变
    语法
    ```
    background: radial-gradient(center, shape size, start-color, ..., last-color);
    ```

\- `size` 定义了 closest-side farthest-side closest-corner farthest-corner四个值

文本效果:text-shadow/overflow... box-shadow word-wrap/break
- text-shadow 指定水平阴影,垂直阴影,模糊距离,阴影颜色
- word-wrap 允许长文本换行

字体:@font-face规则
可以使用自己喜欢的字体
- font-family 规定字体的名称
- src 定义字体的URL
- font-stretch 定义如何拉伸字体,可选
- font-style 定义字体样式,可选
- font-weight 定义字体粗细,可选

2D转换:transform:translate()/ratate()/scale()/skew()/matrix()
- translate() 根据左(X轴)和顶部(Y轴)给定的参数从当前位置移动
- ratate() 0deg 正数顺时针,负数逆时针
- scale() 取决于宽度(X轴)和(Y轴)高度
- skew() transform:skew(<angle> [,<angle>]);skewX/Y水平/垂直方向倾斜
- matrix() 有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

3D转换:(translate/scale/rotate)3d() 相对应的添加一个....Z()
- perspective(n) 透视视图

过渡:transition/transition-(delay/duration/property/timing-function)
- timing-function linear/ease-in/easy-out/ease-in-out
- property 默认all noneproperty

动画:@keyframes
- animation 动画属性简写 除了animation-play-state
- animation-name 规定@keyframes名称
- animation-duration 完成动画的时间,默认0
- animation-timing-function 规定动画的速度曲线,默认ease 还有linear
- animation-delay 规定动画的开始
- animation-play-state 规定动画是否运行或暂停 默认running
- animation-iteration-count 动画播放次数 默认1 无限次infinite
- animation-direction 规定是否在下一个循环逆时针播放,默认normal alternate逆时针

多列:
- column-count 元素应该被分割的列数
- column-fill 如何填充
- column-gap 列与列之间的间隙
- column-rule 简写column-rule-*
- column-rule-color 两列间边框颜色
- column-rule-style 两列间边框样式
- column-rule-width 两列间边框厚度
- column-span 指定元素要跨越多说列 all
- column-width 指定列宽度
- columns 设置 column-width 和 column-count 的简写

用户界面:resize box-sizing outline-offset... IE不兼容resize outline-offset

框大小:在元素上设置box-sizing: border-box;则内边距和边框也包含在width和height中

弹性盒子:由弹性容器和弹性元素组成 通过设置display:flex/inline-flex;将其定义为弹性容器,可以包含多个子容器
- flex-direction 顺序指定了弹性子元素在父容器中的位置

row:横向从左到右排列(左对齐),默认的排列方式
row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面
column:纵向排列
column-reverse:反转纵向排列,从后往前排,最后一项排在最上面

- justify-context 把弹性盒子沿着弹性容器的主轴线对齐

justify-content: flex-start | flex-end | center | space-between | space-around

- align-items设置或检索弹性盒子元素侧轴方向上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch

- flex-wrap 子元素换行方式

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

内联和内联块状元素中有影藏的文本节点导致图片底部有间隙
- 消除方法 1 块状化 display:block;
- 消除方法 2 底线对齐 vertical-align: bottom;
- 消除方法 3 行高足够小 line-height: 0;

CSS3 overflow-x/y 超出影藏对应的轴,另一个轴添加滚动条
display: inline 单元格需要设置table-layout: foxed;
- xy值相同 等同于overflow
- xy值不同 一个为visible,另一个为其他的,visible重置为auto

阅读更多
个人分类: CSS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

css属性详解

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭