HTML/CSS基础

快捷键

• 超出屏幕换行 首选项—设置—输入word—word wrap—on
• 鼠标下一行：ctrl+enter
• CTRL+s： 保存
• alt+⬆,⬇：快速移动
• 复制
  • ctrl+c：
  • shift+alt+⬆,⬇：快速复制一行
• CTRL+v：粘贴
• CTRL+x：剪切
• ctrl+z：撤销
• ctrl+y：前进
• 选中
  • ctrl+ a：全选
  • shift+home：从行头到鼠标选中一行
  • shift+end:从行尾部到鼠标选中一行
• 缩进（可以缩进多行）
  • tab向后
  • tab+shfit向前缩进
• 多光标：alt+鼠标左键出现多个光标，统一删除或修改
• ctrl+d：依次选择相同元素下一个项
• shift+alt+f：代码整理
• ！+tab打开初始代码
• header后按tab就变成< header>< /header>
• F12打开搜索框ctrl+f
• 注释
  • ctrl+k+c（编辑工具通用） ctrl+k+u
  • ctrl+/
  • shift+alt+a

html

元素

• 开始标签+内容（元素）+结束标签

• < head > 为起始标签

• < /head > 为结束标签

• <p>This is my first paragraph</p>为 p元素（<p>元素）p为元素名
  

• 基本上所有替换元素都是行内元素,也叫行内替换元素

  • input img 替换元素

• sub 下标

• sup上标

元素类型

块级元素

• 独占父元素一行
• div p ul ol li h1~h6 pre dl dt dd table form article aside footer header hgroup main nav section blockquote hr等
• 非替换元素
  • 浏览器直接将内容显示出来
  • 可以设置宽高,但只有文字不会显示出来

行内元素

• 在父元素的同一行中显示

• a img span strong code iframe label input button canvas enbed object video audio 等

• 替换元素

  • 没有直接给东西
  • img input video audio enbed iframe object canvas 等
  • 随意设置宽高,没设置时由内容决定

• 非替换元素

  • 浏览器直接将内容显示出来
  • a strong span code label
  • 不能随意设置宽高,由内容决定,marfin-top/bottom不起作用
  • padding-top/bottom变多但不占空间
  • border-top/bottom 变多但不占空间
  • 使用display改为内联块就不特殊

• 去空格

  • 去掉换行

  • 注释空格

    • <span>text</span><!-- 
      --><span>text</span>
      

  • 空格相当于一个字符

    • 跟父元素的字体大小有关,将父元素font-size置零
    • 给内容重新设置font-size
    • 苹果浏览器不可用
    • 使用float(常用)

内联块

• 随意设置宽高,没设置时由内容决定
• 同一行中显示
• 具有块和行内元素特征
• 对外inline对内block
• 缺点两个内联块会基线对齐,有空格

嵌套关系

• 一般情况下块和内联块可嵌套块,内联块,行内元素
• 行内元素不要嵌套块和内联,修改display也不可以
• 行内只包含行内元素

display

• block

• inline

• inline-block

  • 在一行显示,可以设置宽高
  • 基线对齐

• none 隐藏元素,不占空间

• table

• inline-table 行内块

• table-row tr

• table-row-group tbody

• table-header-group theader

• table-footer-group tfoot

• table-cell td /th

• table-caption caption

• list-item li

超文本

• 文本+非文本（图片，链接，视频等）

标记

• 也叫标签
• 单标签可以不写/
• 双标签
• 不区分大小写
• p里面不能有div,可以正常显示,但结构会出现错误
• span不能设置width,height

属性

• 属性的引号可单可双可省略,最好加上引号

• 属性和值相同，值可以省略 type="type" 等价于type

• 公共属性

  • title=“提示”
  • 类:class id 等

• lang属性

  • en
  • zh-CN 等价于zh
  • 帮助语音合成工具确定要使用的发音
  • 其他标签也可以用

• p标签没有颜色属性使用font标签或者加css样式，文字空格会显示

head

• （内容为元数据 metadata，设置网站编码，标题，图标）

• title

• meta

  • charset字符编码（设置）,目前所有网页都需要utf-8
    • ascii：英文
    • gb2312:大部分中文，兼容ascii
    • gbk：所有中英文
    • utf-16->utf-32->utf-8：全球通用

• style

  • 使用选择器设置样式

• link

  • rel=“stylesheet,icon”对象
  • href="地址"
  • type="text/css ，javascript"类型可以不写

SEO

• (search engine optimization)搜索引擎优化
• 关键词排名
• 最多设置一个h1

code

• 等宽字体

• <code>font-family:monospace;</code>
  

• 建议使用span 设置font-family

br

• 可用块代替

hr

• (不常用背border-bottom代替)
• color
• width宽
  • px
  • %
• align
• size 高

字符标记

• (字符实体)

• &nbsp ;空格

• & gt; great than >

• &lt ; less than <

• & amp; &

• &quot ; 双引号

• &apos ; 单引号

span

• 默认情况下和普通文本几乎没差别
• 方便加样式

div

• 不支持align

img

• src
• alt
• title
• width:会自动设置heigt
• height:会自动设置width
• border
• vspace 顶部,底部距离
• hspace 左右距离
• align
  • left
  • right
  • top
  • bottom
  • middle

