2019-08-25


布局

    说法一

浮动布局

绝对定位布局

Flex布局

Table-cell表格布局

网格布局

说法二

静态布局

流式布局

自适应布局

弹性布局

https://www.cnblogs.com/mm152534/p/9429939.html



常用特殊符号

空格: 

大于号:>:>

小于号:<:&lt;

https://blog.csdn.net/grootbaby/article/details/82790742



Input表单属性

https://www.w3school.com.cn/tags/tag_input.asp



定位方式

描述

absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left,

  right 或者 z-index 声明)。

inherit规定应该从父元素继承 position 属性的值。

https://www.w3school.com.cn/cssref/pr_class_position.asp



选择器及其优先级

层叠优先级是:

浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式

其中样式表又有:

类选择器 < 类派生选择器 < ID选择器 < ID派生选择器

派生选择器以前叫上下文选择器,所以完整的层叠优先级是:

浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式...共12个优先级

https://blog.csdn.net/u598975767/article/details/51505164



清除浮动的方式

对父级设置适合CSS高度

对父级设置适合CSS高度

父级div定义 overflow:hidden

http://www.divcss5.com/jiqiao/j406.shtml



动画属性

animation:namedurationtiming-functiondelayiteration-countdirection;

描述

animation-name规定需要绑定到选择器的 keyframe 名称。。

animation-duration规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function规定动画的速度曲线。

animation-delay规定在动画开始之前的延迟。

animation-iteration-count规定动画应该播放的次数。

animation-direction规定是否应该轮流反向播放动画。


https://www.w3school.com.cn/cssref/pr_animation.asp



animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:

描述

linear动画从头到尾的速度是相同的。

ease默认。动画以低速开始,然后加快,在结束前变慢。

ease-in动画以低速开始。

ease-out动画以低速结束。

ease-in-out动画以低速开始和结束。

cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。


https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp



animation-iteration-count:n|infinite;

描述

n定义动画播放次数的数值。

infinite规定动画应该无限次播放。


animation-direction:normal|alternate;

描述

normal默认值。动画应该正常播放。

alternate动画应该轮流反向播放。


行级元素和块级元素

行内元素:

<a>标签可定义锚<abbr>表示一个缩写形式<acronym>定义只取首字母缩写<b>字体加粗<bdo>可覆盖默认的文本方向<big>大号字体加粗<br>换行<cite>引用进行定义<code>定义计算机代码文本<dfn>定义一个定义项目<em>定义为强调的内容<i>斜体文本效果<img>向网页中嵌入一幅图像<input>输入框<kbd>定义键盘文本<label>标签为<input> 元素定义标注(标记)<q>定义短的引用<samp>定义样本文本<select>创建单选或多选菜单<small>呈现小号字体效果<span>组合文档中的行内元素<strong>语气更强的强调的内容<sub>定义下标文本<sup>定义上标文本<textarea>多行的文本输入控件<tt>打字机或者等宽的文本效果<var>定义变量

块级元素:

<address>定义地址<caption>定义表格标题<dd>定义列表中定义条目<div>定义文档中的分区或节<dl>定义列表<dt>定义列表中的项目<fieldset>定义一个框架集<form>创建 HTML 表单<h1>定义最大的标题<h2>定义副标题<h3>定义标题<h4>定义标题<h5>定义标题<h6>定义最小的标题<hr>创建一条水平线<legend>元素为 <fieldset>元素定义标题<li>标签定义列表项目<noframes>为那些不支持框架的浏览器显示文本,于frameset 元素内部<noscript>定义在脚本未被执行时的替代内容<ol>定义有序列表<ul>定义无序列表<p>标签定义段落<pre>定义预格式化的文本<table>标签定义 HTML 表格<tbody>标签表格主体(正文)<td>表格中的标准单元格<tfoot>定义表格的页脚(脚注或表注)<th>定义表头单元格<thead>标签定义表格的表头<tr>定义表格中的行

https://www.cnblogs.com/czh1994/p/7079597.html



文字加粗方式

<b>

<strong>

Css:font-weight



光标

cursor:auto;自动

cursor:zoom-in;放大镜

cursor:zoom-out;缩小镜

cursor:all-scroll;上下左右任何方向滚动

cursor:crosshair;十字准心

cursor:pointer;手

cursor:wait;等待

cursor:help;帮助

cursor:no-drop;无法释放

cursor:text;文字/编辑

cursor:move;可移动对象

cursor:vertical-text;可编辑的垂直文本的光标

cursor:n-resize;向上改变大小(North)

cursor:s-resize;向下改变大小(South)

cursor:e-resize;向右改变大小(East)

cursor:w-resize;向左改变大小(West)

cursor:ne-resize;向上右改变大小(North East)

cursor:nw-resize;向上左改变大小(North West)

cursor:se-resize;向下右改变大小(South East)

cursor:sw-resize;向下左改变大小(South West)

cursor:col-resize;可被水平改变尺寸

cursor:row-resize;可被垂直改变尺寸

cursor:not-allowed;禁止

cursor:progress;处理中

cursor:default;系统默认

cursor:url('#');#为光标文件地址

(注意文件格式必须为:.cur或.ani)

用户自定义(可用动画)

注意:在定义完自定义的游标之后在末尾加上一般性的游标,

以防那些url所定义的游标不能使用

       https://www.cnblogs.com/gluncle/p/8916583.html



颜色表示方法

颜色英文名

GRB

十六进制



单位

单位描述

%百分比

in英寸

cm厘米

mm毫米

em1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍。

例如,如果某元素以 12pt 显示,那么 2em 是24pt。

在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。

ex一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)

pt磅 (1 pt 等于 1/72 英寸)

pc12 点活字 (1 pc 等于 12 点)

px像素 (计算机屏幕上的一个点)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 226,097评论 6 523
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 97,198评论 3 410
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 173,602评论 0 370
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,750评论 1 304
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,684评论 6 404
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 54,151评论 1 317
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 42,349评论 3 433
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 41,430评论 0 282
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,986评论 1 328
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,969评论 3 351
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,071评论 1 359
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,667评论 5 352
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 43,358评论 3 342
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,757评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,944评论 1 278
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,684评论 3 384
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,123评论 2 368

推荐阅读更多精彩内容

  • CSS要点记录 CSS 指层叠样式表 (Cascading Style Sheets) 多种样式时的优先级问题 数...
    Tony__Hu阅读 1,151评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,323评论 0 11
  • Android Studio 是谷歌基于IntelliJ IDEA开发的安卓开发工具,有点类似 EcliPSe A...
    playAndroid阅读 367评论 0 0
  • 已经好久没有提笔去写些什么了,是工作生活太过于忙碌,无法静下心来花时间去思考?是感情思想太过于单调重复,没有什么值...
    五米Jared阅读 689评论 0 1
  • 今天遇到个不算奇葩的人,毕竟这错都是在DHL。不是被骂的很难听,就是那啥啥。说来话长我就不多说了! 今天脖子疼了一...
    sakuranohin阅读 57评论 0 0