css笔记
文章平均质量分 84
YaoDeBiAn
这个作者很懒,什么都没留下…
展开
-
如何在垂直方向上均匀展示高度相等的栏目
如何在垂直方向上均匀展示高度相等的栏目?场景:手机屏幕上需要垂直展示两个栏目块,并保证栏目块与顶部底部的距离、栏目块之间的距离相等(当然要满足不同的屏幕宽度)。具体效果大致如下:要求保持上面的三块高度相等。Now let’s try several methods below:方法一:基于flex实现<!DOCTYPE html><html lang="e...原创 2019-11-22 18:01:53 · 504 阅读 · 0 评论 -
媒体查询使用方法@media
转自:媒体查询使用方法@mediaMedia Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中,但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。@media 媒体类型and (媒体特性){你的样式}注意:使用Media Queries必须要使用“@...转载 2018-04-12 16:24:49 · 650 阅读 · 0 评论 -
CSS3 display:flex和display:box有什么区别?
同样是弹性盒模型,但是前后两个版本不同,还是有一定的区别的,以下是百度后的记录总结:1.前者是flex2012年的语法,也将是以后的标准语法,大部分浏览器已经实现了无前缀版本。后者是2009年的语法,已经过时,是需要加上对应前缀的。2.flex是最新的,但是在实际的浏览器测试中,display: flex 不能完全替代display: -webkit-boxdisplay: box 使用可以参考h...原创 2018-04-12 17:27:38 · 5992 阅读 · 0 评论 -
理解设备像素比
移动端的设备多种多样,不同的设备又有不同的分辨率,低一点的有 800 * 400,中等的有 1280 * 720,高的有 1920 * 1080,甚至还有更高的 4k 屏等。我们在开发移动端页面时,将视口(viewport)设置为设备宽度(device-width)后,同一份页面在这些不同的设备上又怎样的表现呢?我们写一个测试页面,在 Chrome 中看看就知道了。同一份页面在不同设备上的表现测试...转载 2018-05-27 19:37:14 · 3151 阅读 · 0 评论 -
如何使用纯css实现轮播图
知乎文章地址:https://zhuanlan.zhihu.com/p/48350702轮播图一直是一个很有意思的东西,之前没有好好总结,导致一要写的时候就要重新开始思考过程然后编码,这是个特别烦的问题,今天就好好总结一下。关于轮播器的一些demo,请看:yaodebian/Carouselgithub.com因为考虑到方法实在是太多了,这里就以css的实现方式来进行记录。yao...原创 2018-12-03 20:19:36 · 2619 阅读 · 0 评论 -
总结一些前端笔试面试
1.关于购物的一道题,题目很简单:最近不是双十一吗,小美想要尽可能多的买各种商品,但小美只有一定数额的钱,规定每件商品只能买一件,问最后小美花了多少钱?用例:输入购买上限mPrice:188 输入一串以空格分隔的字符串,代表不同的商品的价格pStr:50 42 9 15 105 63 14 30 输出:160注:mPrice最大不超过一万。解:// 获取应买物品的总价格f...原创 2018-12-03 20:27:37 · 604 阅读 · 0 评论 -
深入理解BFC
知乎文章地址:https://zhuanlan.zhihu.com/p/50478999一. BFC的基本概念BFC是“Block Formatting Context”的缩写,即块格式化上下文。它是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。通俗的讲,BFC是web页面中一块渲染区域(或者说是一种渲染环境),对于环境内的盒子...原创 2018-12-03 20:37:28 · 353 阅读 · 0 评论 -
css3系列之css动画
github文章地址:https://github.com/yaodebian/blog/issues/1css3系列之css动画css动画是css3中新添加的特性,为我们提供了很多很方便的css特效,以前很多需要借助js(或者gif动效图)来完成的动画效果,简单通过css就能完成。一.动画规则css的动画的实现分两步:通过@keyframes设置动画过渡规则将动画规则部署到html...原创 2019-02-03 22:02:54 · 287 阅读 · 0 评论 -
前端布局之——水平垂直居中
前端垂直居中布局前端页面的居中是平常开发中比较常见的布局,以下将从水平居中、垂直居中、水平垂直居中三个角度分析不同的布局方法。水平居中法一:行内元素水平居中html:<div class="container"> <div class="box"></div></div>css:.container { text-align...原创 2019-09-17 00:32:49 · 1379 阅读 · 1 评论 -
移动web页面前端开发总结
工作笔记:移动web页面前端开发总结 转载来源:http://www.cnblogs.com/gyjWEB/p/3780374.html移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结。 1.四大浏览器内核1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额,所以以前有很多网页是根据这个Trident的标准来编写的...转载 2018-04-12 16:12:48 · 261 阅读 · 0 评论 -
CSS3笔记:Border-radius的形成原理
参考文章:http://www.zhangxinxu.com/wordpress/2015/11/css3-border-radius-tips/一.前言最近自己写了一个导航栏,马马虎虎就是啧个样纸: 其中的圆角做了好久,就是啧个: 既然用到了,我就在这总结一下圆角border-radius的用法,闲话不多说,进入正题。 二.border-radius的几种原创 2017-10-20 15:14:06 · 1812 阅读 · 0 评论 -
css笔记:css的继承性
所谓继承性是指书写css样式表时,子标签会继承父标签的某些样式,如文本的颜色和字号。例如:垚的彼岸的日志我只是一个渣渣我想把上述文字居中显示,如下图显示:(背景颜色时为了比较清晰明了)那么我就这样设置css:body{background:blue;opacity:0.5;filter:alpha(opacity=50);}.yaodeb原创 2017-09-27 13:41:17 · 2464 阅读 · 0 评论 -
网页编程自学历程一:编写一个静态网页框架
本文涉及到的转载内容:http://blog.csdn.net/ljl157011/article/details/16842669作为一个计算机专业的学生,我觉得在大学生涯中,我们有必要学会如何编写一个属于自己的网站,所以开始尝试自学网页编程。在网上大概查了一下网页编程的发展进程,在web1.0时代,网页主要是以静态网页的形式存在,而到如今的web2.0时代,动态网页已经全面普及,为广大互联原创 2017-01-28 21:29:01 · 1811 阅读 · 0 评论 -
HTML自学历程二:关于页面文字及背景的基本设置
文字与背景是一个网页的基础或者叫做基本属性,那么如何做到灵活地选取恰当的搭配形式,就需要我们掌握其基本的设置。首先我们想到的是文字,对于一个页面,我们要对其选取恰当的尺寸、字形、颜色。在这之前,我们先提一个标签标签,它是特地用来规定文本的字体、字体尺寸、字体颜色的,他有三个属性,分别为size、face、color,即尺寸、字形、颜色。具体的用法是将文本内容放置于中,并将属性及属性值放入标原创 2017-02-01 20:44:45 · 1189 阅读 · 0 评论 -
CSS笔记:浅谈position属性
之前并没有在意position的使用,在此专门花时间总结了一下它的用法。何谓positionposition属性定义建立元素布局所用的定位机制。值得一提的是,任何元素都可以定位,不过绝对或固定元素能生成一个块级框,而不论该元素本身是什么类型。目前,所有主流浏览器都支持position属性,以下是浏览器对position属性兼容性的概况图:注:任何版本的IE浏览器(包括IE8原创 2017-06-28 23:54:10 · 553 阅读 · 0 评论 -
CSS3阴影 box-shadow的使用和技巧总结
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径转载 2017-06-24 10:27:56 · 598 阅读 · 0 评论 -
css笔记:HTML文档中应用css样式的方法总结
标签:class style log com http 使用 si it html 在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表;2.使用style元素包含样式表;3.使用style属性,即内联样式一.link标签链接外部样式表 先看一条较为标准的link标记语句: lin转载 2017-05-28 20:13:12 · 770 阅读 · 0 评论 -
css总结:HTML中用position进行相对定位时与float属性连用容易产生的误区
最近写静态网时将position与float属性连用,结果发现没有达到预期的效果(预期的设想是两个块彼此相连,而结果却是相互重叠了)本人健忘,故将此记录下来,以下是我从中获取经验。首先来看一个图示:好的,假设我们有了两个块div1与div2,它们在样式表中我们分别对其设置为:div1{width:100px;height:30px;background:red;positi原创 2017-02-28 20:30:26 · 4391 阅读 · 0 评论 -
css笔记:包含块(Containing Block)
包含块简介在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称作是包含块( containing block )。 一般来说,(元素)生成的框会扮演它子孙元素包含块的角色;我们称之为:一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。 hi 以上代转载 2017-06-28 10:21:29 · 379 阅读 · 0 评论 -
css笔记:清除子元素对父元素的浮动效果的三种方法
清除子元素对父元素的浮动效果的三种方法对于浮动元素,我们知道如果父元素不设置height,而子元素全部设置为浮动,父元素不会被撑开(也就是父元素为一条直线,height为0),我们看到的就是一条线在所有子元素上面。例如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>clear_float</原创 2017-09-16 11:13:05 · 7672 阅读 · 0 评论 -
转载:css浮动(float,clear)的通俗讲解
转载自:博客园http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html一直不能理解浮动元素,现在分享自己看到的一篇比较详细的文章教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图: 可转载 2016-09-18 15:58:46 · 336 阅读 · 0 评论