HTML、css
关注
分享
扫一扫
Hell's Angel
一个前端工作者
展开
-
H5和css的新特性
H5新增的特性：1.、语义化标签：header、footer、section、nav、aside、article2、增强型表单：input 的多个 type3、 新增表单元素：datalist、keygen、output4、新增表单属性：placehoder、required、min 和 max5、 音频视频：audio、video ，6、 canvas7、地理定位8、拖拽9、 本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 se原创 2020-08-30 20:38:00 · 216 阅读 · 0 评论 -
css动画属性
在css动画中，我们最常用的就是 transition 属性。当然除了transition 还有anmation 、transform等。transition ：允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。transition ：transition-property || transition-duration || transition-timing-function || transit原创 2020-08-30 20:27:40 · 1045 阅读 · 0 评论 -
什么是BFC，如何清除浮动？
BFC（Block Formatting Context）块级格式化上下文，是一个独立的布局环境。有自己独立的渲染区域。且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。BFC布局的特点就是 将自己与外部隔离开。内部的布局不会受外部影响，外面的也不会影响内部的布局。BFC的应用场景有哪些？当相邻div发生marign重叠时，BFC可以阻止这种情况。可以把相邻的div放到不同的BFC中、BFC不会重叠浮动元素如何创建一个BFC？overflow原创 2020-08-28 20:55:19 · 409 阅读 · 0 评论 -
元素水平垂直居中的几种方式
<style> .wp { border: 1px solid orange; width: 300px; height: 300px; } .box { background: green; width: 100px; height: 100px; } </style> <body> <div...原创 2020-08-28 08:55:03 · 195 阅读 · 0 评论 -
css常用布局 两栏、三栏 布局
我们在做pc端页面的时候、经常会用到这种布局、即两栏、 三栏布局。如图所示：这两种经典布局相信很多人都用过把。现在分享一下我的布局方案吧（每个人布局风格不同 自然想法就不一样了。）两栏布局：1、左（右）侧固定宽度：中间部分使用margin-left或margin- right（默认为auto）使之铺满右侧部分。<div class="parent"> <div class="left">111</div> <原创 2020-08-28 08:12:28 · 311 阅读 · 0 评论 -
css怪异盒和标准盒模型
1、css怪异盒和标准盒模型w3c中定义的是标准盒模型，而IE中的是怪异盒模型标准盒模型 即 width=content width+padding+margin+border怪异盒模型 width=content width(padding+border)+margin图片元素的垂直对齐方式： 标准模式下: vertical-align的默认值是:baseline 怪异模式下:vertical-align的默认值则是bottomTable元素中的字体：原创 2020-08-27 14:49:16 · 191 阅读 · 0 评论 -
css flex 弹性盒布局
css flex 弹性盒布局：1、css弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒由弹性容器（flex-container）和弹性子元素（flex-item）构成。 弹性盒通过给父元素设置 display:flex 使之成为弹性盒容器。弹性盒有以下几个属性：设置在父元素上的属性：flex-direction（定义项目的排列方式原创 2020-08-27 13:59:31 · 140 阅读 · 0 评论