css
咖喱鸡块
前端一枚
展开
-
22.css定义width和height的大小
当给css添加样式padding的时候 这个盒模型的大小 等于 padding + width + border 如 :width:200px;padding:10px; 200+10 = 210; 如果给这个盒模型添加背景图片的话 他会充满整个盒模型 包括padding区域 这个时候要是想给这个盒模型里原创 2016-07-26 21:23:48 · 627 阅读 · 0 评论 -
17.标题的SEO小技巧,可以隐藏文字 但是不影响文字的重要性!
标题的SEO小技巧,可以隐藏文字 但是不影响文字的重要性! Document #box h2 { width:0px; height:0px; font-size:0px; padding-left:200px;原创 2016-07-21 19:55:39 · 807 阅读 · 0 评论 -
18.雪碧 网页小图片的使用,可以将它们设置到一张大图上,然后用背景距离调控他们出现的位置!
雪碧 网页小图片的使用,可以将它们设置到一张大图上,然后用背景距离调控他们出现的位置! Document div { width:475px; height:8px; background: url("radius.png") 0px -18原创 2016-07-21 19:59:11 · 381 阅读 · 0 评论 -
12.当没有给父级设置高度的时候,子集的高度会加载到父级身上!
当没有给父级设置高度的时候, 子集的高度会加载到父级身上! asdasd ul li{ width: 100px; height: 100px; background: red; margin-bottom: 10px;原创 2016-07-21 19:26:45 · 1652 阅读 · 0 评论 -
19.被span包着的文字定义了属性的话,它不会受到父级定义属性的影响!
被span包着的文字定义了属性的话,它不会受到父级定义属性的影响! 定位的越准确,优先级越高!!!!! Document html,body { margin:0; height:100%; position: relative;原创 2016-07-21 20:03:54 · 308 阅读 · 0 评论 -
20.当图片有宽度的时候,图片的高度会随着宽度成比例缩放!
当图片有宽度的时候,图片的高度会随着宽度成比例缩放! Document html,body { height:100%; } ul { width:100%; } li {原创 2016-07-21 20:04:33 · 1161 阅读 · 0 评论 -
26.做移动端的项目时,用一条媒体查询就搞定
按照设计图给的 尺寸进行 媒体查询 假如:640px;媒体查询就写640 然后高不给具体数值,里面的东西正常写就行,可以用px或者 百分比这个时候媒体查询也可以不写,一样好使 但是要求 最大的宽要给定640px;原创 2016-08-17 09:55:16 · 417 阅读 · 0 评论 -
32.页面缩小背景图显示一半另一半白色解决办法
页面缩小背景图显示一半另一半白色解决办法确定好使页面多出白色部分的尺寸,定位最小尺寸 在body中设置min-width原创 2016-10-11 16:42:15 · 3221 阅读 · 0 评论 -
33.如何用H5标签进行页面自动跳转和自动刷新
如何用H5标签进行页面自动跳转和自动刷新第一条 是自动刷新 2S以后执行第二条 是自动跳转 2S以后执行原创 2016-10-14 11:17:43 · 4940 阅读 · 0 评论 -
34.父级不给宽另文字居中并且后又图片的方法
34.父级不给宽另文字居中并且后又图片的方法原创 2016-10-19 18:10:35 · 203 阅读 · 0 评论 -
40.before伪类的添加
before伪类添加效果原创 2017-01-16 15:31:52 · 379 阅读 · 0 评论 -
46.左侧固定右侧自适应
.left{ width:calc(100% - 100px);; float:left;}.right{ width:100px; height:1800px; float:left; background: black; display: block;}原创 2017-03-30 17:10:03 · 336 阅读 · 0 评论 -
手机video在div中播放
"myvideo" src="test.mp4" webkit-playsinline="true">video>原创 2017-03-31 10:15:37 · 616 阅读 · 0 评论 -
清浮动
.clearfix {zoom:1;}.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }原创 2017-03-31 10:16:59 · 243 阅读 · 0 评论 -
清除手机tap事件后element 时候出现的一个高亮
清除手机tap事件后element 时候出现的一个高亮* { -webkit-tap-highlight-color: rgba(0,0,0,0);}原创 2017-03-31 10:18:14 · 211 阅读 · 0 评论 -
移除浏览器默认的样式,比如chrome的input默认样式,然后就可以定义需要的样式。
移除浏览器默认的样式,比如chrome的input默认样式,然后就可以定义需要的样式。input, button, textarea, select { *font-size: 100%; -webkit-appearance:none;}原创 2017-03-31 10:19:05 · 583 阅读 · 0 评论 -
css开启硬件加速
用CSS开启硬件加速来提高网站性能(转)翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css。你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗?现在原创 2017-03-31 10:26:08 · 565 阅读 · 0 评论 -
16.对子集padding 对父级没有影响
对子集padding 对父级没有影响 但是子集宽度或者高度超过父级的边框时候 子集会直接出去 Document ul { margin: 10px auto; width: 200px; height: 200px;原创 2016-07-21 19:55:05 · 307 阅读 · 0 评论 -
15.行属性标签在包裹文字使用时,不需要设置宽高
行属性标签在使用时 不需要设置宽高,当需要左右调整的时候用margin, 字体的行距用line-height控制; asd span{ margin:100px; /*height: 50px;*/ line原创 2016-07-21 19:52:33 · 288 阅读 · 0 评论 -
23.在 块属性内部创建行数行标签时!!
在 块属性内部创建行数行标签时!! 行属性子集在块属性内部!原创 2016-07-26 21:33:03 · 201 阅读 · 0 评论 -
5.在p标签里不能嵌套所有快属性的标签
在p标签里不能嵌套所有快属性的标签 否则会被p标签排挤出去成为一个新的脱离P标签的 快属性 asdasd ul li{ background: #ccc; line-height: 60px; height: 60px;原创 2016-07-20 17:34:42 · 485 阅读 · 1 评论 -
24.子集中字体颜色不随父级
子集中被包住的文字字体颜色 不受父级控制, 不同标签下,字体的颜色可以变原创 2016-07-26 22:38:51 · 409 阅读 · 0 评论 -
1.第一个子级的margin top 会传递给父级
当给子集使用margin top属性的时候 若不想影响父级的解决办法1.给父级添加border;2.父级使用overflow:hidden;3.不要使用margin-top 用父级padding-top 温馨提示:注意盒子的空间原创 2016-07-20 16:46:58 · 967 阅读 · 1 评论 -
2.兄弟之间的margin-top 和 margin-bottom 会叠压
兄弟之间的margin-top 和 margin-bottom 会叠压 所以当给兄弟之间上下排布控制距离的时候 只需要控制器中一个div即可 asd #a{ margin: 0 auto; width: 500px; height: 500px;原创 2016-07-20 17:14:14 · 2205 阅读 · 0 评论 -
3.单独的 body div p span 等标签定义成公共样式
单独的 body div p span 等标签定义成公共样式 私有样式用class和id 属性定义原创 2016-07-20 17:24:18 · 975 阅读 · 0 评论 -
4.文字在div垂直居中的方式
文字的盒子区域高度有两种定义方式一种在父级定义盒子高度用总高度,子集中ling-height用总高度除以行数得到,结果是文字居中 直接在子集中等于子集的高度 asdasd ul li{ background: #ccc; line-height: 60px;原创 2016-07-20 17:28:57 · 354 阅读 · 0 评论 -
6.块属性 子集默认宽度为父级的宽度
块属性 子集默认宽度为父级的宽度 子集默认宽度为父级的宽度 挺重要的知识点 asdasd ul li{ background: #ccc; line-height: 60px; height: 60px; margin-to原创 2016-07-20 17:38:37 · 710 阅读 · 1 评论 -
7.行属性的标签代码换行被解析
行属性的标签代码换行被解析原创 2016-07-20 17:42:14 · 591 阅读 · 0 评论 -
8.当行属性标签需要进行上下的移动时候
当行属性标签需要进行上下的移动时候 它本身不支持上下的padding和margin的,但是你可以在行属性标签外边加上一个同等大小的p属性标签就可以解决了,直接用padding-top解决! 当然把行属性变成块属性也可以。 asdasd span{ bac原创 2016-07-20 17:50:44 · 1054 阅读 · 0 评论 -
9.当你需要插入一个可以连接的小图片时候
当你需要插入一个可以连接的小图片时候 需要引入一个a标签 它本身是行属性所以它不支持宽高,这时候你可以先定义这个小盒子为#(无) 然后通过padding来撑开这个小图片的宽,小图片就能显示出来了! 当然也可以使a标签变成一个块属性 asdasd a{原创 2016-07-21 17:07:00 · 280 阅读 · 0 评论 -
10.委类的标签使用方法;1.鼠标悬浮;2.增加内容
委类的标签使用方法; 1.鼠标悬浮;2.增加内容 Document p { margin:0; } div { width:400px; height:400px; backgr原创 2016-07-21 19:09:03 · 275 阅读 · 0 评论 -
11.css中的after命令
css中的after命令 :after 选择器在被选元素的内容后面插入内容。 请使用 content 属性来指定要插入的内容p:after{content:"- 台词";background-color:yellow;color:red;font-weight:bold;}原创 2016-07-21 19:20:46 · 550 阅读 · 0 评论 -
13.浮动:给子集加浮动父级的文字会被排挤出去;同样的效果兄弟集也一样试用!
浮动:给子集加浮动父级也会浮动, 父级的文字也会被排挤出去; 同样的效果兄弟集也一样试用! Document #box0 { height:30px; background: green;原创 2016-07-21 19:40:09 · 323 阅读 · 0 评论 -
14.text-indent:首行缩进他的范围在没有右边的时候是无限制的
text-indent:首行缩进他的范围在没有右边的时候是无限制的; 而右边框限制了文字或者图片在右边的排列, 当文字或者图片到达右边的时候他就会被挤入下一行! 所以设置宽,会排挤;设置高会溢出! asd原创 2016-07-21 19:48:30 · 439 阅读 · 0 评论 -
-webkit-touch-callout 禁止长按链接与图片弹出菜单
-webkit-touch-callout 禁止长按链接与图片弹出菜单-webkit-touch-callout: none;原创 2017-03-31 10:30:40 · 3424 阅读 · 0 评论