![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 553 阅读 · 0 评论 -
css常见布局方式
单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)使用inline-block 和 text-align实现.parent{text-align: center;}.child{display:转载 2017-09-19 11:44:19 · 462 阅读 · 0 评论 -
不用计算设置水平垂直居中
前提是父元素和子元素已经设置了宽高flex#father{ width:100%; height:400px; display: flex; justify-content:center; align-items:center; background-col原创 2017-06-22 09:12:19 · 416 阅读 · 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 · 367 阅读 · 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 · 321 阅读 · 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 · 7340 阅读 · 0 评论 -
position属性介绍
默认属性staticstatic即没有定位,还是保持其在文档流中的正常顺序,不能设置z-index相对定位relativerelative为相对定位,但是不脱离文档流,可设置z-index绝对定位absoluteabsolute为绝对定位,其相对于最近的定位父元素进行定位,定位父元素包括relative,absolute,fixed。脱离文档流,可设置z-index固定定位fixedfixed是一种原创 2017-08-15 14:50:13 · 214 阅读 · 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 · 2902 阅读 · 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 · 2838 阅读 · 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 · 227 阅读 · 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 · 279 阅读 · 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 · 4618 阅读 · 0 评论