CSS
关注
分享
扫一扫
友人C君~
这个作者很懒，什么都没留下…
展开
-
CSS-文字少的时候居中，超过一行左对齐
html <div class="box"> <div class="content"> 我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字s </div> </div>css .box{ bac...原创 2019-03-06 20:05:58 · 2551 阅读 · 4 评论 -
height和line-height的区别
不设置line-height时，默认显示完整的文字且留有上下边距（垂直居中）font-size=line-height时，行高恰好可以显示文字，但是由于其文字基线是英文字母“x”的下端沿，所以中文会有些许溢出的情况。font-size<line-height时,文字垂直居中。设置了height，height=line-height时候，同样是文字垂直居中...原创 2019-04-19 21:21:30 · 1261 阅读 · 1 评论 -
清除浮动的clearfix样式
.clearfix:after{ display:table; clear:both; content:""; height:0px;}.clearfix {*zoom:1;} //照顾IE6，IE7就可以了原创 2019-04-29 19:10:11 · 406 阅读 · 0 评论 -
CSS基础干货（转载）
原文地址：http://caibaojian.com/css-ppt前端页面的书写顺序先看设计稿 编写 HTML 代码 编写 CSS 代码 编写 JS 代码今天我们主要关注编写 CSS 代码，在写 CSS 代码时，我们需要从PSD中拿到各种数据，如何精准的拿到这些数据，保证页面能够像素级还原呢？PSD切图打开PSD，我们看到一个PSD里面有很多的智能参考线，设计师在设计的过...转载 2019-04-29 19:33:30 · 626 阅读 · 0 评论 -
CSS底部栏固定方法
原文地址：http://caibaojian.com/css-5-ways-sticky-footer.html转载 2019-04-29 21:04:28 · 2033 阅读 · 0 评论 -
css书写顺序和常用命名推荐（转载）
原文链接：http://caibaojian.com/486.html写css代码的时候有一个好的规范和顺序能够帮你节省很多时间。下文将推荐相关CSS书写顺序和规范的一些方法。这个文档将会整理进前端规范文档中，如果你有更好的意见，不妨留言告知我们。CSS书写顺序该代码来自于互联网，最初好像是Mozilla的网站上。· 1. Display & Flow(显示与流) 2....转载 2019-04-29 21:38:14 · 154 阅读 · 0 评论 -
CSS3 animation动画颜色渐变效果
<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title><style> body,html{ position:reletive;}div{ position:absolute; top:50%; left...原创 2019-03-25 19:35:02 · 2695 阅读 · 0 评论 -
子元素margin-top属性传递给父元素的问题
问题描述：一个父包含框包含一个子元素。给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走，而子元素和父元素的边距则没有发生变化。解决办法：1.修改父元素的高度，增添padding-top样式模拟（常用）；2.为父元素添加overflow:hidden;样式即可（完美）；5.为父元素或者子元素声明浮动（可用）；3.为父元素添加border（可用）;4.添加额外...原创 2019-03-06 19:41:13 · 491 阅读 · 0 评论 -
CSS布局大全（转载）（精华）
原文地址：https://juejin.im/post/5aa252ac518825558001d5de内容目录一、水平居中(1)文本/行内元素/行内块级元素▲(2)单个块级元素▲(3)多个块级元素(4)使用绝对定位实现▲(5)任意个元素(flex)★本章小结：二、垂直居中(1)单行文本/行内元素/行内块级元素▲(2)多行文本/行内元素/行内块级元素(3)图片▲(4)单个块级...转载 2019-06-06 15:11:14 · 982 阅读 · 0 评论 -
利用CSS中的@media实现响应式布局（转载）
优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值准备工作1：设置Meta标签首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：<metaname="viewport"content="width=device-width,initial-sca...转载 2019-06-11 14:44:04 · 1379 阅读 · 0 评论 -
css粘性定位
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>粘性定位</title> <style>div.sticky { position: -webkit-sticky; position: sticky; top: 0; p...原创 2019-01-24 12:35:05 · 1700 阅读 · 1 评论 -
absolute和fixed的区别
fixed:固定定位absolute:绝对定位区别很简单：1、没有滚动条的情况下没有差异2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动常用场合：1.fixed固定定位，只针对浏览器窗口定位，上下左右，不会随着窗口大小改变，固定不变，例如固定位置的小广告，常用于网站边缘的公司联系方式和快速回到顶部2.absol...转载 2019-01-21 10:54:22 · 11588 阅读 · 0 评论 -
内联元素和块级元素的float属性区别
float：设置了float浮动元素会脱离文档流 即从页面普通的布局排版中脱离，其他盒子元素会当这个float浮动元素不存在而进行定位。但是文本元素却会重视它，因此形成了文本环绕效果。所以我们可以理解为当元素设置了float浮动，则该元素脱离了文档流却没有脱离文本流。因此我们也可以称之为半脱离文档流。设置了position：absolute的元素则完全脱离了文档流。其他任何盒子元素、文...转载 2019-04-19 20:20:03 · 710 阅读 · 0 评论 -
css实用技巧
一、CSS文件命名规范建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：头部样式用header，头部左边，可以用header_left或header_l,还有如果是列结构的可以这样——box _1of3 (三列中的第一列)，box_2of3...转载 2019-04-19 19:22:30 · 302 阅读 · 0 评论 -
CSS-宽度分离原则
宽度分离原则 即CSS中的width属性不与影响宽度的padding/border（有时候包括margin）属性一同使用，即一个div的宽度设计分离成一个父div给定width属性，一个子div在父div下给定padding/border这些属性，如此一来，便于维护，在width不变的情况下（width不改变，只），只需要修改padding/border值就可以完成初始条件：...原创 2019-03-06 21:32:11 · 634 阅读 · 0 评论 -
background-size：contain 与cover的区别（转载）
作用： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。不同之处在于：1.在no-repeat情况下，如果容器宽高比与图片宽高比不同， cover（遮盖）：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉； contain（包含）:图片宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；2.在repeat情况下： ...转载 2019-03-25 16:34:03 · 977 阅读 · 0 评论 -
margin塌陷
当两个盒子在垂直方向上设置margin值时，会出现塌陷现象1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。3、两个外边距一正一负时，折叠结果是两者的相加的和。 1.给父盒子添加border 2.给父盒子添加padding-top 3.给父盒子添加overflow:hidden ...转载 2019-03-23 14:54:27 · 272 阅读 · 0 评论 -
css三角_文本提示框
<!DOCTYPE html><html><head><meta charset="utf-8"><title>文本提示框</title><style> .tip1,.tip2{ width: 20px; height: 0; border-width: 20px; ...原创 2019-04-04 15:35:38 · 200 阅读 · 0 评论 -
BFC（块级格式上下文）
BFC（块级格式上下文）可以解决：清除浮动问题、外边距合并问题、右侧自适应问题BFC的生成满足下列css声明之一的元素便会生成BFC根元素 float的值不为none overflow的值不为visible（常用 overflow:hidden创建BFC区域） display的值为inline-block、table-cell、table-caption position的...原创 2019-04-11 09:17:29 · 362 阅读 · 0 评论 -
css中的 nth-child(1) 不存在
<div><p>这是一个p</p><a>这是一个a</a><a>这是又一个a</a></div>a:nth-child(2)的意思是：先拿出a元素的父元素（即div）中的第2个子元素，再看看是不是a，正好是，所以就选中了“<a>这是一个a</a>”；同理，...转载 2019-04-15 20:20:26 · 4318 阅读 · 2 评论 -
transition设置display过渡无效
使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。原因display:none的时候，页面文档流中将不会存在该元素，display:block...转载 2019-04-16 22:00:40 · 9118 阅读 · 3 评论 -
CSS hack
做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己的经...转载 2019-04-22 09:46:28 · 167 阅读 · 0 评论 -
css选择符类型及优先级
1.id选择器（ # myid）2.类选择器（.myclassname）3.标签选择器（div, h1, p）4.相邻选择器（h1 + p）5.子选择器（ul > li）6.后代选择器（li a）7.通配符选择器（ * ）8.属性选择器（a[rel = "external"]）9.伪类选择器（a:hover, li:nth-child）优先级：行内样式 &...原创 2019-02-28 16:30:48 · 1432 阅读 · 0 评论 -
css样式初始化
浏览器默认样式(user agent stylesheet)+cssreset每种浏览器都有一套默认的样式表，即user agent stylesheet，在写网页时，没有指定的样式，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。这才带来了很多的坑，让大家用cssreset去填。。一、浏...转载 2019-04-22 11:43:43 · 1185 阅读 · 0 评论 -
转载——css 填坑常用代码分享
原文地址：https://www.cnblogs.com/jikey/p/4233003.html1. 文字换行2. 两端对齐3. 去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框 去掉chrome记住密码后自动填充表单的黄色背景4. ie6: position:fixed5. clearfix6. seperate...转载 2019-04-28 21:29:26 · 197 阅读 · 0 评论 -
常见的两列，三列布局的几种实现方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-08-25 23:24:03 · 1384 阅读 · 0 评论