html-css

目录

Day16

  //空格网页实体 
>      >
&lt;      <
&copy     @
    
有序列表
<ol>
    <li>有序</li>
    <li>有序</li>
    <li>有序</li>
</ol>

自定义列表
<dl>
    <dt>标题</dt>
    <dd>内容</dd>
    <dd>内容</dd>
</dl>

 overflow:hidden; 自动检索子元素高度。     
 clear:both; 清除浮动  (在最后一个浮动元素之后添加一个块元素 来清浮动)
  • 万能清除法:配合第二种方式通过伪元素实现
clear:after { content:""; clear:both; display:block; visibility:hidden;}

visibility:visible/hidden; (可见/隐藏)
  • 浏览器内核:

    • Trident IE
    • Gecko 火狐
    • Webkit 原谷歌现苹果(Safari内核,Chrome内核原型,它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核)
    • Blink 现在opera和谷歌 (由Google和Opera 开发的浏览器排版引擎)
    • Presto 原opera ( 迅速的)
  • 图片整合

    • 通过图片整合来减少对服务器的请求次数,从而提高页面加载速度。
    • 通过整合图片来减小图片的体积。
    • 增加了开发人员的负担。
  • hack:如统一某元素鼠标指针形状为手型,应添加声明:cursor:pointer;

背背背背背背背背背背

BUg
行内块元素换行会产生4px空隙
BUg

*** #三个星号即以上 可以显示 虚横线效果

Day01

  • 标签
  • 双标记
    • <标记 属性=“属性值” 属性=“属性值”></标记>
  • 单标记
    • <标记 属性=“属性值” />

**写在<>中的第一个单词叫做标记,标签,元素。
标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”号内。
一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。
空标记没有结束标签,用“/”代替。

  • 块状元素(天生能换行的元素)

  • 行内元素(天生不能换行的元素)

  • 行内块元素(天生不能换行但能设置宽高的元素)

  • 表格元素

  • 行元素
      <b></b>     加粗的标签
      <i></i>     倾斜的标签
      <u></u>     下划线标签
      <strong></strong>   加重语气的加粗标签
      <em></em>       加重语气的倾斜标签
      <s></s>     删除线
      
      <span></span>   文本标签
      <a></a>     超链接标签
      href        超链接属性
      target=“_blank” 新窗口打开
    

Day02

  • 行内元素

a b strong span img label button input select textarea

  • 块元素

header form ul ol table article div hr aside figure
canvas video audio footer

  • 表格
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

<table></table> 表格
width=“500” 表格宽度
height=“300”  表格高度
border=“1”  表格边框
bgcolor=“red” 表格背景颜色
cellspacing=“10” 单元格与单元格之间的距离
cellpadding=“10” 单元格与内容之间的距离
<tr></tr> 表格行
align=“left/center/right” 水平对齐方式
<td></td> 表格列
colspan=“2” 合并列   rowspan=“2” 合并行
  • 表单元素
      <form></form>表单
      name=“定义表单名”
      method=“get/post” 传输方式
      action=“请求地址”
      
      <input type=“表单元素类型” />表单元素
      text 单行文本框
      password 密码输入框
      submit 提交按钮
      reset 重置按钮
    
  • css选择器
    • 元素选择符(类型选择符)
    • 通配符
    • id选择符
    • class选择符
    • 群组选择符
    • 后代选择符
    • 伪类选择符
  • 伪类选择符
    • a:link {属性:属性值;} 初始化状态
    • a:visited {属性:属性值;} 被点击后的状态
    • a:hover {属性:属性值;} 当鼠标滑过时候的状态
    • a:active {属性:属性值;} 当鼠标按下时候的状态

margin:0 auto; width:数值px;
能让块元素居中的属性