路径

• 可以 \尽量写成/，网络路径只能写成/
• 绝对路径
  • 从磁盘(根路径)开始
  • 一旦位置发生改变,文件就会找不到
  • C:\Users\ShaoGangYin\Desktop\practice\background\Cranberry Bog.png
• 相对路径
  • ./background/Ash Heap.png 当前目录./可以不写
  • ../background/Ash Heap.pngbackground的上一级目录

常见图片格式

• gif 支持透明
• jpg 不支持透明
• png 支持透明
• jpeg是jpg的进化,和jpg相同
• webp 支持透明

a 标签

• (各种链接:下载.....)

• target属性

  • _self 默认
  • _blank
  • _parent
    • 只有在iframe嵌套中真正实现,否则是本页面吗打开
    • 外一层页面打开
  • _top
    • 只有在iframe嵌套中真正实现,否则是本页面吗打开
    • 最外层页面打开
  • 具体名

• 空连接时:#,会直接指向页面顶部,href=""时也直接指向顶部

锚点

• 使用id, 结合< a href="#id名字"></ a>

伪链接

• <a href="javascript:alert('测试')" >弹窗口</a>
  

• <a href="" onclick="alert('测试')">弹窗口</a>
  

iframe

• 打开的网页中开窗,显示链接窗口

• 格式:   
  <iframe src="https://www.baidu.com" 
      width="300px" 
      height="300px" 
     frameborder="1"
     frameborder="0"> 
  </iframe>
  

• iframe所在页面b.html 中打开a.html......b中链接的_parent,__top可以实现,但效果一样......c.html中嵌套b.html可以真正实现 _top......将准备跳转页添加name,并修改a页链接的target

• a.html

  • <a href="https://www.baidu.com" target="_self">百度</a>
      <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.baidu.com" target="_top">百度</a>
      <a href="https://www.baidu.com" target="_parent">百度</a>
    <a href="https://www.baidu.com" target="ceshi">百度</a>
    

• b.html

  • <iframe src="a.html" 
                  width="300px" 
                  height="300px" 
                  frameborder="1" >
            </frame>
    

• c.html

  • <iframe src="b.html" 
        width="800px" 
        height="800px" 
        frameborder="1" 
    	name="ceshi">
    </iframe>
    

base

• 减少代码,原理为base中网址和a中拼接,a中有完整地址时使用a的,例如淘宝,target也可以写在base中

• 写在header内

  • <base href="https://www.baidu.com" target="_self"> 
    

• 写在body内

  • <a href="">百度</a>
    <a href="/s?wd=牛奶">牛奶</a> wd可以变
    <a href="https://www.taobao.com">淘宝</a>
    

标签语义化

• 标签有正确语义
• 标签可以相互转化，要遵守标签语义化

表格

table属性

• border
• cellpadding 内部间距
• cellspacing 单元格直接间距
• width 每个单元格宽度
• align
  • left right center

tr、td属性

• valign 单元格内容垂直对齐
  • top
  • middle
  • bottom
  • baseline
• align单元格内容水平对齐
  • left
  • center
  • right
• width
• height
• rowspan 行合并 合并需将被合并的内容删除掉
• colspan 列合并

细线表格

• table{border-collapse: collapse;}
  td{border:1px green solid;}
  

• table{border-collapse: collapse;border: 1px green solid;}
  td{border:1px green solid;}
  
  

CSS属性

border-collapse

• collapse
• separate
• inherit
• initial
• unset
• 边框折叠

border-spacing

• border-spacing:左右 上下;
• 代替cellspacing

其他属性

• capition
• thead
• tbody
• tfoot

表单

form

• form在最外层

属性

• action 地址
• method
  • 提交方式
  • get默认
    • url后跟?多个参数用&隔开
    • 浏览器和服务器对url长度有限制,附带参数不能超过1kb
  • post
    • 参数全放在请求体中
    • 可以用检查看拦截
  • dialog
• target
  • _self
  • _blank
• enctype
  • 规定了在向服务器发送表单数据之前如何对数据进行编码
  • application/x-www-form-urlencoded 默认
  • text/plain 普通文本传输
  • multipart/form-data 文件传输使用 method必须是post
• accept-charset
  • 表单提交时使用的编码
  • unknown
    • 和文档编码方式相同 可以不写本属性

lable

• for="id名"

lable激活input使用

• <label for="id值">baidu</label>
  <input type="text" placeholder="请输入搜索内容" id="值">
  
  <label for="id值">man</label>
  <input type="radio" id="值">
  

input

type属性

• text

• password 密文框

• button

  • <input type="button" value="button内容">
    

• radio 单选框

  • <input type="radio" name="组名">
    

• checkbox 复选框

  • <input type="checkbox">
    name须保持一致
    

• file 文件上传

• reset 重置

  • value="更改重置两字"

• submit

  • 需将替换元素加上name属性

input其他属性

• maxlength

  • 最大长度 input所有类型的文本框都可以用

• placeholder

  • 文本框提示字

  • <input type="text"  placeholder="请输入手机号" maxlength="11" readonly="readonly">
    

• name

  • radio 互斥，点字选中
  • 区分数据类型
  • 提交时为替换wd的名称

