CSS3 - 随笔分类(第2页) - CodingSherlock

CSS进阶（五）border

摘要：boder默认值的medium默认值为3px,是因为border-style:double 要设置3px才会有效果设置一条边不进行渲染时，用下面的写法渲染性能高： border-color的颜色值在没有设置的时候就是color的值技巧（1）设置透明的border来增加点击区域的大小（2）设置阅读全文

posted @ 2018-10-14 10:44 CodingSherlock 阅读(158) 评论(0) 推荐(0)

CSS进阶（四）margin

摘要：margin 元素尺寸：border-box DOM属性里的offsetWidth 和offsetHeight 元素内部尺寸： padding-box DOM属性里的clientWidth 和 clientWidth 元素外部尺寸： margin-box 理解为元素占据的空间尺寸。-margin 元阅读全文

posted @ 2018-10-13 23:48 CodingSherlock 阅读(150) 评论(0) 推荐(0)

CSS进阶（三）padding

摘要：内联元素padding是有作用的设置内联级元素如a的垂直方向的padding，不仅能够增加点击区域的大小，也不会影响到整体的布局 padding的百分比值 padding的百分比值无论是水平方向还是垂直方向，均是相对于宽度计算的内联元素的垂直Padding会让幽灵元素空白节点显现小技巧（1）阅读全文

posted @ 2018-10-13 15:50 CodingSherlock 阅读(156) 评论(0) 推荐(0)

CSS进阶（二）content

摘要：content 什么是替换元素表单元素Input button textarea select img iframe video 替换元素的特点（1）内容的外观不受页面上的CSS影响（2）有自己的尺寸（3）在很多CSS属性上有自己的一套表现规则替换元素的尺寸计算规则（1）固有尺寸，及元素阅读全文

posted @ 2018-10-11 23:37 CodingSherlock 阅读(588) 评论(0) 推荐(0)

CSS3学习笔记-动画

摘要：使用关键帧声明动画@keframes，单位只能是百分比，如0%，格式如下：或应用如下方式设置动画通过animation属性来调用动画属性详解 animation-name 动画名@keyframes后面的自定义名字，可以用none来覆盖任何动画 animation-duration 动画播放阅读全文

posted @ 2018-09-22 23:14 CodingSherlock 阅读(98) 评论(0) 推荐(0)

CSS3学习笔记-过渡

摘要：过渡函数ease-in等实际上是贝塞尔曲线的实现过渡函数还有一个step()函数，用于把整个操作领域划分成同样大小的间隔 step()图解简写，多属性逗号隔开触发方式（1）伪元素触发 :hover :active :checked :focus （2）媒体查询触发@media设置断点（3）阅读全文

posted @ 2018-09-22 22:14 CodingSherlock 阅读(118) 评论(0) 推荐(0)

CSS3学习笔记-响应式布局

摘要：三种设置方式 max-width 媒体类型小于或等于时应用 only用来指定特定的媒体，可以排除不支持媒体查询的浏览器弹性图片 img {max-width:100%;} 设置断点主要断点大于1024px 小于768px 小于640px 小于480px 小于320px 阅读全文

posted @ 2018-09-21 19:06 CodingSherlock 阅读(117) 评论(0) 推荐(0)

CSS3学习笔记-变形

posted @ 2018-09-21 16:25 CodingSherlock 阅读(125) 评论(0) 推荐(0)

CSS3学习笔记-渐变

摘要：渐变可以应用与任何使用背景图片的地方底部向顶部顶部向底部从左到右从右到左从左下到右上从右上到左下从左上到右下从右下到左上多色渐变自定义渐变径向渐变圆形渐变椭圆渐变靠左上角阅读全文

posted @ 2018-09-21 14:40 CodingSherlock 阅读(108) 评论(0) 推荐(0)

CSS3学习笔记-技术提示

摘要：css书写过程中的优先级（1）display 及相关声明；（2）position 及相关的声明；（3） margin、padding 和 border 及相关声明；（4）字体/文本相关声明；（5）装饰相关声明。样式表中的顺序按照html中出现的顺序进行编写根据情况来书写后备代码腻子脚阅读全文

posted @ 2018-09-17 19:30 CodingSherlock 阅读(129) 评论(0) 推荐(0)

CSS3学习笔记-界面组件

摘要：纵向菜单 tips: 设置a标签display:block填充整个li区域，同时在a标签上设置边距横向菜单（1）ul设置overflow:hidden 强制包裹浮动元素，li设置float:left左浮动，a标签设置display:block （2）ul设置inline-block,li设置fl 阅读全文

posted @ 2018-09-17 15:32 CodingSherlock 阅读(150) 评论(0) 推荐(0)

CSS3学习笔记-页面布局

摘要：多栏布局的三种实现方案固定宽度，流动，弹性原则上应该控制布局宽度，而让内容决定布局高度固定宽度布局解决设置margin,padding或border后元素宽度变宽的方法（1）设置box-sizing属性为border-box。存在兼容性问题，可以使用腻子脚本ployfill来解决。（2）阅读全文

posted @ 2018-09-16 21:22 CodingSherlock 阅读(357) 评论(0) 推荐(0)

CSS3学习笔记-字体和文字

摘要：字体字体族font-family 通常需要给处字体栈以适应不同机器间的适配，多单词字体需要用引号 serif和sans-serif是最保险的方法字体大小设置font-size:62.5% 1em=10px em单位的相对大小会逐层复合 rem 相对于根元素的字体大小，不支持ie8极其以下的浏览阅读全文

posted @ 2018-09-16 14:34 CodingSherlock 阅读(297) 评论(0) 推荐(0)

CSS3学习笔记-元素定位

摘要：内边距边框外边距 border border三个属性 border-wdith 默认值medium border-style 默认值none border-color 默认值 black border-radius小于border-width,元素内角为直角，大于时，元素内角的半径为两个值的差阅读全文

posted @ 2018-09-16 12:44 CodingSherlock 阅读(207) 评论(0) 推荐(0)

CSS3学习笔记-选择器

摘要：类选择器 class="className" .className 选取class为className的元素 p.chassName 选取p标签中class为className的元素 .className1.className2 选取同时拥有.className1和.className2的元素 id 阅读全文

posted @ 2018-09-16 08:58 CodingSherlock 阅读(118) 评论(0) 推荐(0)

CodingSherlock

随笔分类 - CSS3

公告