marginLeft 自适应50%

2024-10-19

巧用margin/padding的百分比值实现高度自适应

原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范: Not

遇见未知的CSS

1.1 CSS中你可能会疑问的几个问题 1.1.1 在CSS中为什么要有层叠在CSS中可能会有多个样式表同时影响同一个元素的某个属性,设计这个功能的主要原因有两个,解决模块化和作者.用户.用户代理样式冲突. 模块化一个页面中的样式可以拆分成多个样式表,代码如下. @import url(style/base.css); @import url(style/layer.css); 但这种方式也会随之产生一个问题,即如果对某个元素的同一个属性设置样式,到底应用谁的呢? 作者/用户/用户代理当作

深入浅出CSS（三）：隐藏BOSS大盘点之默认属性小总结

写在前面严重警告,本文包含大量文字,且无配图,请做好充分心理准备后,再进行阅读! 严重警告,本文包含大量文字,且无配图,请做好充分心理准备后,再进行阅读! 严重警告,本文包含大量文字,且无配图,请做好充分心理准备后,再进行阅读! 序言 HTML+CSS作为前端入门语言,其使用难度并不大,但其复杂度并不低.想学会HTML+CSS不难,想写好就很难了.君不见,达到同样的页面效果,有人div.float.position等等齐上阵,洋洋洒洒上千行的代码.有人header.footer.flex,几百

【CSS】三栏布局的经典实现

要求:自适应宽度,左右两栏固定宽度,中间栏优先加载: <!DOCTYPE html> <html> <head> <title>layout</title> <style type="text/css"> * { margin: 0; padding: 0px; } .wrap-2 { margin-top: 20px; } .header { background: #E81D1D; text-align: ce

CSS 3学习——animation动画

以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在随着时间变化而改变CSS属性值呈现方面,动画与过渡(transitions)类似.主要的区别是,当CSS属性值改变时,过渡隐式触发:而当动画属性被应用时,动画被显式地执行.正因为如此,在给CSS属性添加动画时,需要给动画指定明确的值. 动画的许多方面都可以被控制,包括动画的重复次数,是否在开始值与结

发布两款JQ小插件（图片查看器 + 分类选择器），开源

图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer(".viewer-item"); 它的实现其实也没啥复杂的原理,唯一觉得可说的地方是图片展开的过程 —— 从小变大动态过程的实现.主要是靠这一段代码实现的: $(this).css({"top": win_h / 2 + sroll_t, "margin-l

HTML5与CSS3经典代码

1)全屏背景 body { background: url(../img/pic.jpg) no-repeat center center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } 2)块元素居中 <div class="mc"> Hello Wolrd! </div&g

第 26 章 CSS3 动画效果

学习要点: 1.动画简介 2.属性详解 3.简写和版本主讲教师:李炎恢本章主要探讨 HTML5 中 CSS3 的动画效果,可以通过类似 Flash 那样的关键帧模式控制运行. 一．动画简介 CSS3 提供了类似 Flash 关键帧控制的动画效果,通过 animation 属性实现.那么之前的 transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果,有一定的局限性. animation 实现动画效果主要由两个部分组成:1.通过类似 Flash 动画中的关键帧声明一个动画:

css3动画中的steps值详解

css3的动画的animation-timing-function属性定义了动画的速度曲线,一般的速度曲线大家都知道,什么ease,linear,ease-in,ease-out,还有自定义贝塞尔曲线...定义了animation-timing-function后,动画就会按照定义的曲线来执行动画. 但是除了这些值以外,animation-timing-function值还可以是steps(x,startend),它接受两个参数.下面会具体解释. 如果定义曲线,则动画帧与帧之间会流畅的进行,而定

纯CSS3制作皮卡丘动画壁纸

前言明天就放假了,趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果.话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以用CSS3来实现的,于是带着好感就实现了它.至于原图吧,为了不影响大家对我实现的动画产生对比,我就有心地不放上来了,哈哈!那么到底是什么效果呢?接着往下看吧! 正文 OK,接下来就是晒效果图的时候了,看图后才有兴趣了解一下,不然很沉闷,没什么心思看了. PS:由于我这个动画的尺寸做得比较大(720

jQuery 图片轮播

HTML <div class="carousel"> <ul class="car-img"> <li><img src="images/imgs1.jpg"></li> <li><img src="images/imgs2.jpg"></li> <li><img

讲解版的自动轮播（新手福利）样式和js就不分离了为了看的方便

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>讲解版的自动轮播(新手福利)</title> <style> /*现在来写样式*/ /*公共样式*/ *{ margin: 0; padding: 0; } li{ list-style: none; } /*底层样式*/ #det{ width:

CSS：用Less实现栅格系统

CSS:用Less实现栅格系统背景公司一直没有专职的前端和美工,Javascript相对来说我熟悉一点,CSS+HTML有四五年没有搞过了,最近要学一下,招聘或和美工配合的时候会有用处. 收集的资料 CSS教程:http://www.w3school.com.cn/css/index.asp. LESS教程:http://www.lesscss.net/. SAAS教程:http://sass-lang.com/. Bootstrap教程:http://cnbootstrap.com/. 栅

使用python实现群发邮件

最近在工作时,需要实现在公司开发的调度系统上实现:将每天产生的游戏数据查询统计出,并发送邮件给数据分析的开发人员. 考虑到python语言的简洁易上手,在我没有任何python基础的情况下,十分轻松的完成了这个脚本功能. 下面放出代码,展示了通过python发送html邮件的模板: 1.生成数据: #!/usr/bin/env python # -*-coding: UTF-8 -*- import MySQLdb import sys from constant import DB_PARAM

个人练习：使用HTML+CSS3制作图片轮播功能（不使用JavaScript）

先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animation实现的图片轮播功能. 首先我们要理解这个图片轮播的结构,我一早上都因为没有理解结构在那里浪费时间,中午睡了一觉起来思路就通了,就...做出来了┑(￣Д ￣)┍ 其实就和老式电影放映机差不多原理,要显示的内容就是胶片上的一张张照片,并排排列: 轮播起来就像播放老式电影一样,胶片移动,显示区域会显示想

HTML5 动画用 animation transform transition 做的两个例子

1,左右移动,自我翻转的圆 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>移动的圆</title> <style type="text/css"> html, body { margin: 0; padding: 0; background: #ffffff; outline: none; letter-spa

发展简史jQuery时间轴特效

发展简史jQuery时间轴特效.这是一款鼠标滚动到一定的高度动画显示企业发展时间轴特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="wrapper"> <div class="history"> <div class="start-history"> <p class="cc_history">发展简史</p> <

13年总结js,css,java xml

--------------------------------------javaScript知识点----------------------------- jQuery对象[Object object]tr.children()[0]会转换成js对象 var ops = document.getElementsByTagName("option");alert(ops[0].getAttribute('id')+" "+" "+ops[0]

freemark、jsp&css

**************************************************************freemark相关**************************************************************<#list Request['supportPayTypeList']?keys as key> //后台数据时放在request里的map集合,map里放map<#if Request['supportPayTy

css flex 兼容ios android--商品展示添加购物车

https://blog.csdn.net/u010035608/article/details/52711248 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes&

css布局三栏自动换行

1.代码实现 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&qu

marginLeft 自适应50%

热门专题