• value

  • wd取值
  • radio checkbox要写 没写时时on
  • 赋值

• form 区分提交表单

  • 即使不写在form元素内部,数据也能正常提交

• id

  • 和label合用实现点字选中

• 取消tab选中效果

  • input{outline:none;}
  • input:focus{border:blue solid;}

布尔类型

• 属性值就是本身

• readonly 只读

• disabled 禁用

  • <button disabled>获取验证码</button>
    

• checked

  • <input type="radio" name="sex" checked>  选中
    只适用于 radio checkbox
    

• autofocus

  • 获得焦点

  • <input type="password" autofocus>
    

• selected 默认选中

• multiple 使用ctrl多选

textarea

• cols

• rows 只能显示5行,多了会出现下拉

• <textarea name="" id="" cols="30" rows="10"></textarea>
  

缩放

• resize:none;
• resize:horizontal; 水平缩放
• vertical 垂直缩放
• both 默认值

button实现

• input

  • button

• button

  • <button type="属性值">内容</button>	写在forom默认submit
    

  • 属性

    • submit
    • reset
    • meanu
    • button

fieldset

• 外包框

• <legend> 框名称即说明 </legend>
  

下拉列表

• multiple 多选
• size 显示几个

<select name="" id="" multiple size="2">
<option value="0">小学</option>
<option value="1" selected>初中</option>

表单提交

传统方式

• submit会自动将数据提交到服务器,并产生页跳转(服务器端需提前将跳向的页面写好(服务器渲染),返回给前端)
• 不方便进行数据验证

前后端分离

• 通过js获取表单所有内容,通过正则表达式进行数据验证
• 发送ajax请求将数据传递给服务器,验证成功后,服务器返回结果,并由前端决定显示什么内容

列表

有序列表

• 可以放div...最好不要放,直接子元素为li
• 1,2..为单独一个块
• type=" "

无序列表

• 可以放div...最好不要放,直接子元素为li
• type="i I a A 1 "

定义列表

• 一个dl可放多个dt

CSS属性

list-style-type

• disc 实心圆
• square
• circle 空心圆
• decimal 数字
• lower-roman
• upper-roman
• lower-alpha 小写英文字母
• upper-alpha 大写英文字母
• none

list-style-image

• list-style-image:url();
• 会将list-style-type覆盖

list-style-positin

• outside
• inside
• 点是否算在内容里面

list-style

• 缩写属性
• none
• 顺序随便

CSS

css

• cading style sheet
• 层叠样式表
• css中用url()来插入图片
• 类从上到下,从大到小写

css特性

继承

• 文字相关样式可以继承，布局相关样式默认不可以继承（属性：inherit 可以使属性被继承）

• 本身有该属性就不会继承

• 强制继承

  • 设置属性
    • 百分值
      • width:100%
      • 相对于父元素
    • 正常px
    • width:inherit;

• 继承的是计算结果

  • <div class="one">
           <div class="two">
               <p>继承计算结果</p>
           </div>
       </div>
       .one{font-size:60px;}
       .two{font-size:0.5em;}
    p继承的是30px
    

层叠

• 即使用多个样式
• 相同选择器里面有相同属性,后面选择器会把前面选择器属性层叠...相同选择器里面有不同属性,全部使用.....后面是指css中顺序
• 不同选中器里面有相同属性, 计算权重....不同选择器里面有不同属性,全部使用
  • 内联style>id>class>标签>*>继承(inherit)
  • 权重
    • style 1000
    • id 100
    • class 属性 伪类 10
    • 标签 伪元素 1
    • 通配 0
    • !important 10000 最高权重
    • font-size:12px !important;
    • 比较方法
      • 从权值最大的开始依次比较每种权值的数量,数量越多,优先级越高
      • 数量相同比较下一个较小的权值
      • 比较完毕数量相同,采取就近原则

css引入

内联样式

• style="属性名:属性值; 属性名:属性值; "

内嵌样式表

• <style type="text/css"> 默认type值为text/css可以不写
     选择器{属性名:属性值;   属性名:属性值;}
  </style>
  

外部样式表

• html中

  • .....支持多个引入,重要的后引入

  • <style type="text/css">
         @import url(css地址);
         @import url(css地址);url地址必须写绝对路径
         支持多个引入,重要的后引入
    </style>
    

  • link比import效率高

• css中

  • 最好指定css文件编码
    • @charset "utf-8";
  • 在一个css中可以引入另外一个css文件
    • @import url("css地址");body中必须是用import引用css
    • url中引号可以不写,但在有空格时就会出错,建议加上单引号

CSS选择器

1.标签选择器

• 尽量少用

2.类选择器

• 一个class样式可以被多个元素使用，一个元素也可一次使用多个class样式

  • 类选择器

    • .year{background:red;}   
      .content{text-decoration: line-through;} 
      

  • 应用

    • <div class="year content">年号</div> 类名之间用空格隔开
      

3.id选择器

• 必须唯一，即只可用一次
• 多使用在最外层类

4.群组(并集)选择器

• div,#a,.[title="one"]{background-color: royalblue;} 逗号隔开
  

5.通配选择器

• 包含所有标签,效率低,尽量少使用,可改用群组选择器
• 使用场景：设置通用css或者清除浏览器默认样式
• *{属性名: 属性值;}

