css详解笔记

CSS中的块级元素与行内元素

块级元素特性:
  1.占据一整行,总是重起一行并且后面的元素也必须另起一行显示。
  2.内联元素特性:
  3.和其他内联元素显示在同一行。

块级元素列举如下:
  div(文档分区),article(文章内容), aside(伴随内容), audio(音频播放), blockquote(块引用), canvas(绘制图形), dd(定义列表中定义条目描述), dl(定义列表), fieldset(表单元素分组), figcaption(图文信息组标题), figure(图文信息组), footer(区段尾或页尾), form(表单), h1-h6(标题), header(区段头或页头), hgroup(标题组), hr(水平分割线), noscript(不支持脚本或禁用脚本时显示的内容), ol(有序列表), output(表单输出), p(段落), pre(预格式化文本), section(一个页面区段), table(表格), tfoot(表脚注), ul(无序列表), vidio(视频)。

常见块元素:

  div,header,footer,nav,article,aside,section,p,h1-h6,ul,ol,li,dl,dt,dd

内嵌标签(行内/内联)(inline)

1.在一行显示

2.不支持宽高,对上下的margin和padding支持的也有问题

3.代码换行会被解析成一个空格

 4.内嵌的宽度,有内容撑开

内联元素列举如下:
  b(粗体), big(大号字体), i(倾斜), small(小号字体), tt(等宽), abbr(缩写), cite(引用), code(计算机代码文本), dfn(定义项目), em(强调), kbd(键盘文本), strong(语气强调), samp(样本文本), var(定义变量), a(链接), bdo(元素可覆盖默认的文本方向), br(换行), img(图像), map(图像映射), object(对象), q(引用), script(定义客户端脚本), span(组合行内元素), sub(下标), sup(上标)
button(按钮), input(输入), label(标注), select(表单控件), textarea(文本域)。

内嵌元素:

  span,a,strong,em,time,mark

background 背景(集合样式)

background-color   背景颜色

background-image 背景图片 (添加路径 url())

同一个元素可以拥有多个背景,用逗号分开,先写的背景在上面

background-repeat 背景图片平铺方式

no-repeat(不平铺)

repeat(平铺)

repeat-x (水平平铺)

repeat-y (纵向平铺)

background-postion 背景定位

关键字

x:left  center  right

y:top  center  bottom

数值

x:10px/20%   (像素大小/百分比)

y:10px/20%

background-attachment:fixed 固定图片不动

background-origin  背景图位置

border-box

padding-box (默认)

content-box

background-clip 背景裁切

-webkit-text (文字背景,只限谷歌)

border-box (默认)

padding-box

content-box

background-size 背景图大小(!!!手机端不建议使用)

等比放大:contain(包含)

cover (覆盖)

线性渐变

background-image:linear-gradient(red,blue)  (有红色变蓝色 从上到下)

渐变定位(从什么地方开始到什么地方结束)

在(red,blue)中加入位置

如:(red 50px,blue 100px) 也可加入百分比

渐变方向 deg

在开是位置加入角度值 (角度默认180deg)

如:background-image:linear-gradient(120deg,red,blue)

斑马线(就是平铺渐变)

background-image:repeating-linear-gradient()

兼容IE6(方向)

filter:progid:DXTmageTransform.Microsoft.gradient

(starColorstr=‘red‘,endColorstr=‘blue‘,GradientType=‘1‘);或者2

径向渐变

background-image:radial-gradient(起点  形状 大小 点)

起点:可以是关键字(left,top,right,bottom)、具体数值或百分比

形状:ellipse、aircle

大小:具体数值或百分比,也可以是关键字

最近端(closest-side)

最近角(closest-corner)

最远端(farthest-side)

最远角(farthest-side)

包含 contain

覆盖 cover

!!!火狐只支持关键字。

font 文字(集合样式)

color 字体颜色

font-size 文字大小

font-family 字体

font-weight 字体加粗与否

bold 加粗

normal 正常

font-style 字体倾斜

italic 倾斜

nomral 正常

line-height 行高

字体语法:

font:font-style  font-weight  font-size/line-height  font-family;

文本

text-decoration 文本修饰

line-through 删除线

overline 上划线

underline 下划线

none 没有修饰

text-algin 文本对齐方式

Left               center          right

