布局
Lion暖冰
懒加载...
展开
-
圣杯布局和双飞翼布局
双飞翼布局主要解决俩问题:1、三列布局,中间宽度自适应,两边定宽; 2、中间栏要在浏览器中优先展示渲染。圣杯布局:思路是把左列left 右列right 主列middle分别浮动,然后用负外边距给左右两列进行定位;css:<style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 700px;} ...原创 2018-03-23 12:13:08 · 88 阅读 · 0 评论 -
背景图适应全屏
background: url("images/img1.jpg") no-repeat; background-size:100% 100%; background-attachment: fixed; width: 100%; height: 100%; position: fixed; top:0; left:0; right:0; bottom:0;原创 2018-03-27 11:02:02 · 454 阅读 · 0 评论 -
em、rem
em: 1em等同于它当前的font-size,在不同的代码片段中1em就会有不同的取值。rem: rem指的是-根em,1rem等同于1个根font-size的取值,也就是1rem等同于<html>中的font-size。使用细节: em用来完成模块化的组件,但是代码复杂性大;rem会使组件缺少模块化,但是便捷性大。 如果这个属性根据它的font-size进行...原创 2018-03-28 12:00:32 · 433 阅读 · 0 评论 -
解决transition第一次不生效问题和fixed的transform定位问题
left设置初始值,设置初始transition; 如果设置fixed元素的父级或祖先级元素设置为transform属性,则fixed相对于该元素定位。因为设置transform属性的元素建立了一个新的坐标系 ...如果要通过fixed实现铺满全屏的效果,一定要注意其父级或祖先级元素不能设置有transform属性...原创 2019-01-07 10:29:10 · 8819 阅读 · 0 评论 -
滚动条组成
滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微...原创 2019-01-07 16:59:24 · 592 阅读 · 0 评论 -
css小点
xxx::-webkit-input-placeholder{} 修改placeholder方案 使用vertical-align:middle属性后img不会垂直居中问题:需要在img类上再设置一遍vertical-align:middle;vertical-align:middle;生效的前提:不能是块级元素(生效:父级元素line-height等于高度) 清除浮动: .clearfi...原创 2019-08-13 17:48:21 · 149 阅读 · 0 评论