6.属性选择器

• [属性名]{ }

  • [title]{color: crimson;} 
    <div title="twoone">这是用来测试的!!!</div>
    

• 选择器[属性名]{ }

  • p[title="two"]{color: darkblue;}
    <p title="two">这是用来测试的!!!</p>
    

• 完全匹配

  • [title="two"]{color: cadetblue;}
    <div title="two">这是用来测试的!!!</div>
    

• 部分匹配

  • [title*="one"]{font-size: 20px;} 
    <div title="onetwo">这是用来测试的!!!</div>
    <div title="twoone">这是用来测试的!!!</div>
    

• 起始匹配

  • [title^="one"]{color: chartreuse;}
    <div title="onetwo">这是用来测试的!!!</div>
    

• 结束匹配

  • [title$="one"]{color: coral;} 
    <div title="twoone">这是用来测试的!!!</div>
    

• 匹配 以one- 或 one打头

  • [title|="one"]{color: coral;} 
    <div title="one">这是用来测试的!!!</div>
    <div title="one-two">这是用来测试的!!!</div>
    

• 匹配 包含one或 one左右两边和其他单词以空格分开

  • [title~="one"]{color: coral;} 
    <div title="one">这是用来测试的!!!</div>
    <div title="one two">这是用来测试的!!!</div>
    

7.层次选择器

后代选择器

• 直接子元素和间接子元素

• div span{   }
  <div>
     <span> 这是用来测试的!!!</span>
  </div>
  <div>
    <p> 
      <span>这是用来测试的!!!
          <strong>
            ok
           </strong>
       </span>
    </p>
  </div>
  

子代选择器

• 直接子元素

• div>p{   }  div > p{   }
  <div>
    <p> 
     这是用来测试的!!!
    </p>
    <div>
  

相邻兄弟选择器

• 相邻的下一个p元素
  div+p{ border: seagreen solid;}
  

全兄弟选择器

• div后面的兄弟元素
  div~p{ border: seagreen solid;}
  

8.交集选择器

• 适用于一行元素,中间不需要隔开
• 标签类,类属性……

9.伪类

动态伪类

• link visited hover active 必须遵守LVHA,冒号前面加上标签，使用群组选择器p:active,a:active，否则会乱

• 只有a标签可以用

  • :link
    • 未访问前状态 再次加载必须清缓存shift +ctrl+delete
    • 地址?timestamp=数字
  • :visited
    • 访问后状态

• 都可以用

  • :hover

    • 移入状态

  • :active

    • 点击状态

  • :focus

    • 光标所在处
      <input type="text">
      input:focus{  }
      顺序  link visited focus hover active 
      

    • 光标无法选中（只会选中链接……）

      • 属性tabindex="-1"
      • 标签:focus{outline:none;}

目标伪类

• :target

  • 锚点变化，：前不能加标签

    • :target{color:green;}
      所跳向的目标就会变色
      

语言伪类

• :lang

状态伪类

• :enabled

• :disabled

  • <button disabled>  </button>
    :disabled{    }
    

• :checked

结构伪类

• :nth-child(3)
  • 所有父类的第3个孩子
  • p:nth-child(3)
    • p在兄弟中排第三,第三个不是p,css样式就会失效
  • :nth-child(n)
    • n为自然数0,1,2,3,4,5,6,7,8,9.........
    • 2n =even
    • 2n-1=odd
    • 3n
    • -n+5选中前几个就加几
    • .........
  • p span:nth-child(2)
    • p的后代中,span为子元素且是第2个子元素,第2个不是p,css样式就会失效
• :nth-last-child(3)
  • 倒数第3个子元素
  • :nth-last-child(2n)
    • 倒着数2,4,6,8
  • 与:nth-child()相反
• :nth-of-type()
  • p:nth-of-type(3)
    • p为子元素且为p标签的第3个
  • p:nth-of-type(2n)
  • 前面不写标签,就是所有标签的偶数
• :nth-last-of-type()
  • 与:nth-of-type()相反
• :first-child 不加第几个
• :last-child
• :first-of-type
• :last-of-type
• :root 标签可省略
  • 就是html元素
• :only-child
  • 父元素中唯一的子元素
  • html为唯一子元素
    • 使用时前面要加目的标签,使用交集选择器
    • 使用前面加body使用后代选择器
• :only-of-type
  • 父元素中唯一的这种类型的子元素
  • html为唯一子元素
    • 使用时前面要加目的标签,使用交集选择器
    • 使用前面加body使用后代选择器
• :empty 标签可省略
  • 选中元素内容为空的,空格不算空

否定伪类

• :not(标签选择器,类选择器,id选择器,属性选择器,通配选择器,伪类), 除去标签不含内容
• body :not(.class){ }

10.伪元素

• 伪元素可以写一个冒号,建议写两个

::first-line

• p::first-line{ }

::first-letter

• p::first-letter{ }

::before

• 标签::before{ content="内容";color:green;},标签前面加文字图片 ,content不能省略
• 将标签改成块,content写成content：""也 不能省略
• content:url(图片地址);

::after

• 标签::after{content="内容";font-size:20px;},标签后面面加文字图片 ,content不能省略
• 将标签改成块,content写成content:""也 不能省略
• content:url(图片地址);

