CSS
文章平均质量分 90
杭电茶娃
这个作者很懒,什么都没留下…
展开
-
常见样式问题一、水平居中和垂直居中
一、水平居中1、行内元素(text-align:center)(适用:行内元素,或类行内元素(如文本)。包括inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。)行内元素水平居中,可把行内元素嵌套在水平居中的块状元素中。<style>.container{width:800px; background-color:#f6f6...原创 2018-03-03 23:13:50 · 385 阅读 · 0 评论 -
overflow:hidden不会隐藏所有子元素
1、overflow:hidden不会被隐藏的情况拥有overflow:hidden样式的块元素内部的元素溢出有时候不会被隐藏。当同时满足以下条件:拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式;内部溢出的元素是通过position:absolute绝对定位,并且该定位元素的包含块是设置overflow:hidden元...原创 2018-04-03 20:19:43 · 10253 阅读 · 0 评论 -
JS和CSS执行顺序
一、脚本和样式表加载、执行顺序总结1、脚本web的模式是同步的,开发者希望解析到一个script标签时立即解析执行脚本,并阻塞文档的解析直到脚本执行完。如果脚本是外引的,则网络必须先请求到这个资源——这个过程也是同步的,会阻塞文档的解析直到资源被请求到。这个模式保持了很多年,并且在html4及html5中都特别指定了。开发者可以将脚本标识为defer,以使其不阻塞文档解析,并在文档解析结束后执行。...转载 2018-04-08 20:42:28 · 6460 阅读 · 0 评论 -
IE中CSS-filter滤镜小知识大全
本文转载,并做了部分修改。原文链接https://segmentfault.com/a/1190000002433305。前言前段时间在做一个专题的时候用到了opacity不透明度属性,因为设计图上是半透明背景,白色文字有时候我们很习惯的用到不透明属性opacity来增加层次感或者增加用户体验,但因这个属性是css3属性,不兼容IE8及其以下版本。一般要尽可...转载 2018-03-22 22:54:12 · 7040 阅读 · 0 评论 -
IE8图片不能显示
1、背景图片不能显示background:url(img/img1.jpg)no-repeat;background:url(img/img1.jpg) no-repeat;第一个背景图片IE8下不会显示,第二行代码的背景图片会显示,区别在于no-repeat前面的空格,IE8对空格的敏感度很高。2、图片色彩模式为CYMKBrowserRGBCMYKIE6, 7, 8YesNoIE9YesYes...原创 2018-03-30 22:13:38 · 849 阅读 · 0 评论 -
常见样式问题四、利用:after、BFC清除浮动
一、为什么要清除浮动元素浮动后,该元素就会脱离文档流,浮动在文档之上。在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。当元素浮动之后,不会影响块级元素的布局,只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。没有清除浮动会出现高度塌陷(包含框的高度小于浮动框)、包含块下的非浮动元素和浮动元素会发生重叠。先看下未设置浮动效果,代码如下...原创 2018-03-05 23:02:01 · 332 阅读 · 0 评论 -
常见样式问题七、word-break、word-wrap、white-space区别
首先推荐下MDN网站,在上面可以学习html、css、js。对于css而言,可以查看详细的语法、使用案例、浏览器兼容性。附上链接:https://developer.mozilla.org/zh-CN。一、基本介绍1、word-breakMDN上显示语法:normal | break-all | keep-all | break-word值:normal:使用默认的断行规则。break-all...原创 2018-03-12 23:00:21 · 8571 阅读 · 0 评论 -
三栏布局的7种解决方案
写出三栏布局,左栏宽度190、右栏宽度300px,中间宽度自适应。 1、浮动布局1)解决方法浮动方案是通过将左边栏、右边栏设置定宽、浮动,中间栏通过margin-left、margin-right来确定位置、宽度。<head><meta charset="utf-8"><title>文档标题</title><style>.cont...原创 2018-03-18 21:54:38 · 561 阅读 · 0 评论 -
常见样式问题三、margin、padding百分比
1、margin百分比介绍可以对元素的margin设置百分数,百分数是相对于父元素的width计算,不管是margin-top/margin-bottom还是margin-left/margin-right。(padding同理)。如果没有为元素声明width,在这种情况下,元素框的总宽度包括外边距取决于父元素的width,这样可能得到“流式”页面,即元素的外边距会扩大或缩小以适应父元素的实际大小...原创 2018-03-04 23:35:05 · 709 阅读 · 0 评论 -
normalize.css分析
本文主要获取网上normalize.css的v8.0.0版本,记录自己对设置样式的理解可以在github上下载normalize.css文件:https://github.com/necolas/normalize.css/releases1、-webkit-text-size-adjust属性该属性最先是由 iOS 1.0 引入的,所以本来就是解决移动设备上的问题而出现的。通常 iPhone(i...原创 2018-03-11 23:04:57 · 973 阅读 · 0 评论 -
常见样式问题八、对行内元素、line-height、vertical-align的理解
一、行内元素基本术语匿名文本:所有未被包含在行内元素的字符串。内容区:非替换元素中,内容区是元素中各字符的em框描述的;替换元素中,内容区是指元素的固有高度再加上可能有的外边距、边框、或内边距。em框:em框在字体中定义,也称字符框。em框不一定指示字体中字符建立的任何边界。有可能小于或者大于字符。它指示如果没有额外行间距设置字体时基线间的距离。某种字体的字符有可能比默认的基线间距离要高(即字符比...原创 2018-03-17 17:31:22 · 3293 阅读 · 0 评论 -
常见样式问题二、CSS实现普通三角形、空心三角形
1、初识css三角形第一次知道CSS实现的三角形是在bootstrap源码中看到。bootstrap泡泡提示框的空心三角形就是用css实现的。下面是bootstrap v3.3.6中跟空心三角形相关的代码:.popover > .arrow,.popover > .arrow:after { position: absolute; display: block; widt...原创 2018-03-03 13:52:29 · 2776 阅读 · 0 评论 -
常见样式问题六、CSS长度单位(px、em、rem等)及相关内容
一、基本长度单位1、相对长度单位px:像素。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。同样尺寸的屏幕,分辨率越大,像素的物理尺寸越小(分辨率=屏幕横向的像素数量 *屏幕纵向的像素数量。所以像素大小 = 屏幕尺寸^2 / 分辨率)。windows系统使用的分辨率一般是96像素/英寸。而mac的用户所使用的分辨率一般是72像素/英寸。ex:所有字体中小写x的高度。目前很多用户代理会将1/2...原创 2018-03-10 22:02:14 · 928 阅读 · 0 评论 -
常见样式问题五、表格宽度自动计算规则
表格注意点:如果表格单元width为数值,width表示的是content的宽度;如果表格单元width为百分比,width表示的是content + padding + border的宽度。表格border-collapse为collapse时,各列含border的列宽之和 >= 实际表格宽度。固定布局的表格,只有首行的列设置的宽度有效,第二行及之后设置的宽度不起作用;自动布局的表格,所有...原创 2018-03-07 23:22:36 · 2677 阅读 · 0 评论 -
纯CSS实现多行文本溢出显示省略号(兼容不同浏览器)
1、单行文本溢出显示省略号单行文本溢出显示省略号比较简单,设置white-space: nowrap避免换行,再设置text-overflow: ellipse即可。 <style> .single-line { width: 200px; line-height: 1.4; white-space: nowrap; overflow: hidden...原创 2019-09-28 00:06:29 · 4933 阅读 · 0 评论