text-indent 首行缩进

white-space:nowrap 强制不换行(wrap 换行)

word-spacing 单词间距

letter-spacing 字母间距

direction 文字排列方向

rtl  右到左

ltr  左到右

unicode-bidi:bidi-override  改变文字的书写方式(从右到左)

在某一元素内文字超出显示省略号

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

border 边框(复合样式,集合样式)

border-top

border-right

border-bottom

border-left

border-top-width 上

border-right-width 右

border-bottom-width 下

border-left-width 左

border-style 边框样式(solid 实线/dashed 虚线/dotted 点线)

border-top-style

border-right-style

border-bottom-style

bordder-left-style

border-color 边框颜色

关键字

rgb(0-255,0-255,0-255);

六位或者三位的一个十六进制的数字;

border-top-color

border-right-color

border-bottom-color

border-left-color

border-radius 圆角半径

列:border-radius:10px 20px 30px 40px

border-width 边框宽度

   border-image语法 :

border-image:border-image-sourceg  border-image-slice  border-image-repeat

-webkit-border-image:url(border.png) 27 27 stretch stretch;

border-image 给内容加入图片 仅限谷歌 要加如前缀 -webkit-

border-image-sourceg 引入图片

border-image-slice 切割图片 两个值(上下或左右)不用加px

border-image-repeat 图片的排列方式

round 平铺

repeat 重复

streth 拉伸

border-colors 为边框加颜色(从外层一层层显示)

只可在火狐下使用,并单独为某个方向上的边框设置

盒模型

怪异盒模型

在IE6,7,8,下,没有文档声明会进入怪异盒模型

box-sizing:

border-box(怪异盒模型)

content-box (标准盒模型)

box-shadow

inset (可选)内阴影

x 偏移

y 偏移

模糊半径

扩展半径

阴影颜色

阴影先写的在上边,后写的在下边

padding 

padding 内填充(使元素和它的内容之前有一个空隙)

padding:30px(上下左右);

padding:30px(上下) 60px(左右);

padding:10px(上) 30px(左右) 60px(下);

padding:10px(上) 30px(右) 60px(下) 80px(左);

padding-top

padding-right

padding-bottom

padding-left

padding不算在元素的width里边

padding在元素的边框以里,并且padding会显示元素的背景

margin

margin 外边距

margin:30px(上下左右);

margin:30px(上下) 60px(左右);

margin:10px(上) 30px(左右) 60px(下);

margin:10px(上) 30px(右) 60px(下) 80px(左);

margin-top

margin-right

margin-bottom

margin-left

margin在元素的边框以外,并且margin不会显示元素的背景

同级元素之间的距离用margin,父元素和子元素之间的距离用padding

a 超链接

href 页面地址      点击会跳到这个页面来

href 压缩包        点击会下载这个压缩包

href id名字    点击跳到这个id的元素的位置

a 标签不继承父级的字体颜色

a标签中不能再包含a标签

span 标签区分样式用

包含选择 a span{} 找到a标签下的span标签

base 定义页面上的链接默认的打开方式和默认地址

新窗口打开页面 target="_blank"

当前窗口打开页面 target="_self"

table 表格

table 设置宽度之后,宽度会自动分配到每一行,设置高度之后也会自动分配到tbody下的每一行

thead 表格头部

tbody 表格主体

tr 行

th 单元格(加粗,居中)

td 单元格

colspan 横向合并单元格

rowspan 纵向合并单元格

td,th 不支持margin

tr,thead,tbody 不支持margin和padding

border-spacing:0; 单元格间距为0(IE6,7不支持)

border-collapse:collapse; 合并边框

单元格中的内容默认垂直居中,可通过设置vertical-align进行修改

单元格设置 宽度,一竖列宽度都变,单元格设置 高度,一横行高度都变

表格清除默认样式:

table{border-collapse:collapse;}

td,th{padding:0;border:1px;}

vertical-align 垂直对齐方式(用在两个或多个,内联或者内联块元素垂直方向的对齐)

值           描述

baseline          默认。元素放置在父元素的基线上。

sub         垂直对齐文本的下标。

super              垂直对齐文本的上标

top          把元素的顶端与行中最高元素的顶端对齐

text-top          把元素的顶端与父元素字体的顶端对齐

middle           把此元素放置在父元素的中部。

