css
文章平均质量分 59
赵玉玲
只有不断接触新的东西生活才有趣味
展开
-
三栏布局:圣杯布局&双飞翼布局
浮动左右浮动,主体使用margin主体结构要在左右的后面<!DOCTYPE html><html> <style type="text/css"> html,body{ height: 100%; } .left,.right{ width: 200p...原创 2018-12-09 17:00:02 · 380 阅读 · 0 评论 -
BFC
创建一个BFC根元素,即html浮动,float不为none绝对定位,position为absolute或fixedoverflow设置为visible之外的值display设置为flex、inline-block、table-cell、、BFC特性外边距折叠:在同一个BFC内的相邻盒子的垂直外边距会重合,外边距不一样时以最大的为准,可以通过创建新的BFC解决计算BFC的高度...原创 2018-12-09 10:58:16 · 118 阅读 · 0 评论 -
css元素分类
css中有两种元素分类方式:块级元素与行内元素、替换元素与不可替换元素特性1块级元素: 独占一行行内元素: 并排显示特性2块级元素:width\height\margin\padding均有效行内可替换元素:width\height\margin\padding均有效行内不可替换元素:width\height无效,可以使用line-heihgt设置行高;margin左右有效,...原创 2018-12-08 22:28:25 · 615 阅读 · 0 评论 -
transform的几个知识点
transform 的几个知识点三维坐标系1、w3c中给出了三维空间的坐标系,z轴指向屏幕外 2、 CSS3 transform 变换使用的是元素自身坐标系 位移**translateZ(): 需要给父标签添加透视才能观察到透视透视是通过对元素中靠近观察者的点进行放大,远离观察者的点收缩,使得元素呈现出具有深度的效果 w3c: Perspective causes vertices that原创 2017-11-24 14:59:08 · 1278 阅读 · 0 评论 -
css3实现3d焦点图
css3实现3d焦点图在之前写的焦点图的基础上添加3d效果 要点:1、perspective添加透视效果 2、计算鼠标位置 <div class="border-3d-wrap"> <div class="wrap" onclick="test()"> <img src="../img/1.png" alt="" id='bannerImg'>原创 2017-11-22 14:21:41 · 495 阅读 · 0 评论 -
css实现折叠面板
纯css实现折叠面板本例实现了已知高度元素的显示与折叠,但不能应用于高度不固定的元素 <input type="checkbox" class="fold-button"> <section> <div class="fold-content"></div> </section> .fold-button{ appearance: none;原创 2017-11-22 14:16:20 · 9224 阅读 · 0 评论 -
transition、translate、transform、animation的区别
transition/translate/transform/animation因为自己刚开始接触css3动画时由于没有仔细看过文档,经常将这几个“属性“混淆(如果完全不存在这个问题可以忽略) 1、首先要明确的是transition、transform、animation这三个都是css属性,而translate是2D转换的一种方法是transform的一个属性值 2、transform是2D、原创 2017-11-22 14:11:14 · 3175 阅读 · 0 评论 -
transition实现焦点图切换
transition实现焦点图切换仅包括焦点图自动切换,不包括点击切换(前一张,后一张,点击焦点切换)HTMLsrc填写第一张图片地址<div class="wrap" > <img src="img/1.jpg" alt="" id='bannerImg'></div>CSS#bannerImg { display: block; width: 730px; he原创 2017-09-27 17:25:38 · 605 阅读 · 0 评论 -
清除浮动的方法
子级元素浮动会带来很多问题,下面是常用的几种清除浮动的方法原创 2016-06-13 18:26:17 · 327 阅读 · 0 评论