Day03

  • 文本相关属性
    • font-size:12px; `3pt=4px,em是根据自身的字体大小来决定多少像素
    • font-style:normal/ italic [设置文本为斜体]
    • font-weight:normal(100-500)/ bold(600-900) [设置文本为粗体]
    • font-family: “文本字体1”,”文本字体2”; [文本类型]
    • text-align:left/center/right [文本水平对齐方式]
    • vertical-align:top/middle/bottom[垂直对齐方式]
    • line-height:数字px;[设置文本在一行内的高度]
    • 设置文本简写方式
      • font:加粗 倾斜 文本大小/行高 “字体”;
      • 最简方式 font:文本大小 “字体”;
      • 如果没有设置到的视为缺省值还原默认

text-decoration 文本修饰

none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
text-indent 首行缩进

文本大小写

text-transform:

uppercase 单词都大写
lowercase 单字都小写
capitalize 每个单词首字母大写

字间距{letter-spacing:value;} 控制英文字母和汉字的字距。
词间距{word-spacing:value;} 控制英文单词词距。

列表相关属性
  • 列表 li 独有的属性
    • list-style-type[设置列表符号]
    • disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);
    • list-style-image:url(路径); [自定义图片列表符号]
    • list-style-position:outside(默认外边)/inside(里边);[定义符号所在位置]

list-style:none;去掉列表符号

说明:通常我们都清空列表符号 因为列表符号在各浏览器显示无法统一 并且无法随心所欲的控制符号离文本内容的距离。

背景相关属性
  • 背景颜色

    • background-color:#f00;
  • 背景图片

    • background-image:url(图片路径);
  • 背景图片平铺属性

    • background-repeat:
    • repeat 默认平铺
    • repeat-x 横向平铺
    • repeat-y 纵向平铺
    • no-repeat 不平铺
  • 背景图位置

    • background-position:值1(水平) 值2(垂直)
    • left/center/right/数值 top/center/bottom/数值
    • 数值可以设置负值
  • 背景简写:

    • background:颜色 图片路径 是否平铺 位置;
浮动属性
  • 浮动属性
    • float:
      • none 默认不浮动
      • left 左浮动
      • right 右浮动

说明:页面出现上下布局时都用2个兄弟块元素来实现 而左右布局时 行元素因无法设置宽高这一点 无法实现我们经常想要的效果 所以有了浮动属性 浮动属性就是让 所有元素能够实现左右结构而存在 但是浮动元素也有很多不敬人意的地方。

如果父框未设置高度 则会出现“高度塌陷”的问题
原因是浮动元素不占“文档流”

阻止高度塌陷的方式(清除浮动)
给最后一个浮动元素添加块元素 设置
clear:both;

Day04

盒子模型

  • 边框-border
    • 边框线型
      • (solid实线/dashed虚线/dotted点线/double双线)
    • 单边框设置
      • border-left: 单独设置左边框
      • border-right: 单独设置右边框
      • border-top: 单独设置上边框
      • border-bottom: 单独设置下边框
        简写: border:1px solid #f00;
  • 内边距-padding
    • padding 内边距(填充)
    • 在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。
  • 用法:

    • 1)用来调整内容在容器中的位置关系
    • 2)用来调整子元素在父元素中的位置关系。
    • 注:padding属性需要添加在父元素上。
    • 3)padding值是额外加在元素原有大小之上的,如想保证元素大小不变,需
    • 从元素宽或高上减掉后添加的padding属性值。
  • 属性值的4种方式:

    • 四个值:上 右 下 左 {padding:10px 20px 30px 40px;}
    • 三个值:上 左右 下 {padding:10px 20px 30px ;}
    • 二个值:上下 左右 {padding:10px 20px ;}
    • 一个值:四个方向 padding:20px
  • 外边距-margin
    • 在设定页面中一个元素离另一个元素之间的距离。
  • 1)浮动元素出现高度塌陷问题可以通过overflow:hidden;方式来解决

  • 2)margin-top向父元素传递效果也可以被overflow:hidden; 来解决

      &gt;      >
      &lt;      <
    

overflow 除默认值visible以外其他值都居然自动检索子元素内容高度的功能。

  • 坑1

两个元素上下都设置margin会重叠,左右不会

  • :不要给上面的元素设置margin-bottom,一般都给下面的元素设置margin-top
  • 坑2

第一个块状子元素的margin-top 会“无限”的像父元素传递

    • 1.给父元素设置border-top
    • 2.给父元素设置padding-top
    • 3.给父元素设置浮动float
    • 4.给子元素设置浮动float
    • 5.给父元素设置一条神奇的属性overflow:hidden;//溢出隐藏
  • 坑3

行元素 上下盒模型会穿透其他元素

  • :不要给行元素设置上下盒模型

voerflow:hidden;

可以解决float高度塌陷问题,overflow:hidden;
会自动检索子元素高度给父元素设置;

  • 还原网页
    • border:0;//清除边框
    • background:none//清除背景
    • 数字和小写字母会小于实际图片3像素;
    • 行元素换行会出现5px的空格
    • vertical-align:top/middle/botoom图片设置

DAY05

文本溢出

首先需要4个属性配合使用:

  • width:200px; //文本超出多少才隐藏

  • white-space:nowrap; //强制不换行

  • overflow:hidden; //溢出隐藏属性

  • text-overflow:ellipsis; //文本溢出隐藏时出现省略号

overflow 溢出属性

  • visible 默认值

  • hidden 溢出隐藏

  • scroll 滚动条

  • auto 超出时出现滚条 (body 的默认属性)

white-space:nowrap; 文本强制不换行

  • 一般字母和数字没有空格不会换行 但中文会以文字为单位自动换行 这样在一行内文本是不会溢出
    text-overflow:ellipsis; 文本溢出时出现省略号的效果

  • 扩展 如何让字母和数字没有空格的情况下自动换行 word-wrap:break-word; 自动换行属性

    • 行元素换行有6px距离 <a></a>

DAY06

块元素 (block)

默认宽度和父框一样宽 强制换行 能设置宽高
div p h1-h6 form dl dt dd ul ol

Day07

  • 块元素 (block)

    • div p h1-h6 form dl dt dd ul ol

    默认宽度和父框一样宽 强制换行 能设置宽高

  • 行元素 (inline)(内联元素)

    • a span b strong i em u s del

    元素不能设置宽高 在一行显示 宽高由内容撑大

  • 行内块元素(inline-block)

    • 在一行显示 并且能设置宽高 能设置宽高的行内元素
    • img input select textarea
  • 不显示元素(none)

    • 该类型是特点是元素隐藏不占文档流 有点类似备注的效果
    • 没有元素默认是这个类型
  • 扩展 其实元素类型有18种之多但常用的类型只有4种

    • block inline inline-block none

p标签内禁止放天生的块元素

h标签内部禁止放h标签

  • display:(元素类型)
    • block
    • inline
    • inline-block
    • none
      [可以转换元素类型的属性]
  • display:none;消失类型

图片垂直居中

  • 1

    • 设置父元素line-height:(行高)
    • 设置高度height
    • 设置图片vertical-align:middle;
  • 2

    • 设置div父
    • 子 img i
    • div设置height
    • div-->text-align=center;
    • img-->vertical-align=middle;
    • i-->vertical-align=middle;height=100%;display=inline-block;

有满屏背景的用两个div,没有满屏背景的用一个div

DAY07

定位属性及应用

  • position:(定位属性)
    • static 默认值

      • 所有元素默认的定位属性就是static 一般不用
    • absolute 绝对定位 (完全脱离文档流)

      • 绝度定位不会永远固定在浏览器某处
      • 自动向上检索 以最近的定位元素作为父元素 若检索不到就以html为父元素 来定位
    • relative 相对定位

      • 根据自身初始所在位置来定位
    • fixed 固定定位(完全脱离文档流)

      • 根据html来定位永远根据浏览器定位
    • sticky 粘性定位(css3属性)

      • relative和fixed合体 根据overflow来定位

只有定位元素可以使用left right top bottom z-index 属性

透明属性

透明属性opacity:0.5; 透明取值范围0-1 IE 678不支持

只支持IE fliter:alpha(opacity=50)

DAY08

子元素的盒模型总和等于父元素的width

  • 最小高度自适应 min-height

    • min-height:最小高度;(IE6浏览器不识别该属性)
    • IE6 7兼容 *height
  • 过滤器:

    • _(只有ie6能识别) _height:value;
    • (只有ie6、7识别) *height:value;
    • !important 优先级最高 (ie6识别不了)height:value !important;
  • 伪元素选择符:

    • :after 最后一个子元素之后添加一个类似span的伪元素
    • :before 第一个子元素之前添加一个类似span的伪元素
      注:这两个伪元素必须添加 content 属性否则伪元素无效

:first-letter 定义内容区第一个字符的样式。(设置第一个文字)
:first-line:定义内容区第一行的样式。(设置第一行文字)
ie8以下不支持伪元素

元素隐藏方法

  • display:none;//不占文档流
  • opacity:0;//占文档流
  • visibility:hideen;占文档流
  • position:absolute/relative;left:-9999px;//absolute不占/relative占文档流

DAY09

  • 图片间隙

    • div中的图片间隙
    • 描述:在div中插入图片时,图片会将div下方撑大三像素。
    • hack:将<img>转为块状元素,给<img>添加声明:display:block;
  • 表单元素在一行高度不一致

    • 给表单元素添加声明:float:left;//一行表单加浮动
  • 按钮元素默认大小不一致

    • 按钮元素的padding和border 大小会算在width,height里面
  • 鼠标指针bug

    • 描述:cursor属性的hand属性值只有IE浏览器识别,其它浏览器不识别该声明,cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
    • hack:如统一某元素鼠标指针形状为手型,应添加声明:cursor:pointer;
  • IE图片边框bug

    • a标签里的img会产生边框 解决给img添加border:0;

Day10

  • seo
    • 网页三剑客 title,keyword,description
    • 图片优化(alt属性,title属性)
    • PageRank(pr值,友情链接)
  • css规范

    • 命名方法(语义化命名,结构化命名)
    • ID:结构化: #header #footer
    • class: .border0 . red .font12 .clear
  • CSS命名规则

    • 建议使用小写字母
    • 以英文字母开头,后面可以连接数字、字母、下划线、连接线,建议尽量使用英文字母,适当使用下划线和连接线;
    • 词必达意,名称要反映用途和相关信息,同时也要简短。
  • 高级表单

    • 表单字段集 <fieldset></fieldset>
    • 字段级标题 <legend></legend>
    • <textarea>文本内容</textarea>多行文本框
<select>下拉框
    <option>下拉框内容</option>
    <option selected=“selected”>默认内容</option>
</select>
//选中selected="selected"
  • input
    • <input type=“表单元素类型” />表单元素
    • radio 单选框
      • checked=checked 默认选中
    • checkbox 复选框
      • checked=checked 默认选中
    • file 上传文件
    • button 自定义按钮
    • Image 图片按钮 <input type="image" src="路径" />
    • hidden 隐藏
    • 提示信息标签 <label for="绑定控件id名"></label>
  • 高级表格
    • 单元格间距(该属性必须给table添加)

      • border-spacing:value;
    • 合并相邻单元格边框table添加

      • border-collapse:separate(边框分开)/collapse(边框合并);
    • 无内容单元格显示、隐藏

      • empty-cells:show/hide;
    • 表格布局算法

      • table-layout:auto/fixed(固定宽度,不会随内容多少改变单元格宽度)
    • 自动表格布局:列的宽度是由列单元格中没有折行的最宽的内容设定的。

      • 缺点:较慢(因为它需要在确定最终的布局前访问表格中的所有内容)。
      • 优点:灵活
    • 固定表格布局

      • 优点:加快运行的速度,允许浏览器更快的对表格进行布局。
      • 缺点:不太灵活
  • 表格标题

    • <caption>标题内容</caption>
  • `表格布局元素

    • th:表格列标题(放在tr里)
    • valign="top/bottom/middle/baseline" 垂直对齐方式(th td便签内属性)
    • rules="groups/rows/cols/all/none" 添加组分隔线
  • 表格行分组

    • <thead></thead> 表头
    • <tbody></tbody> 表体
    • <tfoot></tfoot> 表尾