bottom           把元素的顶端与行中最低的元素的顶端对齐。

text-bottom     把元素的底端与父元素字体的底端对齐。

length

%           使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

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

float(浮动 left/right/none):

1.使内嵌元素支持宽高

2.使块元素在一行显示

3.不设置宽度的时候,宽度由内容

4.脱离文档流

浮动原理:

使元素脱离文档流,然后按照指定的方向去移动,直到碰到父级的边界,或者另外一个浮动元素停止

文档流:文档流是文档中可显示对象在排列时所占用的位置。

BFC ( Box Formatting Context) 块级格式化上下文

inline formatting context 行内格式化上下文

BFC 作用

1.清除内容浮动

2.阻止margin向外传递

触发BFC的条件:

1.根节点

2.float不为none的情况

3.display的值为inline-block、table-cell、table-caption

4.overflow的值不为visible

5.position的值为absolute或fixed

overflow的值

visible            默认值。内容不会被修剪,会呈现在元素框之外。

hidden           内容会被修剪,并且其余内容是不可见的。

scroll             内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto        如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

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

clear            元素的某个方向上不能有浮动元素(left、right、both、none)

清浮动的方法:

1.给同为父元素设置 float

2.给父元素设置display:inline-block;

3.给父元素设置overflow不为visible(默认值) 一般设为auto;

4给父元素加个样式(加入clear){ :after{content:"";display:block; clear:both;}  目前最流行的方法;}

定位(position)

position:relative; 相对定位(只加相对定位元素不会有任何变化)

1.不脱离文档流(元素移走元素的初始位置,还会被保留)

2.根据自己的原始位置来计算left(right)和top(bottom)值

3.提升层级

position:absolute; 绝对定位

1. 脱离文档流

2.提升层级

3.根据自己有定位的父级来计算坐标,如果父级没有定位就会一层一层的向外去找.所有的父级都没      有定位,就根据document来计算

4.使内嵌元素支持宽高

5.绝对定位之后不设置宽度,宽度有内容撑开

!!!!元素定位之后,默认情况下,后边的层级高于前边的元素

z-index 层级

1.数值越大层级越高

2.层级只在定位元素上起效果

3.层级最好只在同级元素之间做比较

document 是html的父级

form 表单

action 提交跳转地址

常用控件-----

textarea                       输入一段文本

select                       下拉框  option

input

type="text"    文本输入框

type="password"   密码框

type="radio" 单选框

type="checkbox"   复选框

type="file"     上传控件

type="submit"       提交按钮

type="email"  邮箱       必须以@结尾

type="tell"      电话 (移动设备自动弹出数字输出法)

type="url"      网址

type="range"  数值选择

max="100" min="1" value="50" step(部署控制,每次移动多少)="10"

type="number"      数字选择

max="9" min="1" value="3" step="3"

type="color"   取色器

type="datetime-local"  时间(年月日小时)

time:        只有时间

date:        只有年月日

week:        第几周/年

month:       第几月/年

   value             值

name              数据名称

  常用属性-----

checked 单选和复选的默认选中

selected 的默认选中

disabled 禁止控件的编辑和提交

for=要辅助input的id

  pattern:正则验证

placeholder:提示文字信息(不兼容IE)

autocomplete:是否保存用户输入值 on(默认)/off

autofocus:指定表单获取输入焦点

required:强制用户输入不能为空

<input type="text" name="user" list="valList" required/>

<datalist id="valList">(为input中提示选择的内容,下拉框。)

<option value="javascript">javascript</option>

<option value="html">html</option>

<option value="css">css</option>

</datalist>

表单草稿箱

当用户想保存草稿箱时

为submit加入

formaction="地址" 新的提交地址

formnovalidate 取消验证

清除表单默认样式

form{margin:0;}

