随笔分类 -  css

border-radius
摘要：border-radius设置 1. 水平和垂直方向的值保持一致：左上角 右上角 右下角 左下角 2. 水平和垂直方向的值分开，中间用/分开：(水平方向)左上角 右上角 右下角 左下角/(垂直方向)左上角 右上角 右下角 左下角 特性 1. 大值特性，值很大的时候，只会使用能够渲染的圆角大小渲染 2 阅读全文
posted @ 2017-11-09 00:22 huapyuan 阅读(241) 评论(0) 推荐(0)
box-shadow
摘要：box-shadow用来设置阴影，基本的设置为 box-shadow: 水平偏移量 垂直偏移量 模糊距离 阴影大小 颜色 向内/向外（默认向外） 对图形进行变形的同时，阴影也会做相应的变形 除颜色外，其它值都取0，阴影与图形完全重合且不可见，可以通过对x/y偏移量来看看 首先设置一个圆形div 下面 阅读全文
posted @ 2017-08-31 00:53 huapyuan 阅读(3313) 评论(0) 推荐(1)
【翻译】关于vertical-align所有你需要知道的
摘要：本文是翻译过来的，如果有不对的地方还请指教~，原文链接：Vertical-Align: All You Need To Know 前面一些说明，可以略过不看吧 我经常需要对元素进行垂直方向上的布局。 CSS提供了一些方法来实现这个功能，比如float，position: absolute，手动地增加 阅读全文
posted @ 2017-08-06 23:50 huapyuan 阅读(1079) 评论(0) 推荐(0)
三列布局
摘要：中间三列布局想要的效果如图 上、下为头部和底部，中间分成3列，左右两列为固定宽度，中间的宽度随着浏览器窗口变化而变化 按下面三个步骤顺序写这个布局，最后会有一个完整的代码 1. 基本的布局结构（html代码） 要把middle部分调整到left上，因为一般middle比较重要，所以让它先进行渲染加载 阅读全文
posted @ 2017-07-31 20:18 huapyuan 阅读(343) 评论(0) 推荐(0)
CSS margin属性取值
摘要：margin表示一个元素的外边距。取值为正值时，表示相对于正常流离邻近元素更远，而取负值时，使其更近 但是，设置margin后，四个方向的表现形式不同 自身发生移动：top、left margin-top CSS margin-left CSS 邻近元素移动：right、bottom margin- 阅读全文
posted @ 2017-07-30 01:20 huapyuan 阅读(448) 评论(0) 推荐(0)
CSS margin合并
摘要：外边距合并 块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距 发生外边距合并的三种基本情况 1. 相邻的兄弟姐妹元素 CSS 2. 块级父元素与其第一个/最后一个子元素 margin-top：块级父元素和其第一个子元素会发生上外边距合并 margin-bott 阅读全文
posted @ 2017-07-29 23:47 huapyuan 阅读(390) 评论(0) 推荐(0)
CSS弹性（flexible）盒子
摘要：弹性盒子 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成 弹性容器通过display:flex | inline-flex将其定义为弹性容器 弹性容器内包含了一个或多个弹性子元素 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器 阅读全文
posted @ 2017-07-15 23:54 huapyuan 阅读(658) 评论(0) 推荐(0)
CSS盒子模型
摘要：盒子模型 replaced/non-replaced元素 替换（replaced）元素：内容不在CSS修饰模型中，比如图片、嵌入的文档等。图片的内容一般是被src属性值替换。替换元素一般是有固有的维度，比如宽度、长度等。 非替换（non-replaced）元素：元素本身有实际内容，如<p>我是non 阅读全文
posted @ 2017-07-15 15:06 huapyuan 阅读(289) 评论(0) 推荐(0)
CSS学习——基础分类整理
摘要：1. CSS 层叠样式表: Cascading Style Sheets，定义如何显示html元素 CSS规则: 选择器{属性: 值; 属性: 值;} CSS注释: /*在这里写注释说明*/ 选择器 样式表 盒子模型 位置 颜色 显示方式 图片设置 图像效果 间距 伪类 大小 分列 2. 选择器 3 阅读全文
posted @ 2017-06-18 00:42 huapyuan 阅读(249) 评论(0) 推荐(0)