Day11

新增的HTML5标签

  • 语义化标签
    • <header> 头标签
    • <nav> 导航标签
    • <section> 表示文档的结构、栏目
    • <footer> 页脚
    • <article> 文章标签
    • <aside> 侧边栏导航
    • <mark> 凸显文字

扩展:<main></main>

  • figure

    • 用来表示网页上一块独立的内容。
  • figcaption

    • 用来表示figure的标题
    • 作为第一个或最后一个元素
  • output

    • 显示表单元素结果。(对应input表单)
  • datalist

    • 提供表单选项列表
    • datalist.html
  • hgroup

      <hgroup>
          <h3></h3>
          <h4></h4>
      </hgroup>
    
  • dialog

    • 会话框 默认隐藏绝对定位居中
    • Open 属性 非隐藏
  • embed 嵌入插件标签

  • video

    • 定义视频,比如电影片段或其他视频流
    • *.mp4 *.ogg *.webM
    • <source src="xx.ogg" type="audio/ogg">
1.
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
2.
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
  • audio

    • 定义音频,比如音乐或其他音频流
  • canvas

    • 画布
  • 智能表单的使用和规范
      <input type="?" />
    
  • 地址栏

      <input type="url" >
    

输入无效地址会自动提示

  • 输入数字

      <input  type="number" value="25" min="10" max="100" step="5"/>
    
    • step 跳跃数
    • min 最小值
    • max 最大值
  • 输入电子邮件

    <input type="email"  required="required" multiple="multiple" >
    
    • required 判断是否为空
    • multiple 可用逗号分隔邮件地址