input,select,textarea{padding:0;margin:0;border:1px solid #000;}

textarea{resize:none;overflow:auto;}

resize 属性规定是否可由用户调整元素的尺寸。

注释:如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll。

值           描述

none              用户无法调整元素的尺寸。

both        用户可调整元素的高度和宽度。

horizontal       用户可调整元素的宽度。

vertical           用户可调整元素的高度。

伪类

:link{} 此链接未被访问过

:visited{} 此链接已访问

:hover{} 鼠标移入

:active{} 鼠标按下

L-V-H-A

:target 点击后出发hash值 类似锚点a

:checked 被选中的单选框或复选框

文本伪类

p:first-letter 第一个字

p:first-line 第一行

p:selection 选中的颜色改变

p:after 元素末尾

p:before 元素开始

p:not(命的名) 排除掉谁

结构性伪类:

box h2:nth-child(3){background:Red;}

找到h2标签的父级下边的第3个子元素,并且标签类型还必须是h2

p:nth-of-type(3){background:Red;}

找到p标签的父级下的第3个p标签

:first-child == :nth-child(1)

:last-child == :nth-last-child(1)

:first-of-type == :nth-of-type(1)

:last-of-type == :nth-last-of-type(1)

(其中括号里面的值可以是:odd(奇数)、even(偶数)、或者数学里面的数列(n、2n、)!)

鼠标交点

outline:none;

透明

opacity
透明 0-1的小数 元素透明它里边所有的内容都会变成透明的

  IE下透明度的设置

  filter:alpha(opacity=50);

  opacity: .5;

黑客

在结尾加如:

\0
IE11至IE8的IE浏览器

\9\0
IE10至IE8的IE浏览器

\9
IE10及IE10之前的IE浏览器

在开头加入:

*,+
IE7及IE7之前的IE浏览器支持

_IE6及IE6之前的IE浏览器支持

注释!!!!!!!!!!!!!!!!!!!

<!--
IE9及IE9之前的IE浏览器支持 -->

<!--[if
IE]>这是IE<![endif]-->

<!--[if
IE 9]>9<![endif]-->

<!--[if
IE 8]>8<![endif]-->

<!--[if
IE 7]>7<![endif]-->

<!--[if
IE 6]>6<![endif]-->

其他 IE 条件判断语句

<!--[if
lt IE 7]> : 小于 IE7 的版本 ( Less than );

<!--[if
lte IE 7]> : 小于或等于 IE7 的版本 ( Less than or equal );

<!--[if
gt IE 7]> : 大于 IE7 的版本 ( Greater than );

<!--[if
gte IE 7]> : 大于或等于 IE7 的版本 ( Greater than or equal );

<!--[if
!IE 7]> : 不等于 IE7 的版本 ( Not );<![endif]-->

IE6下不支持png的透明

</style>

<!--[if lte IE 8]>

小于等于IE8

<![endif]-->

<!--[if IE 6]>

<script
src="js/png.js"></script>

<script>

DD_belatedPNG.fix(‘.box,img‘);

</script>

<![endif]-->

cursor其他取值    鼠标移入

auto        :标准光标

default        :标准箭头

pointer       :手形光标

wait           :等待光标

text             :I形光标

vertical-text  :水平I形光标

no-drop       :不可拖动光标

not-allowed  :无效光标

help        :帮助光标

all-scroll       :三角方向标

move         :移动标

crosshair     :十字标

Html5中标签(包括新增常用):

<div>
           块

<span>
         区分掩饰

<a
href="#">        超链接

<header>
      页面头部(板块)

<footer>
       页面底部(板块)

<section>
      页面中的板块→代替<div>

<nav>
          导航

<article>
       页面中独立完整的一块内容,可以是一个文章、帖子、博客及回复的内容块

<aside>         用法一:用来写在<article>中,作为其附属信息

用法二:用来写在页面主体当中,作为整个页面的附属信息

<details>

<summary>今天天气不错</summary>

</details>

类似于隐藏框 当<details open>是<summary>内容显示出来

<dialog>
       一个对话框
一般隐藏,显示加open

<h1>~<h6>
  标题标签

<p>
              段落

<mark>
       强调标签——加背景色

<strong>
       强调标签——字体加粗

<em>
           强调标签——字体倾斜

<time>
         强调标签——时间

<ul>
             无序列表

<ol>
             有序列表

<dl>
             分为dt dd,dd为dt进行列表的再次分类

<img
src=""/>       图片

<form>
       表单

<input>
       一些框

<textarea>
    输入一段文本框

<select>
       下拉框 选择为<option>

<table>
         表格

<thead>
       表格头部

<tbody>
              表格内容

IE6 兼容问题

1、  在IE6下子元素会撑开父级设置好的宽高

2、  max-width 最大宽度

min-width 最小宽度

max-height 最大高度

min-height 最小高度    不兼容IE6

3、  在IE6下,不支持1px的点线

4、  元素内,除了内嵌还有其他类型的元素,行高会失效

5、  在IE6,7下,父级有边框,可能会造成子元素的margin值失效

解决办法:触发父级的haslayout

6、         关于标签兼容问题--------<!-- 引入html5标签支持的js文件来处理 -->

7、  IE6下只支持l-v-h-a这四个伪类,并且支持加给a标签

8、  在IE6下,每行元素宽度和父级的总宽度,相差超过3px,最后一行下margin 失效

9、  在IE6下,不支持给块标签加inline-block

10、在IE6下,块元素有横向的margin和浮动的时候,横向的margin会被放大两倍ss

解决办法:给元素加display:inline

11、       在IE6下,高度不满19px的元素,高度会被当做19px来处理

解决办法:加overflow:hidden

12、在IE6,7下,li本身没浮动,但是li里边的内容浮动了,li下边会多出几个像素的间隙

解决办法:

1.给li加浮动(当li下的空隙问题和最小高度问题并存的时候,给li加浮动)

2.给li设置vertical-align

13、       在IE6下,两个浮动元素之间有注释或者内嵌元素,并且元素的宽度和父级宽度相差小于3px,最后几个文字 会被复       制

14、       在IE6,7下,浮动元素父级有宽度的情况下不用请浮动

haslayout(触发)

元素会根据自己自身内容的大小,或者父级的大小来重新计算自己的宽高

(触发条件:)

display: inline-block

height: (任何值除了auto)

float: (left 或 right)

position: absolute

width: (任何值除了auto)

zoom: (除 normal 外任意值) zoom放大或缩小

15、在IE6下,浮动元素和绝对定位元素是并列关系的时候,绝对定位元素会消失掉

解决办法:用div把绝对定位元素包起来

16、在IE6,7下,子元素有相对定位的话,父级的overflow对它不起作用

解决办法:给父级也加相对定位

17、在IE6下,父级的宽高是奇数的话,元素的right(bottom)有1px的偏差

18、IE6,7,8不支持opacity

用filter:alpha(opacity=50);

19、在IE6下,给输入类型的表单控件加border:none无效

解决办法:重置input背景

在IE6下,输入类型的表单控件上下各有1px的空隙

解决办法:给元素浮动

在IE6下,输入类型的表单控件输入文字的时候,背景会随着一块移动

解决办法:把背景加给父级

20、在IE6下,子元素的margin -1px(超出父集边框,) 父集会自动包裹住子元素

解决办法:给父集加 position:relative

动画 animation

@keyframs animate(名称随变起)

{

0%{

width=100px;

}

10%{

width=500px;

}

}

样式内容:.box{animation:animate(名称)  3s(时间)  1s(延迟时间)  infinite(无限循环) altermate(反向运行); }

transform:变换

transform-origin:变还原点位置

(x轴方向   (left  center right  百分比%)

y轴方向   (left  center right  百分比%)

z轴方向   (left  center right  百分比%)

transform-style:preserve-3d  (做3d必须加)

transform:scale(x,y)

scale3d(x,y,z) 缩放

rotate(deg角度)

rotate(x,y,z,deg角度)    旋转

过渡属性:

transition: property  duration  timing-function  delay;

值                  描述

transition-property         CSS 属性的名称

width、height

transition-duration         过度时间

秒、毫秒

transition-delay             延迟时间

秒、毫秒

transition-timing-function     规定运动形式

ease 逐渐变慢(默认值)

linear 匀速

ease-in 加速

ease-in-out 先加速后减慢

cubic-bezier(x1,y1,x1,y1) 贝塞尔曲线

滤镜:

-webkit-filter:blur(5px);  //模糊,此处为5像素

-webkit-filter:sepia(0.5);  //叠加褐色,取值范围0-1,此处表示50%的褐色

-webkit-filter:brightness(0.5);  //亮度,取值范围0-1,5倍亮度(数字为0时为正常样式,为1时表示的    是100%亮度,无    法看       到图片)

-webkit-filter:hue-rotate(30deg); //色相(按照色相环进行旋转,顺时针方向,红-橙-黄-黄绿-绿-蓝绿-蓝-     蓝紫-紫-紫红-  红)       此处为叠加黄色滤镜

-webkit-filter:invert(1);  //反色,取值范围0-1,0为原图,1为彻底反色之后,0.5为灰色

-webkit-filter:saturate(4);  //饱和度,取值范围0~*,0为无饱和度,1为原图,值越高饱和度越大

-webkit-filter:contrast(2);  //对比度,取值范围0~*,0为无对比度(灰色),1为原图,值越高对比度越大

-webkit-filter:opacity(0.8);  //透明度,取值范围0~1,0为全透明,1为原图

-webkit-filter:drop-shadow(17px 17px 20px black); //阴影

移动端写默认

宽度适应屏幕大小

<meta name="viewport" content="width=device-width,user-scalable=no" />

清除样式:

a{-webkit-tap-highlight-color:rgba(255,0,0,0);} 点击有暗影

input{-webkit-appearance:none;}

body *{-webkit-text-size-adjust:none;} 字体最小大小

加入JS 使最宽不超过540px  设置rem 为16分之一

<script>

var oHtml=document.getElementsByTagName("html")[0];

var iWidth=document.documentElement.clientWidth;iWidth=iWidth>540?540:iWidth;

oHtml.style.fontSize=iWidth/16+"px";

</script>

解决滑动内容效果;

<script>

var oScroll= new mScroll("wrap");

</script>                    wrap{指的是内容块}

处理已给像素边框!!

<script>

var iScale=1/window.devicePixelRatio;

document.write(‘<meta name="viewport" content="width=device-width,initial-                                          scale=‘+iScale+‘,minimum-scale=‘+iScale+‘,maximum-scale=‘+iScale+‘" />‘);

</script>

处理设备高度固定屏幕高度:

<script>

document.body.style.height=document.documentElement.clientHeight+"px";

</script>        加入body第一个

响应式(媒询media)

媒体类型

all 所有的媒体类型

screen 彩屏设备

print 打印设备

handheld 手持设备

braille 盲文触觉设备

embossed 盲文打印机

projection 投影

speech 听觉设备

TTY

TV 电视

关键字

and

not

only

媒询三种引入方式

1.<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />

[email protected] url("css/style.css");

3.直接写入style里面。

@media all

{

.box{

width:100px;

}

}

弹性盒模型(需要加前缀)

display:flex == display:inline-flex

类似浮动,不用清浮动

在改类型的元素内 子元素可以设置margin:auto  auto;

设置主轴方向(flex-direction:)

row 从左向右排列(默认值)

row-reverse 从右向左

column 从上到下

column-reverse 向下到上

主轴内元素对齐方式(justify-content:)

flex-start 元素在开始位置 富裕空间在另一侧(默认)

flex-end  元素在末尾位置 富裕空间在起始处

center     元素居中 富裕空间平分左右两侧

space-between 富裕空间在元素之间平分

space-around   富裕空间在元素两侧平分

侧轴对齐 (align-items:为对齐元素的父集设置)

flex-start  元素在开始位置 富裕空间在另一侧(默认)

flex-end   元素在末尾位置 富裕空间在起始处

center    元素居中 富裕空间平分左右两侧

注意:align-self 也是侧轴对齐 但是用来写在对齐元素的样式内!!!

换行 (flex-wrap:)

nowrap(默认)

wrap 换行

wrap-reverse 反向换行

其中 主轴对齐方式 与 换行可以写集合

flex-flow:row(主轴对齐方式)  wrap(换行)

堆栈伸缩行(algin-content:)

algin-content 会更改 flex-wrap 的行为

它和 align-items 相似,但是不是对齐伸缩项目,它对齐的是伸缩行。

flex-start

flex-end

center

space-between

space-around

oder(在元素的排列位置,给子元素加人)  oder=0(默认)

遮罩(mask)

-webkit-mask:url(img)

mask:用背景图片来覆盖掉图片。

删栏(columns)加浏览器前缀

column-width 栏目宽度

column-cunt   栏目列数

column-gap   栏目距离

column-rule   栏目间隔线

column-fill   栏目高度是否统一

外联框架

<iframe src="http://www.baidu.com#form" width="900" height="40" scrolling="no"     frameborder="0"></iframe>

ioc 网页小标

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link href="favicon.ico" rel="icon" />

</head>

热区

<map name="mt">

<area shape="rect" coords="923,398,1271,504" href="http://www.baidu.com">

</map>

shape="rect" 矩形

coords="左上角X,左上角Y,右下角X,右下角Y"

shape="circle" 圆形

coords="圆心的X,圆心的Y,半径"

shape="poly" 多边形

coords="第1个点X,第1个点y,第2个点X,第2个点y,第3个点X,第3个点y......"

视频(优酷视频)

<iframe height=400 width=200 src="http://player.youku.com/embed/XMTM0NDEyMTQxNg=="        frameborder=0        allowfullscreen></iframe>

table 设置宽度之后,宽度会自动分配到每一行,设置高度之后也会自动分配到tbody下的每一行

时间: 2024-10-11 08:04:07

css详解笔记的相关文章

nginx配置文件详解笔记

web运维第一篇:nginx配置文件详解笔记#定义Nginx运行的用户和用户组user www www;#nginx进程数,建议设置为等于CPU总核心数.worker_processes 8;#全局错误日志定义类型,[ debug | info | notice | warn | error | crit ]error_log /var/log/nginx/error.log info;#进程文件pid /var/run/nginx.pid;#一个nginx进程打开的最多文件描述符数目,理论值应

jquery的css详解(二)

jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ style: function( elem, name, value, extra ) { // Don't set styles on text and comment nodes if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ||

javascript事件详解笔记

javascript事件详解笔记: 一.事件流 1.事件流: 描述的是页面中接受事件的顺序,有事件冒泡.事件捕获两种. 2.事件冒泡: 由最具体的元素接收,然后逐级向上传播到最不具体的元素的节点(文档). 3.事件捕获: 最不具体的节点先接收事件,而最具体的节点应该是最后接收事件. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件</title&

canvas绘图详解笔记(一)

声明一下:这里我不会用太多文字去详解介绍canvas是什么,相信了解过canvas的人都知道它的魅力所在,如果你对canvas还比较陌生的话,建议可以查阅相关资料了解一下.这里我将对canvas绘图详解课程做一次详细的笔记,方便大家和自己日后可以学习.那么接下来就是直接进入笔记内容的学习: 首先创建一个canvas元素,我们只需要在html文件中加入这么一句代码: <canvas id="canvas">当前浏览器不支持canvas,请更换浏览器使用!</canvas

jQuery css详解

今天确确实实是放了一天假,喝了点小酒,看了天天向上和快乐大本营以及中国好舞蹈,越来越热爱舞蹈了,还是总结一篇吧. @jquery css css(name|pro|[,val|fn):访问或设置匹配元素的样式属性 1 $("div").click(function(){ 2 $(this).css({width:20px,height:30px}) 3 }); offset([coordinates]):获取匹配元素在当前视口(body)的相对偏移 1 <p>hello b

伪静态详解笔记

1.检测Apache是否支持mod_rewrite 通过php提供的phpinfo()函数查看环境配置,通过Ctrl+F查找到"Loaded Modules",其中列出了所有 apache2handler已经开启的模块,如果里面包括"mod_rewrite",则已经支持,不再需要继续设置. 如果没有开启"mod_rewrite",则打开目录 您的apache安装目录"/apache/conf/" 下的 httpd.conf 文

jquery的css详解(一)

通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个判断,value不等于undefined则调用jq的工具方法style,否则调用jq的工具方法css 可以看出,style是设置,css是获取.也就是说要搞懂jq的实例方法css,必须先要搞懂jq的工具方法style和css jQuery.fn.extend({ css: function( name,

log4j详解笔记

a). 新建Java Project>>新建package>>新建java类: b). import jar包(一个就够),这里我用的是log4j-1.2.14.jar, c). 新建log4j.properties,置于project根目录下: log4j.rootLogger=info, ServerDailyRollingFile, stdout log4j.appender.ServerDailyRollingFile=org.apache.log4j.DailyRolli

Http 协议详解笔记

HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的规范化工作正在进行之中,而且HTTP-NG(Next Generation of HTTP)的建议已经提出.HTTP协议的主要特点可概括如下:1.支持客户/服务器模式.2.简单快速:客户向服务器请求服务时,只需传送请求方法和路径.请求方法常用的有GET.HEAD.POST.每