前端(八):HTML、CSS相关

简介: HTML、CSS相关

H5 新特性

  1. 语义化标签
    header footer section nav aside article
  2. 增强型表单
    input 的多个 type
  3. 新增表单元素
    datalist keygen output
  4. 新增表单属性
    placehoder required min max
  5. 音频视频
    audio video
  6. 其他
    canvas 地理定位 拖拽
  7. 本地存储
    • localStorage
      • 数据上限5MB左右(根据浏览器不同会有所区别)
      • 无论打开还是关闭标签浏览器数据均保留
    • sessionStorage
      • 数据上限5MB左右(根据浏览器不同会有所区别)
      • 打开同源页面或刷新页面数据保留
      • 关闭浏览器数据清空
      • 打开或关闭新的浏览器窗口数据会被删除
    • cookie
      • 数据上限4KB左右(根据浏览器不同会有所区别)
      • 打开同源页面或刷新页面数据保留
      • 关闭浏览器数据清空
      • 打开或关闭新的浏览器窗口数据会被保留
  8. 新事件
    onresize ondrag onscroll onmousewheel onerror onplay onpause
  9. WebSocket
    单个 TCP 连接上进行全双工通讯的协议

    CSS权重 256进制

    | 属性 | 权重 |
    |:--------:| -------------|
    | !important | 无穷 |
    | 行间样式 | 1000 |
    | id | 100 |
    | class/属性选择器/伪类:hover | 10 |
    | 标签选择器/伪元素:after | 1 |
    | 通配符 | 0 |

    CSS 兼容内核

    -moz- 代表FireFox浏览器私有属性
    -ms- 代表IE浏览器私有属性
    -webkit- 代表safari、chrome浏览器私有属性
    -o- 代表opera浏览器私有属性

    CSS3 新特性

  10. 选择器 - 伪类和伪元素
    a:link {
         color: #FF0000} /* 未访问的链接 */
    a:visited {
         color: #00FF00} /* 已访问的链接 */
    a:hover {
         color: #FF00FF} /* 鼠标移动到链接上 */
    a:active {
         color: #0000FF} /* 选定的链接 */
    ::before {
         } /* 选择器在被选元素的前面插入内容和定义css,使用 content 属性来指定要插入的内容。 */
    ::after {
         } /* 选择器在被选元素的后面插入内容和定义css,使用 content 属性来指定要插入的内容。 */
    :first-letter /* 选择该元素内容的首字母 */
    :first-line /* 选择该元素内容的首行 */
    ::selection /* 选择被用户选取的元素部分 */
    
    AI 代码解读
  11. 背景和边框
    背景:
    background-size:规定背景图片的尺寸(cover:填充;100% 100%:拉伸)
    background-origin:规定背景图片的定位区域
    对于 background-origin 属性,有如下属性:
    背景图片可以放置于 `content-box`、`padding-box` 或 `border-box` 区域
    
    AI 代码解读
    边框:
    border-radius:圆角
    box-shadow / text-shadow:阴影
    border-image:边框图片
  12. 文本效果
    text-shadow 向文本添加阴影
    text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法
    text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
    text-outline 规定文本的轮廓
    text-overflow 规定当文本溢出包含元素时发生的事情
    text-wrap 规定文本的换行规则
    word-break 规定非中日韩文本的换行规则
    word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
    text-decoration 文本修饰符:overline、line-through、underline 分别是上划线、中划线、下划线
    @font-face 自定义字体
    渐变 CSS3新增了渐变效果,包括 linear-gradient(线性渐变)和 radial-gradient(径向渐变)
  13. 2D/3D 转换
    2D 转换(transform)
    | 属性 | 描述|
    |--------:| :-------------|
    | translate() | 元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数。 transform: translate(50px, 100px); |
    | rotate() | 元素顺时针旋转给定的角度。若为负值,元素将逆时针旋转。transform: rotate(30deg); |
    | scale() | 元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数,也可以一个值(宽高)。transform: scale(2,4); |
    | skew() | 元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。transform: skew(30deg, 20deg); |
    | matrix() | 把所有 2D 转换方法组合在一起,需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0); |
    3D 转换
    | 属性 | 描述|
    |--------:| :-------------|
    | rotateX() | 元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg); |
    | rotateY() | 元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg); |
    | perspective | 规定 3D 元素的透视效果 |
  14. 动画、过渡
    过渡效果(transition)

    使页面变化更平滑,以下参数可直接写在 transition 后面

    | 属性 | 描述|
    |--------:| :-------------|
    | transition-property | 执行动画对应的属性,例如 color,background 等,可以使用 all 来指定所有的属性。 |
    | transition-duration | 过渡动画的一个持续时间 |
    | transition-timing-function | 在延续时间段,动画变化的速率,常见的有:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier |
    | transition-delay | 延迟多久后开始动画 |
    动画(animation)

    先定义 @keyframes 规则(0%,100% | from,to)
    然后定义 animation,以下参数可直接写在 animation 后面

    | 属性 | 描述|
    |--------:| :-------------|
    | animation-name | 定义动画名称 |
    | animation-duration | 指定元素播放动画所持续的时间长 |
    | animation-timing-function | ease linear ease-in ease-out ease-in-out cubic-bezier(, , , ): 指元素根据时间的推进来改变属性值的变换速率,即动画的播放方式 |
    | animation-delay | 指定元素动画开始时间 |
    | animation-iteration-count | infinite number指定元素播放动画的循环次数 |
    | animation-direction | normal alternate: 指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为 normal 时,动画的每次循环都是向前播放;另一个值是 alternate,规定动画在下一周期逆向地播放(来去播放) |
    | animation-play-state | running paused :控制元素动画的播放状态 |

  15. 多列布局
    | 属性 | 描述|
    |--------:| :-------------|
    | column-count | 规定元素应该被分隔的列数 |
    | column-gap | 规定列之间的间隔 |
    | column-rule | 设置列之间的宽度、样式和颜色规则 |

  16. 用户界面

    新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等

    | 属性 | 描述|
    |--------:| :-------------|
    | resize | both none both horizontal vertical |
    | box-sizing | 属性可设置的值有 content-box、border-box 和 inherit |
    | content-box | 是W3C的标准盒模型,元素宽度 = 内容宽度 + padding + border:意思是 padding 和 border 会增加元素的宽度,以至于实际上的 width 大于原始设定的 width |
    | border-box | 是ie的怪异盒模型,元素宽度 = 设定的宽度,已经将 padding 和 border 包括进去了,比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破,但是使用 border-box 就可以轻松完成 |
    | inherit | 规定应从父元素继承 box-sizing 属性的值 |
    | outline-offset | 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓 |

  17. 清除浮动方法 如何解决margin垂直塌陷问题(触发父节点的bfc)

    额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐

    <div class="box">
       <div class="box01">box01</div>
       <div class="box02">box02</div>
       <div class="clear">额外标签法</div>
    </div>
    .clear{
       clear:both;
    }
    
    AI 代码解读
    优点:通俗易懂,方便
    缺点:添加无意义标签,语义化差
    
    AI 代码解读

    父级添加overflow属性(父元素添加overflow:hidden)(不推荐
    通过触发BFC方式,实现清除浮动

    .box{
          
      overflow: hidden;
    }
    
    AI 代码解读
    优点:代码简洁
    缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素
    
    AI 代码解读

    使用after伪元素清除浮动(推荐使用

    .clearfix:after{
          /*伪元素是行内元素 正常浏览器清除浮动方法*/
       content: "";
         display: block;
         clear:both;
     }
     .clearfix{
          
         *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
     }
    
    AI 代码解读
    优点:符合闭合浮动思想,结构语义化正确
    缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.
    
    AI 代码解读

    使用before和after双伪元素清除浮动

    .clearfix:after,
    .clearfix:before{
          
         content: "";
         display: block;
     }
     .clearfix:after{
          
         clear: both;
     }
     .clearfix{
          
         *zoom: 1;
     }
    
    AI 代码解读
    优点:代码更简洁
    缺点:用zoom:1触发hasLayout.
    
    AI 代码解读
  18. haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性,有两种状态:true或false。

    当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素。

    默认触发hasLayout的有如下HTML标签:

            html,body,table,tr,th,td,img,hr,input,button,select,textarea,fieldset,frameset,frame,iframe
    
    AI 代码解读

    可以触发hasLayout的有如下CSS属性:

            display:inline-block
            height/width:除了auto
            float:left/right
            position:absolute
            writing-mode(IE专有属性,设置文本的垂直显示):tb-rl
            zoom(IE专有属性,设置或检索对象的缩放比例):除了normal
    
    AI 代码解读

    IE7专有的触发hasLayout的CSS属性

            min-height/max-height/min-width/max-width:除none
            overflow\overflow-x\overflow-y:除visible
            position:fixed
    
    AI 代码解读

    bfc解决margin塌陷

    .box01 {
          
    width: 200px;
    height: 200px;
    margin-top: 60px;
    background-color: #000;
    /* position: absolute; */
    /* overflow: hidden; */
    /* display: inline-block; */
    /* float: left; */
    }
    
    AI 代码解读
目录
打赏
0
0
0
0
25
分享
相关文章
|
3月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
80 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
177 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等