文字样式

font

• size
  • em 直接 基于父元素
  • px
  • 百分比 基于父元素
  • 最好设置为偶数（利于文字对齐）
• family
  • 可设置多字体：font-family：宋体，微软雅黑，小宋 ； 中间用逗号隔开,依次从电脑识别都没有显示默认
  • 字体中有空格用单引号引起来‘times new roman’simsun（宋体）
  • 英文字体只适用于英文,中文适用于中英文
    • 如果想中文用中文字体,英文用英文字体,将英文写在前面,中文写在后面
  • 网络字体 *
• style
  • normal
  • 斜体
    • italic
    • oblique:强制斜体
• weight
  • bold:700
  • nomal:400
  • 100~900
• color
• variant 变形
  • samll-caps
    • 将小写字母替换为和小写子母一样大的大写字母
  • normal
• font缩写
  • color不能写进去,最少包含size family两个值并不能调换顺序,/line-height可以省略
  • font：style variant weight size/line-height family;

间距

• letter-spacing
  • 字间距
  • 可以负数,默认为0
  • 中英文都可以
• word-spacing
  • 单词间距
  • 可以负数,默认为0
  • 只针对英语

行高

• height

  • 未设置height时,height由内容撑起

• line-height

• 严格定义为两个基线的距离

  • 上行距+字体大小+下行距=行高
  • line-height=height时文字在div中上下居中,只设置line-height也居中
    • line-height：20px
    • scale比例值（跟文字比）line-height：2
    • line-height：30%

段落样式

text

• text-indent
  • px
  • em(中英文混写,会出现对不齐)
    • 当前字体为大小px时,1em=当前字体大小*1
    • 最里层嵌套
      • 当前字体大小为em时,1em=父元素字体大小*1
      • 当前字体大小为rem时,1em=htm根元素字体大小*1
  • rem
• text-transform
  • uppercase 每个单词大写
  • lowercase 每个单词小写
  • capitalize 每个单词首字母大写
  • none
• text-decoration
  • line-through
  • overline
  • underline
  • none
• text-align
  • 图片可用
  • 两层div,里层div在设置了width后,不在继承align,原因:div是块独占一行,即使看起来没有占一行
  • left
  • right
  • center
  • justify(两端对齐,左右两端没空格)
    • 最后一行没有效果
    • 最后一行设置
      • text-align-last:justify;

backgroud

• color
• size
  • auto 默认 图片按原始大小
  • contain 缩放背景图片,使背景等于宽或高,就不在缩放
  • cover 缩放背景图,使图片完全铺满,会使图片扭曲
  • 百分比 相对于父元素
    • 一个值是宽,两个值是宽和高
  • 具体大小
    • 一个值是宽,两个值是宽和高
• image
  • 设置了具体宽高才会显示图片
  • 盖在color上面,即加一层
  • 用逗号隔开,可以设置多张, 所有图片叠加在一块,最前面的显示在最上面,只有前面的失效才会显示后面的
  • url();
• repeat
  • repeat 默认
  • repeat-x
  • repeat-y
  • no-repeat
• positon
  • 设置右和下两个方向,只设置一个值,另一个方向默认center
  • 具体值
    • 可以设置负方向,超出部分会隐藏
  • 方向
    • left center right top bottom
• attachment
  • scoll 内容部分出现滚动,背景固定,背景在浏览器页面中可以滚动
  • local 内容部分出现滚动,内容和背景都滚动,背景在浏览器页面中可以滚动
  • fixed 内容部分出现滚动,背景固定,,浏览器页面背景图片固定
• 缩写
  • position/size
  • 没有顺序

• image网页重要组成
• background-image装饰可有可无

color

• 前景色包含：文字，装饰线，边框，外轮廓等

• 单词表示法

• 16进制表示法(建议)

  • #rrggbb=#rgb
  • #000000=#000 最小值:黑色
  • #ffffff=#fff 最大值:白色

• 三原色表示法

  • 0~255
  • rgb（0，0，0）

透明色

• rgba(0，0，0,0~1)

  • 只有背景透明，内容不透明
  • alpha
    • 0 完全透明
    • 1 不透明
    • 小数点可以省略，写成 .5
  • background-color: rgba(0，0，0,0.5);

• transparent

  • 完全透明
  • background-color: transparent;

• opacity

  • 0透明~1不透明

  • 透明度为0占空间

  • 所有元素都透明

  • background: red;
    opacity:0.5;
    

span

• 宽高无效
• 背景色只在文字后面
• 用来显示一些关键字

outline

• 使用outline查看div布局
  • div{outline:2px green red !important}

margin

• margin:0 auto;
• margin:20px 0 0 auto;

隐藏元素

• display
• visiblity
  • visible
  • hidden
    • 隐藏后仍占据空间

overflow

• 控制溢出的行为
• visible 默认值
• hidden 溢出部分被隐藏
• scorll 滚动
  • 内容小于盒子大小滚动依然出现
• auto 判断是否需要滚动
• overflow-x 水平
• overflow-y 垂直

换行

• 连续英文会看成一个单词
• break-all 会换行
• word-wrap：break-word（强烈低的换行）
• word-break：break-all（强烈换行）

cursor

