css
关注
分享
扫一扫
文章平均质量分 63
我就是陈星烨
前端开发
展开
-
换行符引发的margin问题
如下HTML代码： <ul> <li>12345</li> <li>12345</li> <li>12345</li> <li>12345</li> <li>12345</li> </ul> 则将li设置属性display:inline-block后，li之间会有一些间隙，Chrome下为6px ,为消除这些原创 2017-07-02 11:28:53 · 594 阅读 · 0 评论 -
css常见布局方式
单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）使用inline-block 和 text-align实现.parent{text-align: center;}.child{display:转载 2017-09-19 11:44:19 · 479 阅读 · 0 评论 -
不用计算设置水平垂直居中
前提是父元素和子元素已经设置了宽高flex#father{ width:100%; height:400px; display: flex; justify-content:center; align-items:center; background-col原创 2017-06-22 09:12:19 · 434 阅读 · 0 评论 -
word-break和white-space和text-overflow
break-word break-word主要规定单词内如何进行换行: break-all：遇到边界无条件换行 keep-all：只能在半角空格或者连字符处换行，默认 break-word总是在规定的width内活动white-space white-space规定单词之间的空白如何处理： nowrap：不换行，即是超出width，合并空原创 2017-08-03 11:07:33 · 404 阅读 · 0 评论 -
CSS中可以和不可以继承的属性
一、无继承性的属性1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向3、盒子模型的属性width、height、margin 、margin-top、margin-right、margi转载 2017-09-06 20:57:28 · 339 阅读 · 0 评论 -
css vertical-align属性详解
适用场景vertical-align属性设置元素的对齐方式，只有具备以下两种属性的元素设置vertical-align后才起作用：1. display:inline2. display:inline-block属性介绍HTML：<p>xxxxxxxxxxxxx<span>Lorem ipsum dolor</span></p>CSS： p{ height: 1原创 2017-09-06 16:05:26 · 7419 阅读 · 0 评论 -
position属性介绍
默认属性staticstatic即没有定位，还是保持其在文档流中的正常顺序，不能设置z-index相对定位relativerelative为相对定位，但是不脱离文档流，可设置z-index绝对定位absoluteabsolute为绝对定位，其相对于最近的定位父元素进行定位，定位父元素包括relative，absolute，fixed。脱离文档流，可设置z-index固定定位fixedfixed是一种原创 2017-08-15 14:50:13 · 231 阅读 · 0 评论 -
CSS动画实现轮播图
关键是将外面的container设置成为相对定位且其width为一个子元素的width，里面的子元素长度设置为count*width，且绝对定位，利用animation实现动画效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="t原创 2017-08-19 15:18:02 · 2926 阅读 · 0 评论 -
a标签的各个伪类书写顺序
正确写法：a:link{text-decoration:none ; color:red ;}a:visited {text-decoration:none ; color:black ;}a:hover {text-decoration:underline ; color:yellow ;}a:active {text-decoration:none ; color:pink ;}记忆口诀：原创 2017-08-11 11:01:51 · 2859 阅读 · 0 评论 -
清除浮动
HTML结构：<div id="outer"> <div id="inner"> </div> </div>css结构#inner{ float:left;}1.设置外层元素overflow:hidden属性#outer{ overflow:hidden|auto;}2.设置外层元素float:left属性#outer{ float:left;}3原创 2017-06-26 15:04:10 · 244 阅读 · 0 评论 -
div 实现 textarea
css.test_box{ width:500px; min-height:300px; max-height:500px; margin:0 auto; padding:3px; outline:0;//border外面[color style width] border:thin solid #666; font-size:12px转载 2017-07-04 21:37:11 · 295 阅读 · 0 评论 -
圣杯布局------4种css左中右布局方式
1. float+marginhtml lang="en">head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> #content{ height:300px; } .left{ wi原创 2017-06-26 16:42:18 · 4651 阅读 · 0 评论