css
关注
分享
扫一扫
文章平均质量分 62
binlety
这个作者很懒，什么都没留下…
展开
-
文字样式：
1.两端对齐：text-align:justify;（兼容ie）text-align-last:justify;文字必须留有空格（兼容ie firefox）2.文字换行：word-break:break-all;（截断）white-space:normal;3.单行超出省略号展示：overflow: hidden;white-space: nowrap;tex...原创 2019-11-08 16:56:48 · 185 阅读 · 0 评论 -
word-spacing和letter-spacing之间的区别
这两个属性都用来添加他们对应的元素中的空白。一、word-spacing（词间距，添加每个单词之间的空白） 语法：word-spacing : normal | length normal : 默认间距 length : 由浮点数字和单位标识符组成的长度值，允许为负值。请参阅长度单位 说明： ...原创 2018-08-01 07:59:10 · 13287 阅读 · 0 评论 -
W3C标准盒模型和IE盒模型
标准W3C盒子模型：（内容content是一个独立的部分）所以盒子总宽度为：width+border+padding IE盒子模型： （width已经包含content border padding）所以盒子总宽度为：width ...原创 2018-08-02 07:52:54 · 1761 阅读 · 0 评论 -
src和href的区别
虽然一直在用这两个属性，但是一直没有具体的去区分和了解这两个属性的区别，今天就来看看 href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系 src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。 src是source的缩写，是指向外部资源的位置，指向的内部会...原创 2018-08-06 08:41:42 · 34673 阅读 · 4 评论 -
脱离文档流的疑难混淆点儿 display:inline-block能脱离文档流吗
CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。脱离文档流只是对html文档的一种...原创 2018-08-05 14:57:26 · 1763 阅读 · 0 评论 -
什么是sass和less，简介
less是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。sass是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。Sass的缩排语法，对于写惯css前端...原创 2018-08-03 08:16:30 · 1294 阅读 · 0 评论 -
块级元素和行内元素的区别
在标准文档流里面，块级元素具有以下特点：①总是在新行上开始，占据一整行；②高度，行高以及外边距和内边距都可控制；③宽带始终是与浏览器宽度一样，与内容无关；④它可以容纳内联元素和其他块元素。行内元素的特点：①和其他元素都在一行上；②高，行高及外边距和内边距部分可改变；③宽度只与内容有关；④行内元素只能容纳文本或者其他行内元素。不可以设置宽高，其宽度随着内容增加，高度随字体大...原创 2018-08-03 11:05:19 · 155 阅读 · 0 评论 -
响应式布局详解（优缺点）
一、什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看...原创 2018-08-03 11:09:45 · 4985 阅读 · 0 评论 -
什么是CSS hack 以及分类
什么是CSS hack由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack...原创 2018-08-03 11:11:26 · 367 阅读 · 0 评论 -
定位属性中的善变的sticky？
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。<!DOCTYPE html><html> <head> <...原创 2018-08-04 11:11:19 · 250 阅读 · 0 评论 -
display:none和visibility:hidden的区别
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏...原创 2018-08-04 10:00:14 · 731 阅读 · 0 评论 -
css伪类和伪元素（Pseudo-elements）区别
CSS 伪类 (Pseudo-classes)W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。属性 描述 CSS :active 向被激活的元素添加样式。 1 :focus 向拥有键盘输入焦点的元素添加样式。 2 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 1 :link...原创 2018-08-01 07:59:26 · 1071 阅读 · 0 评论 -
浮动 和 文档流
# 文档流 # 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。 # 浮动 # 浮动让行内元素或块元素自动转化为行内块元素 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的## 文字 ##会...原创 2018-08-06 08:00:41 · 288 阅读 · 0 评论 -
涉及IE浏览器的兼容性问题以及解决方案
1.双边距BUG float引起的 使用display2.3像素问题 使用float引起的 使用dislpay:inline -3px3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active4.Ie z-index问题 给父级添加position:relative5.Png 透明 使用js代码 改6.Min-height 最小高度 ！Imp...原创 2018-08-04 10:16:34 · 1309 阅读 · 0 评论 -
静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。2、设计方法： PC：居中布...原创 2018-08-01 08:00:09 · 678 阅读 · 0 评论 -
$(document).ready()
区别1：它规定DOM（网页文档）加载完成后网页内容加载之前执行的，也就是说在html加载完成后，图片加载之前。window.onload是在页面所有元素（包括图片、引用文件）加载完成后执行，也就是说页面的所有东西加载完之后在加载。区别2：$(document).ready()比window.onload()的加载速度要快区别3：前者可以写多个，后者页面中只能写一个。onload(...原创 2018-08-05 14:34:55 · 2642 阅读 · 1 评论 -
六种常用的设置水平垂直居中的方式
1 position: absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px;2position:absolute;left:0;top...原创 2018-08-06 08:12:02 · 629 阅读 · 0 评论 -
清除浮动的八种方式
1，在同级浮动元素的背后加一个空的div,设置属性clear:both; 2 ,给父元素加高度，解决了父级div无法自动获得高度的问题，但是这种限制了兼容性的问题，而且子元素高度必须和父元素一样，不然会出错 3，overflow:hiddent 浏览器会自动检查浮动区域的高度； 4，父级div定义 伪类:after 和 zoom ...原创 2018-08-06 08:08:43 · 274 阅读 · 0 评论 -
(css元素溢出) overflow的设置项
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。5、inherit 规定应该从父元素继承 overflow 属性的值。...原创 2018-08-06 08:04:34 · 2497 阅读 · 0 评论 -
解决内联元素间隙的方法
1、去掉内联元素之间的换行2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size原创 2018-08-06 08:03:55 · 486 阅读 · 0 评论 -
margin-top 塌陷 的解决方案
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下： 1、外部盒子设置一个边框 border 2、外部盒子设置 overflow:hidden 3、使用伪元素类： .clearfix:before{ content: ''; display:...原创 2018-08-06 08:03:14 · 289 阅读 · 0 评论 -
背景图片的设置
设置背景图片垂直位置的有“top”、“center”、“bottom”还可以设置具体的像素值 来把背景图片精确地定位到盒子的某个位置 “background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向...原创 2018-08-06 08:02:42 · 329 阅读 · 0 评论 -
怎么处理移动端1px 被渲染成2px 的问题？
在<head></head>之间设置下<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />兼容性问题，某个元素默认就有1px的border，或者有1px的outline，将各元素的base属性border与outline设为0；<s...原创 2018-08-05 14:27:54 · 2752 阅读 · 0 评论