• 光标
  • auto 自动切换样式 默认
  • default 箭头
  • pointer 小手
  • text 竖线
  • none

clear

• 非浮动元素使用
• left 使用元素的顶部低于之前所有左浮动元素的底部
• right 使用元素的顶部低于之前所有右浮动元素的底部
• both 使用元素的顶部低于之前所有浮动元素的底部

transform

• 形变
• tanslate(x,y) 平移
  • x是水平方向,y垂直方向
  • 一个值是水平方向
  • 值类型
    • 百分比参照本身宽高
    • px
• rotate (deg) 旋转
  • 旋转点在中心
  • 正值顺时针,负值逆时针
• scale (x,y) 缩放
  • 一个值是整体
  • 值类型为纯数字,不变时1
• skew (deg,deg) 倾斜
  • ±90deg,±270deg都不存在
  • 一个值时是水平方向
  • 任一个取值为0就是一个方向
  • skewx(deg)
    • 缩放y轴
    • 等同于skew(degy)
    • 取正值,y轴逆时针为正
    • 取负值,y顺时针为负
  • skewy(deg)
    • 缩放x轴
    • 取正值,x轴顺时针为正
    • 取负值,x逆时针为负

transform-origin

• 变形原点
• 一个值x,两个值x和y
• 取值
  • 方向
  • px
  • 百分比 参照元素本身

transition

• 过渡动画
• transition: 对象 动画时间 变化速度 动画开始等待时间;
• transiton-property:width height all display 不能使用
• transition-duartion:s ms
• transition-timing-fuction: liner 匀速
• transition-delay: s

盒子模型

margin

• 两个值 将下左省略
• 三个值 将左值省略,和右一样
• 上右下左
• margin-top百分比是相对父元素宽度
• margin-left 百分比是相对父元素宽度

折叠

• 只针对上下
• margin-top和margin-bottom
  • 相同只显示一个
  • 不同那个大显示那个
• 防止折叠
  • top和bottom只设置一个

传递

• 只针对上下
• margin-top
  • 子元素和父元素内容顶线重合,子元素margin-top会传递给父元素,整体向下移动
  • 父子元素都设置margin-top会使用较大的margin
• margin-bottom
  • 子元素和父元素内容底部线重合,父元素height为auto,子元素margin-bottom会传递给父元素
• 防止传递
  • 父元素设置padding-top/bottom
  • 父元素设置border-top
  • 触发bfc
    • block format content 块级格式化上下文
    • 浮动
    • overflow设置为非visible

margin负值

• 设置外边距,父元素宽度不够导致的换行浮动
  • 伪类,并不是所有浏览器都兼容
  • 块级元素宽度计算(已将最外层宽度定死)
    • 消除最后一个元素margin多余
    • 统一设置margin-left/right,在外面加一个父元素层,然后将加的父元素层的margin-left/right设为缺少宽度的负值,加大父元素宽度
    • 公式即盒模型 块宽度=padding+margin +content +border,考虑值为0的padding border margin
• 设置边框,父元素宽度不够导致的换行浮动
  • 方法一
    • 已将最外层宽度定死,会多边框需要重叠去掉一个边框
    • 先用margin-right/left的负值将子元素浮动在一行
    • 然后子元素用margin-right/left的负值将边框重合
      • 第一个子元素设置margin-right负值,前面没有参考值所有不动
      • 最后一个子元素设置margin-left负值,后面没有参考值所有不动
  • 方法二
    • 子元素添加右和下两个方向的边框,父元素添加左和上两个方向的边框,不会产生多边框问题,不需要重叠去边框
    • 只需遵守盒子宽度计算就行,将子元素宽高减少1个边框值

border

• 两个值 将下左省略
• 三个值 将左值省略,和右一样
• 上右下左
• border-width
  • border-top-width
• border-corlor
• border-style
  • solid
  • double
  • dotted 点线
  • dashed 虚线
  • none
  • inset
  • outset
  • groove 类似与相框
  • ridge 类似与相框
• 缩写时不注重顺序
  • border:2px solid red;
  • border-top:2px solid red;

圆角效果

• border-radius

• border-top-left-radius: ;

• 画圆

  • 值设为宽的一半,加边框时也要计算
  • 值设为百分比:参考border+padding+width

边框形状

• 将weigh和height设为0,利用border制作形状,将不需要的border设置为tranparent,或利用旋转tranform

• border-top: 200px solid transparent;

• width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid blue;
  transform: rotate(-45deg);
  margin: 200px;
  实现下三角
  

padding

• 两个值 将下左省略
• 三个值 将左值省略,和右一样
• 上右下左

content

• width
  • 不设置宽和高,内容随窗口变化,不会出现滚动条
  • max-width
    • 小于这个值缩小窗口内容就会变化
    • 文字超过这个值就会换行
  • 以下设置width就是固定内容
  • width 设置后窗口小于等于这个值就固定,会出现滚动条
  • min-width 缩放时窗口小于等于这个值固定,会出现滚动条...大于这个值就变化 宽度正常显示,相当于加了一个缩放范围
• height 只要设置就会出现上下滚动
  • 只设置高,小于高就会出现上下滚动 缩小会存在溢出
  • min-height 缩小不会存在溢出
  • max-height 缩小会存在溢出,会出现滚动