提示信息 placeholder
关闭智能表单验证 : novalidate=“false”
火狐关闭缓存:autocomplete=“off”

requires="requires"必填不能为空,通用属性

Day12

CSS3 选择器

  • 属性选择器

    • 权重为10

    • [title] 选择所有title属性的元素

    • [title=a] 选择所有title=a的元素

    • [title=“1”] 值为数字或特殊字符必须加双引号

    • [class=“a b”] 值为多个必须加双引号

    • [class~=“a”] 选择用所有单词为a的元素

    • [class|=a] 选择要么a要么a-开头的完整单词的元素

    • [class^=a] 选择所有a开头的元素

    • [class$=a] 选择所有a结尾的元素

    • [class*=a] 选择所有带有a的元素

  • 结构性伪类选择器(层级选择器)

    • :root 选择根目录 可以理解成html
    • :root{background:#f00;}
    • body{background:#00f;}
    • body :not(h1) 除子元素h1的所有子元素
    • p:empty 选择内容为空的元素(回车换行都不算空)
    • :target 选择被锚点选中的元素
    • first-child
      • ul li:first-child 选择第一个(子)元素
    • last-child
      • ul li:last-child 选择最后一个(子)元素
    • nth-child
      • ul li:nth-child(2) 选择第二个(子)元素
    • nth-last-child
      • ul li:nth-last-child(2) 选择倒数第二个(子)元素

        // 选择dl的后代元素dt并且dt必须是第一个子元素
        //w3school:选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式:
        dl dt:first-child{background:#ff0;}
        dl dd:last-child{background:#00f;}

  • nth-child(odd)奇数

    • ul li:nth-child(odd) 所有正数下第奇数个(子)元素
  • nth-child(even)偶数

    • ul li:nth-child(even) 所有正数下第偶个(子)元素
  • nth-of-type,nth-last-of-type

    • div p:nth-of-type(2) 有关这个元素的第二个(子)元素
    • div p:nth-last-of-type(2) 有关这个元素的倒数第二个(子)元素
    • div p:only-child 只有p元素是唯一一个(子)元素才有效
  • n元算

    • (n是从0开始计算无限大的数字)
    • ul li:nth-child(n+2) 匹配从第二个元素开始
    • ul li:nth-child(2n) 匹配偶数
    • ul li:nth-child(2n+1) 匹配奇数
  • UI状态性伪类选择器

    • 权重为10
    • :focus
      • input:focus 元素获取焦点时的状态
    • input:enabled 元素可以时候的状态
    • input:disabled 元素禁用时候的状态
    • input:read-only 元素只读时候的状态
    • input:read-write 元素非只读时候的状态
    • input:checked 元素被选中时候的状态
    • input:default 元素默认有checked的状态
    • input:indeterminate 元素都没选中过的状态只支持google
    • ::selection
      • input::selection 元素被选取的状态//只能设置color background-color;
  • 相邻兄弟选择器
    • +选择符
      • li+li 选择下一个元素
    • ~选择符

      • span~p 选择span之后所有的同级p元素
    • >选择符
      • .aaa>div 子选择器 只能选择亲儿子 class="aaa"下的第一层div
  • 文本与字体的相关属性

    • 兼容前缀

      • -o- Presto
      • -ms- Trident
      • -moz- Gecko
      • -webkit- Webkit
    • 优雅降级

      • 一开始就构建网站针对高版本向低版本进行兼容
      • border-radius:5px;
      • -o-border-radius:5px;
      • -ms-border-radius:5px;
      • -moz-border-radius:5px;
      • -webkit-border-radius:5px;
    • 文本阴影属性
      • text-shadow:x坐标 y坐标 阴影大小 颜色
      • text-shadow:5px 5px 5px #f00;
      • text-shadow:5px 5px 5px #f00,2px 3px 4px #00f;
      • word-break:
        • normal 默认
        • keep-all 只能在半角空格或连接字符处换行
        • break-all 允许在单词内换行(会整个单词都换行)
      • word-wrap:
        • normal 默认
        • break-word 允许在单词内换行(单纯的换行)
      • text-transform:
        • uppercase 单词都大写
        • lowercase 单字都小写
        • capitalize 每个单词首字母大写
  • 显示服务端字体
      @font-face {
      font-family:WebFont;
      src:url(“fonts/Fontin_Sans_B_45b.otf”);
      format("opentype");
      }
    
  • format 声明文件类型

    • opentype *.otf
    • truetype *.ttf
    • *.eot 格式文件不需要声明 format
  • 颜色值

    • rgba(155,155,155,0.5); 红色,绿色,蓝色,透明度
    • 只让背景透明 不让子元素透明
    • 例:background:rgba(0,255,0,0.5);
  • 盒子阴影

    • box-shadow: X轴 Y轴 模糊的 大小 颜色;
      • (可设置内阴影 inset)
      • box-shadow: 2px 2px 10px 1px #000;
      • box-shadow: 2px 2px 10px 1px inset #000;//内阴影
  • 与背景和边框相关样式(例:banground1.html)

    • background-clip : 设置背景显示区域
      • border-box padding-box content-box
    • background-origin 指定绘制背景图像时的起点
      • border-box padding-box content-box
    • background-size
    • background-size 指定背景中图像的尺寸
      • 大小 或 百分比
      • cover 按比例撑满背景
      • contain 刚好填满一边大小的尺寸
    • background-break 指定内联元素的背景图像进行平铺时的循环方式,浏览器支持不友好,暂时不需要了解
  • 圆角属性border-radius

    • border-radius:10px 设置圆角元素
      • 可以设置 1-4个值 有点类似盒模型设置
    • (border-radius:10px/10px; 左边设置水平半径右边设置垂直半径,这种方式几乎用不到)
    • border-top-right-radius:50px;
  • 边框颜色

    • border-color:#f00 #ff0 #f0f #00f;
  • 图片边框

    • border-image:
      • 图片路径
      • 4个方向
      • 宽度
      • 平铺方式
      • stretch拉升 round平铺

Day13

  • 怪异盒模型
    • box-sizing:border-box;
      • content-box 标准盒模型 (默认)
      • border-box 怪异盒模型
  • 弹性盒子

    • display: 弹性盒子类型
      • box:将对象作为弹性伸缩盒显示。 (伸缩盒最老版本)
      • inline-box:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒最老版本)
      • flexbox:将对象作为弹性伸缩盒显示。 (伸缩盒过渡版本)
      • inline-flexbox:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒过渡版本)
  • flex:将对象作为弹性伸缩盒显示。 (伸缩盒最新版本)

    • 父元素设置display:flex;子元素都被格式化为智能布局元素
    • inline-flex:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒最新版本)

注:设置在父元素上 使用弹性盒 float vertical-align 多列都无效

  • 弹性盒流向(设置父元素上)

    • flex-direction:

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

      • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
      • flex-direction.html
    • 弹性盒子子元素顺序(设置在子元素上)
      • order:
      • 负数靠前:(越小越前)
      • 0为原始位置
      • 正整数靠后(越大越后)
  • flex-grow
    • 弹性盒子分配剩余空间(设置在子元素上)
      • flex-grow :
      • 0为默认
      • 分配提成 数字
    • 检索弹性盒的收缩比率(子元素设置)
      • flex-shrink:
      • 默认:1
      • 数字
      • 注:溢出时计算比例
    • 检索弹性盒伸缩基准值(子元素设置)
      • flex-basis:
      • 默认:auto
      • 数值
      • 注:计算数值比例
    • 伸缩性(设置子元素上)
      • flex:
      • 按提成分配 数字
      • 0 0 百分比分配
        *伸缩换行 (适用于父类容器上)
    • flex-wrap:

      • nowrap:当子元素溢出父容器时不换行。
      • wrap:当子元素溢出父容器时自动换行。
      • wrap-reverse:反转 wrap 排列。
  • 主轴横向对齐 (设置在父类容器上)

    • justify-content:

      • flex-start: 左对齐
      • flex-end: 右对齐
      • center: 居中对齐
      • space-between: 分开对齐
      • space-around: 分开左右边距对齐
  • 主轴纵向对齐 (设置在父类容器上)

    • align-content:(没有center-没效果)
      • flex-start: 上对齐
      • flex-end: 下对齐
      • center: 居中对齐
      • space-between: 分开对齐
      • space-around: 分开左右边距对齐
      • strecth 上下拉升对齐
  • 侧轴对齐

    • align-items (设置在父) 、align-self (设置在子)
      • flex-start: 上对齐
      • flex-end: 下对齐
      • center: 居中对齐
      • baseline 基线对齐
      • stretch 上下拉升对齐

注:align-items基本与align-content差不多 就2个参数没有
弹性盒特性:
1.横向结构 默认高度和父元素一样高

flex简写 flex: 分配 0 10px;
flex: flex-grow、flex-shrink 、flex-basis缩写
默认值flex: 0 1 auto;
flex:none; flex:0 0 auto;
flex:auto; flex: 1 1 auto;
单一非负数字:该值为flex-grow值,flex-shrink为1,flex-basis为0%

  • 静态布局 (常见布局px)

  • 流式布局 (百分百布局)

  • 输入框布局

  • 悬挂式布局

  • 多列布局

    • 创建多列
    • column-count: 数字
      • 属性规定元素应该被分隔的列数
      • 规定列之间的间隔
    • column-gap:数值
      • 属性规定列之间的间隔
      • 列规则
    • column-rule:
      • 属性设置列之间的宽度、样式和颜色规则

响应式设计布局概念

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

width=device-width:宽度等于当前设备的宽度;
initial-scale=1:初始的缩放比例(默认为1);
maximum-scale=1:允许用户缩放到得最大比例(默认为1)
user-scalable=no:用户不能手动缩放;
@media screen and (max-width:1000px) and (min-width:700px){
    body{background: #ff0088;}
}
  • @media 媒体查询 (media query)
    • 基本语法
    • 外联CSS语法
      <link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />
      <link rel="stylesheet" href="mobile.css" media="screen and (max-width:320px)" />
      <link rel=“stylesheet” href=“medium.css” media=“screen and (max-width:1024px) and (min-width:320px)" />

Meta标签定义
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,
在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,
但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,
也可能比浏览器的可视区域要小。
(1)使用 viewport meta 标签在手机浏览器上控制布局

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

(2)隐藏苹果浏览器的工具栏和菜单栏。 全屏显示

<meta name="apple-mobile-web-app-capable" content="yes" />

(3)设置Web App的状态栏(屏幕顶部栏)的样式

<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

Day14

  • 新单位rem

    • rem是永远获取html的font-size值
    • (当屏幕尺寸是320px我想设置1rem=10% 那么就设置html的font-size:32px; 通过js来设置 屏幕尺寸除以10)

vw&rem混搭
100/设计图width
[1rem=font-size]
[1vw=moblie-width]
[1rem:1px/moblie-width;1rem=1px]

  • 移动端图片img
    • 必须填写width height

Day15

  • 写QQ界面

Day16

CSS3 渐变的语法及应用

  • 线性渐变

    • linear-gradient (方向[可选],颜色1,颜色2)
    • -webkit-linear-gradient(top,#ff8,#f80);-moz-linear-gradient(top,#ff8,#f80);
    • 就是,一个方向到另一个方向笔直进行渐变
  • 径向渐变

    • radial-gradient (正圆椭圆[可选],颜色1,颜色2)
    • 从起点到终点颜色从内到外进行圆形渐变
    • circle:渐变为最大的圆形;
    • ellipse:(椭圆)根据元素形状渐变,元素为正方形是显示效果与circle无异。
  • 重复渐变

    • repeating-radial-gradient
    • 会按照规律一层一层循环
  • 动画过度

    • transition:2s linear all;
  • 定义过度属性

    • transition-property: all 或 属性名,属性名
  • 定义过度时间

    • transition-duration: 2s
  • 延迟多少时间开始

    • transition-delay: 2s
    • transition-timing-function:
    • linear 匀速 ease(默认) 慢快慢
    • ease-in 慢开始 ease-out 慢结束
    • ease-in-out 慢开始慢结束
    • cubic-bezier 自定义贝兹尔曲线
      • 第一条小于1 第二条大于1小于2 第三条小于1 第四条大于第3条小于1
      • -moz-transition-timing-function:cubic-bezier(.4, 1.9, .4, .5);
  • 2D 转换的应用

  • 2D 转换属性

  • transform:

    • translate() 移动
      • 通过 translate() 方法,元素从其当前位置移动,根据给定的left(x 坐标) 和 top(y 坐标) 位置参数
      • 与position:relative区别:执行速度快
    • rotate() 旋转
      • 通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
    • scale() 缩放(是gay)
      • 通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
    • skew() 倾斜(是Q)
      • 通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
    • matrix() 合体写法(矩阵)
      • matrix() 方法把所有 2D 转换方法组合在一起。
      • matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
      • 缩放X, tan(X度), tan(Y度),缩放Y,位置X,位置Y
  • transform-origin

    • transform-origin:right top;
    • right/center/left top/center/bottom;
    • 单值:transform-origin:right;
    • transform-origin:50px 50px;

transform-origin 允许你改变被转换元素的位置。
transform 向元素应用 2D 或 3D 转换。

Day17

  • 3D转换

Internet Explorer 10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。
Opera,ie9仍然不支持 3D 转换 它只支持 2D 转换

  • 3D 翻转方法:

    • rotateX(30deg)
    • rotateY(30deg)
    • 注: Internet Explorer 和
    • Opera
    • 不支持 rotateX, rotateY 方法。
    • 扩展
    • rotate和rotateZ()效果一样
  • 3D位置移动 的3种写法

    • transform: translate3d(30px,30px,800px)
    • transform:translateZ(800px) translateX(30px) translateY(30px);
    • transform:translateZ(800px) translate(30px,30px);
    • 在2D的基础上多了1D (Z轴)
      3D视距
      perspective
      元素要使用3D效果 需要perspective属性配合
      方法1:
      父元素设置perspective:200px;
     <div>
        <p></p>
        </div> 
      
    div{perspective:200px;}
    p{width:100px;height:100px;
    transform:translate3d(0,0,-50px);background:#ff9;}
    
    

    方法2:
    子元素设置transform:perspective(200px);

    <p></p>
    p{width:100px;height:100px;
    transform:perspective(200px) translate3d(0,0,-50px);
    background:#ff9;}
    
    
  • 3D缩放翻转

    • scaleZ
    • 父框设置
      • perspective:1200px(3D视距)--平面看3D效果
      • transform-style:preserve-3d;(3D视角)--翻转的3D效果
      • (子元素保持3D位置)
      • transform-origin:left/top/right/bottom
      • 翻转位置
  • 3D动画

    • CSS3 @keyframes 规则
    • 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
    • @keyframes 规则用于创建动画。
    • 在 @keyframes 中规定某项 CSS 样式,
    • 就能创建由当前样式逐渐改为新样式的动画效果。
    • IExplorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
    • Chrome 和 Safari 需要前缀 -webkit-。
    • 注释:Internet Explorer 9,以及更早的版本,不支持 @keyframes 规则或 animation 属性。
  • 语法:

  • @ keyframes zidingyi{
    from {background: yellow;}
    to {background: green;}
    to {background: red;}
    }

  • @-moz-keyframes myfirst{/* Firefox */{
    from {background: red;}
    to {background: yellow;}
    to {background: blue;}
    }

  • 动画属性

    • animation: (可以理解为循环过度动画效果)
    • animation-name: 动画名
    • animation-duration: 时间 默认0
    • animation-timing-function: 曲线 默认ease
    • animation-delay : 延时 默认0
    • animation-iteration-count: 播放次数 默认1
    • animation-direction: 周期后是否倒放
    • animation-play-state: 是否暂停 默认 running
    • animation-fill-mode: 动画结束后的状态
  • CSS3 动画

    • 当您在 @keyframes 中创建动画时,
    • 请把它捆绑到某个选择器的动画属性上,否则不会产生动画效果。
    • 通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器动画属性:
    • 规定动画的名称
    • 规定动画的时长

animation: name 5s linear 2s infinite alternate;
关键帧:

from to 0% 100%

  • animation:一个动画可以给你多个元素使用,一个animation只可给一个元素
  • 动画与动画过渡区别
    • 1.动画可以直接执行,动画过渡需要后期的事件伪类
    • 2.动画可以多次播放,动画过渡只能一次

data-自定义属性 <div data-money=""></div>

opacity=0.5;//透明属性
position: ;//relative相对定位//绝对定位absolute//fixed固定定位
position fixed absolute relative
position absolute
position relative
position fixed
opacity:.7;

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1 92
  • 第一章 什么是HTML文件? 类似于txt、word文本记录文件 需要使用浏览器打开 展示文字和其他信息 使用标签...
    arima阅读 1,632评论 0 3
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 2,400评论 0 20
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,395评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,453评论 0 6