CSS
关注
分享
扫一扫
程序员小周
这个作者很懒，什么都没留下…
展开
-
css实现垂直居中
这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。display:table-cell;vertical-align:middle;这个方法使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。#content {原创 2016-07-31 17:21:35 · 217 阅读 · 0 评论 -
img的title和alt属性
1、title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。 2、alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。原创 2016-07-31 11:00:16 · 474 阅读 · 0 评论 -
一个好用的让DIV水平垂直居中的方法
div{ width : 300px; height : 300px; border : 1px solid red; position : absolute; top : 50%; left : 50%; margin-top : -150px; margin-left : -150px; }小解： 将DIV的定位设置为abso原创 2016-08-20 17:43:42 · 374 阅读 · 0 评论 -
行内（又称为内联）元素的margin、padding属性值问题
内联元素可以直接设置margin.padding么？可以设置，不过margin、padding对内联元素不起作用而已。 也就是说，设了等于白设。这类元素一般是：a、span元素等。 不过，内联元素有几个比较特别的：（特别之处是：有块状元素的特性，但是又不换行）像img、object这一类的内联元素（行内替换元素），是可以设置margin、padding的，不过这两个元素要显示的内容是外部引用的资原创 2016-08-23 14:44:01 · 3631 阅读 · 0 评论 -
CSS基础知识整理
派生选择器派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：li strong { font-style: italic; font-weight: normal; }<p><strong>我是粗体字，不原创 2016-08-24 20:36:30 · 517 阅读 · 0 评论 -
一个很好的浏览器兼容性测试网站
http://browsershots.org/不用在本地再下载N多浏览器，可以直接在线测试浏览器兼容性，强力推荐！原创 2016-11-22 20:55:34 · 2684 阅读 · 0 评论 -
css清除浮动
<div class="div"> <div class="div1"></div> <div class="div2"></div></div>如果.div1,.div2{ float:left}想清除浮动的话可以：.div{ @include clearfix()} 其中clearfix()是之前定义好的，可以清除浮动原创 2017-01-10 20:39:52 · 396 阅读 · 0 评论 -
div里面的inline-block/inline内容两端对齐：
<div styleName=“div"> <div></div> <div></div> <div></div></div>.div{ text-align:justify div{ display:inline-block }} 是占位符，是必须的原创 2017-01-10 20:46:46 · 2220 阅读 · 1 评论 -
react中styleName和className的相关用法
简单来考虑，如果有个组件在component/Button/Button.js，然后Button.js里面引入 import styles from ‘./button.scss’ 如果Button.js里面构造component，如果没有case（也就是只有一种类型），那么给相关组件定义样式的时候可以用styleName=“x”，但是如果有case，比如上面定义几个 const btn1原创 2017-01-10 20:45:45 · 12955 阅读 · 0 评论 -
WEB语义化
web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构。css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义。为什么需要语义化：去掉样式后页面呈现清晰的结构 盲人使用读屏器更好地阅读 搜索引擎更好地理解页面，有利于收录 便团队项目的可持续原创 2016-07-31 11:04:51 · 371 阅读 · 0 评论 -
CSS选择器
通用选择器：选择所有元素，不参与计算优先级*，兼容性IE6+ X id选择器：选择id值为X的元素，兼容性：IE6+ X 类选择器： 选择class包含X的元素，兼容性：IE6+ X Y后代选择器： 选择满足X选择器的后代节点中满足Y选择器的元素，兼容性：IE6+ X元素选择器： 选择标所有标签为X的元素，兼容性：IE6+ :link，：visited，：focus，：hover，：act原创 2016-07-31 12:10:43 · 226 阅读 · 0 评论 -
如何水平居中元素
如果需要居中的元素为常规流中inline元素，为父元素设置text-align: center;即可实现如果需要居中的元素为常规流中block元素，1）为元素设置宽度，2）设置左右margin为auto。3）IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值<body> <div class="content"> aaaaaa aaaaaa a a原创 2016-07-31 17:00:47 · 277 阅读 · 0 评论 -
简单的外边距折叠问题
1) 参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。<div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</div><div style="height:50px; margin-top:100px; width:50px; background原创 2016-07-31 16:53:33 · 281 阅读 · 0 评论 -
清除浮动的三种方法
方法一：添加新的元素 、应用 clear：both；<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="clear"></div></div>.clear{clear:both; height: 0原创 2016-07-31 15:19:29 · 581 阅读 · 0 评论 -
position属性详解
absolute：<style type="text/css">h2.pos_abs{position:absolute;left:100px;top:150px}</style></head><body><h2 class="pos_abs">这是带有绝对定位的标题</h2><p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 1原创 2016-07-31 15:10:59 · 414 阅读 · 0 评论 -
CSS的继承属性
letter-spacing：设置字符间距 word-spacing：设置单词间间距 text-indent：规定首行文本缩进 text-transform：控制单词大小写 text-shadow：文本阴影 cursor：设置光标显示格式原创 2016-07-31 14:59:50 · 235 阅读 · 0 评论 -
display的block和inline属性
block元素特点：1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-aligninline元素特点1.水平方向上根据direction依次布局 2.不会在元素前后进行换行 3原创 2016-07-31 12:18:04 · 246 阅读 · 0 评论 -
link和import的区别
link是HTML方式， @import是CSS方式 link最大限度支持并行下载，@import过多嵌套导致串行下载 link可以通过rel=”alternate stylesheet”指定候选样式 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式 @import必须在样式规则之前，可以在css文件中引用其他文件 总体来说：link优于@import原创 2016-07-31 12:15:25 · 362 阅读 · 0 评论 -
display:none和visibility:none的区别
联系：它们都能让元素不可见区别：display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间； visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示； visibility: hidden;是继承属性，子孙节点消失由于继原创 2016-07-31 12:13:36 · 6885 阅读 · 0 评论 -
select2插件实现列表的模糊搜索
select2插件基于bootstrap，可以实现列表的模糊搜索相关链接：http://www.cnblogs.com/wuhuacong/p/4761637.html原创 2017-01-10 20:35:48 · 5294 阅读 · 0 评论