旋转

• transform:rotate(-45deg);

outline

• 外轮廓,不占空间
• 属性跟border类似
• 取除a,input的focus轮廓效果

阴影

盒子阴影

• box-shadow

  • color

  • inset 向内扩散

  • length

    • 第一个 水平放向偏移,正数向右
    • 第二个 垂直放向偏移,正数向下
    • 第三个 模糊半径
    • 第四个 四周延申

  • 顺序任意

  • 多个阴影用逗号隔开 方向只向一边,另外三边会有阴影

  • box-shadow:0 5px 5px rgba(0,0,0,0.5);
    

文字阴影

• text-shadow
  • 类似与box-shadow
  • 适用于::first-line 和 ::first-letter
  • 没有inset
  • 长度2到3个

box-sizing

• content-box 默认即标准盒子模型
  • 宽高设置的时content
  • 设置padding border 盒子变大
• border-box IE8以下默认
  • 宽高设置的是整体包含content+padding+border

标准流

• normal flow
• document flow 又称文档流 常规流 正常流
• 占用空间,不便于实现层叠

脱标元素特点

• 脱离标准流的元素

  • position:fixed/absolute
  • float

• 特点

  • 不设置宽高由内容决定
  • 可以随意设置宽高
  • 其他元素不知该元素存在,被父元素无视宽高

• float:left/right position:fixed/absolute时和display关系

  • 行内元素,内联,表单内容,变为块
  • inline-table变为table
  • block还是block,其他的原来是什么元素,还是什么元素

定位

position

• 移动后可产生层叠
• 方向是距离四个方向边框距离

static

• 静态定位 默认 按照标准流布局

relative

• 相对定位 相对于原来位置 按照标准流布局,移动后原来位置为空,占位

fixed

• 固定定位 相对于浏览器视口
• 只要设置就不再占用空间,后面元素补位,不跟随画布滚动

absolute

• 绝对定位

• 祖先元素非static,找不到相对于浏览器视口,找到就是相对于该层视口

• 只要设置就不再占用空间,后面元素补位

子绝父相

定位技巧

• 定位参照对象宽度=left+margin-left+right+margin-right+绝对定位元素占用宽度
• left/right/bottom/top:auto; 默认
• margin-left/right/bottom/top:0; 默认
• 定位参照对象高度=top+margin-top+bottom+margin-bottom+绝对定位元素占用高度
• 应用
  • 完全占据父元素
    • left=right=0
  • 水平,垂直居中
    • 子元素必须有固定宽高
    • margin-left=margin-right=auto
    • 浏览器会对margin-left:auto等分,对left:auto不可以等分

元素的层叠

• 定位元素>浮动元素>标准元素(最下面)

• 都是定位元素,不写z-index ,html中后面的在上面显示

z-index

• 默认auto,看作0
• 设置定位元素层叠顺序,非static
• 可取正数,负数,0
• 兄弟关系,层叠顺序按取值大小排序,值相等,后面的在上面
• 不是兄弟关系,找相邻的祖先,如果两个祖先都不是定位,不重叠,若有一个祖先定位,比较祖先取值

浮动

规则

• 浮动会触发bfc

• 浮动时朝着左右方向移动,遇到父元素边框或浮动兄弟元素边框为止,若兄弟元素没有浮动,还是移动到父元素边框

• 浮动元素不能和行内级元素层叠,行内级元素会被推出,可以理解为换位置

  • 块中文字也是行内元素
  • 被父元素无视宽高,但仍占位

• 行内级元素浮动后和其所在行顶部重合

• 浮动元素不能重叠,若本行空间不够将向下一行浮动

• 浮动元素顶部不能超过父元素顶部,不管左右浮动,也不能超过之前所有浮动元素的顶部(即参照上一个浮动位置)

• float

  • left
  • right

高度坍塌

• 浮动脱离标准流,父元素无视浮动元素的宽高,导致布局混乱

解决方法

• 将父元素高度写死

  • 扩展性不好,但是不需要清除浮动,不需要另外添加东西的可以使用

• 在父元素后面添加空的div隔断层

  • 类中clear:both;
  • 增加无意义标签,维护麻烦,违反了样式与结构分离原则
  • 父元素没有高度

• 在父元素后面添加br

  • <br clear="all"/>
    

  • 父元素有高度

• 父元素使用::after伪元素

  • 类名::after{
    clear:both;
    content:"";
    display:block;  <!--after是行内元素  -->
    }
    

  • 父元素有高度

  • 早期浏览器存在兼容问题

  • 类名::after{
    clear:both;
    content:"";
    display:block;  <!--after是行内元素  -->
    height:0;<!--伪元素有高度-->
    visiblity:hidden;<!--高度设为0仍然能看见-->
    }
    类名{
    *zoom:1;<!--解决缩放问题,兼容ie6和ie7-->
    }
    

浮动和定位的使用

水平居中

普通文本

• text-align:center;

行内元素

• text-align:center;

图片

• text-align:center;
• 移动居中
  • tranform,父margin

inline-block

• text-align:center;

block居中

• margin:0 auto;
  • 原理
    • margin-left/right默认为0 不分配
    • margin-left/right为auto margin-lrft=margin-right
    • margin-top/bottom 为auto值为0,父元素高auto时才会垂直居中
    • margin-top/bottom 父元素高auto,只能和子元素等高 垂直居中实现不了,使用定位
      • top:50%; 父元素一半
      • transform:translate(-50%);参照自己
• 会继承父元素text-align

块级元素

• transform:translate(50%);参照自己

行高问题

• 行内级元素
• 内容高度➡行盒➡块高度
• 行盒需包裹本行所有内容
• 行内级元素默认基线对齐,底部会存在部分空间
• 内联中无内容基线对齐,有内容为内容最后一行的基线对齐

vertical-align

• baseline 默认

• top 顶部对齐

• middle 图片中心点与x中焦点对齐,存在文字下沉

• bottom

• 解决基线对齐底部存在空间问题

  • vertical-align:top middle bottom

• 垂直对齐

  • 无文字时

    • font-size:0;
      vertical-align:middle;
      line-height
      

  • 有文字时

    • position:relative;
      top:50%;
      transform:translate(-50%);
      

Emmet语法

生成html代码

• ! 按enter
• html:5

后代嵌套

• div>p>span>strong
  • 多的时候不建议用
• div>p*5

兄弟结构

• h2+p+div

后代兄弟混合使用

• div>p+h2+a+P>span

• div>p*4+span*3
  

• div>p>span^h2+a

• ^^上两级

• ^上一级

• div>(p>span)+a+strong

• ( )表示一个组合和a,strong是兄弟

属性

• div.class名
• div#id名
• div[title="属性名"]
• div#main>div.box+p.p1+span.title^div.footer>div.box2
• 多个属性
  • div#main.one.two[title="属性"]

内容

• div{这是内容}
• div.oen{这是内容}

数字

• $占位

• *n是这一行或这一级

• 

  div.box$*4

  ```

• div>p{这是内容$}*5 
   <div>
          <p>这是内容1</p>
          <p>这是内容2</p>
          <p>这是内容3</p>
          <p>这是内容4</p>
          <p>这是内容5</p>
  </div>
  

• ul>li.class${box$}*5  li可省略
  <ul>
          <li class="class1">box1</li>
          <li class="class2">box2</li>
          <li class="class3">box3</li>
          <li class="class4">box4</li>
      </ul>
  

隐式标签

• .box=div.box
• #box=div#box
• .class>#id=div.class>div#id
• table>#row$*4[colspan=2]

css

• w100+h200+m20(margin)+p30(padding) 默认px

• m10-20-30-40

• p-10-20--30

• fz20=font-size:20px

• fz1.5=font-size:1.5em

• fw700=font-weight:700px

• lh2=line-height:2;

• bgc

• dib=display:inline-block;

部分功能

css sprite

• css精灵图

  • 减少http请求数量,加快网页响应速度,减轻服务器压力
  • 减少图片总大小
  • 解决命名困扰

• css图像合成技术,将小图片合成到一张大图上利用css定位来显示相应部分图片

• 移动的是精灵图

• .ifm ul li{
  background-image: url(inf.png);
  }
  .ifm ul .one{
  background-position: -205px -111px;
  }
  

隐藏字

text-indent: -999px;飞出屏幕

body中间显示

.wrap{
width:999px;
margin:0 auto
}

图片缩放居中

height:400px;
background-image: url(xiyou.jpg);
background-position: center -81px;
min-width: 1200px;

居中考虑,图片一半减去父层的一半就是移动距离即先左移图片一半,再右移动父元素的一半
div{
overflow: hidden;/*设置宽度 */
min-width: 1000px;
}
img{
position:relative;
transform:translate(-50%);必要时用left:0;归位
margin-left: 50%;
} 相对定位

模仿百度搜索

<form action="http://baidu.com/s">
<input type="text" placeholder="请输入搜索内容" name="wd">
<input type="submit" value="百度一下">

图片视觉差

图片加箭头

正方形加上,左边框,白色背景,然后用transform旋转
.sj{
                width: 10px;
                height: 10px;
                border-top: 1px solid #eaeaea;
                border-left: 1px solid #eaeaea;
                background-color: #fff;
                transform:rotate(45deg);
            }

固定侧栏

<div class="nav">
        <a href="#">
           <i></i>
           <span>签到</span>
        </a>
        <a href="#">
           <i></i>
           <span>购物车</span>
        </a>
        <a href="#">
           <i></i>
           <span>APP</span>
        </a>
        <a href="#">
           <i></i>
           <span>TOP</span>
        </a>
   </div>
.nav a:hover i{
background-image: url(q.png);
/* 换图片 */
}

邮箱下拉

 <div>
        <h5>邮箱</h5>
        <ul>
            <li><a href="#">qq邮箱</a></li>
            <li><a href="#">126邮箱</a></li>
            <li><a href="#">139邮箱</a></li>
        </ul>
    </div>

手机考拉

 <a class="app" href="">
        <span class="phone">手机考拉</span>
        <span class="main">
            <span class="sj"></span>
            <img src="erwei.png" alt="二维码">
            <span>新人下载APP</span>
            <span>领10元无门槛红包</span>
        </span> 
</a>

平均分布

text-align:justify;
text-align-last:justify;
text-align-last注意字体用text-align-last:center;

导航栏

居中
分别设置宽
两次:hover